<template>
  <sail-page type="loading-view" title="样板间详情" isHead>
    <div slot="content" class="sample_room_box">
        <div class="sample_room_img">
        	<img class="room_img" :src="`${hostURL}${sampleRoomDetail.coverImg}`">
        	<p class="sample_description">
            {{sampleRoomDetail.layoutName}}
            <span @click="jump" class="panoramic_img" v-if="sampleRoomDetail.degreeUrl">
                <svg class="icon panoramic__icon" aria-hidden="true">
                     <use xlink:href="#icon-duquanjing"/>
                </svg>
            </span>
          </p>
        </div>
        <div class="sample_type_show">
          <van-tabs v-model="active">
             <van-tab v-for="(item, key, index) in sampleRoomDetail.tabMap" :title="key" :key="key"/>
          </van-tabs>        	        	
        </div>
        <emptyPageCard :isEmptyType="imgTab.length===0?'sampleroom':'normal'"/> 
        <div v-show="active === index" class="sample_room_type_img" v-for="(item, index) in imgTab" :key="index">
          
        	<img class="imgs" v-for="(imgItem, imgIndex) in item.list" :key="imgIndex" :src="`${hostURL}${imgItem.propValue}`">
        </div>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import { Dialog } from "vant";
import { mapState } from "vuex";
import emptyPageCard from "@/common/widget/emptyPageCard.vue";
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  components: {
    sailPage,
    emptyPageCard
  },
  computed: {
    ...mapState({
      sampleRoomDetail: state => state.sampleRoomModule.sampleRoomDetail,
      imgTab: state => state.sampleRoomModule.imgTab
    })
  },
  asyncData({store, route}) {
    let id = route.params.id;
    return store.dispatch("sampleRoomModule/findModelDetail", id).then(res => {
         
    });
  },
  data: function(){
    return {
      hostURL: URL,
      active: 0,
      tabTextMap: {
        1: "客厅",
        2: "厨房",
        3: "卫生间",
        4: "阳台",
        5: "主卧",
        6: "次卧",
        7: "客厅"      
      }
        
    }; 
  },
  methods: {
    jump(event) {
      event.preventDefault();
      location.href = this.sampleRoomDetail.degreeUrl;
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    @nice-font-gray:#959595;  
    .sample_room_box {
    	width: 375px;
      .panoramic__icon {
        top: -5px;
        right: 10px;
        position: absolute;
        font-size: 55px;
        filter: brightness(10.3);
        text-align: right;
        color: white;
      }
	    .sample_room_img {
	    	width: 375px;
	    	height: 167px;
	    	position: relative;
	    	.room_img {
	    		width: 100%;
	    		height: 100%
	    	}
	      .sample_description {
	        	width: 375px;
	        	height: 42px;
	        	line-height: 42px;
	        	text-align: left;
	        	font-size:20px;
	        	font-weight: bold;
	        	color: @nice-bgwhite;
	        	background: rgba(0,0,0,.4);
	        	position: absolute;
	        	left: 0;
	        	bottom: 0;
	        	text-indent: 18px; 
	      }	        
	    } 
	    .sample_type_show {
	    	width: 375px;
	    	height: 40px;
	    	background: @nice-bgwhite;	    		    	      	
	    }
	    .sample_room_type_img {
	    	width: 375px;
	    	margin-top: 10px;
	    	.imgs{
	    		width: 162px;
	    		height: 115px;
	    		float: left;
	    		margin:10px 0 10px 15px; 
	    		
	    	}
	    }
    } 
</style>