<template>
  <sail-page type="loading-view" title="样板间" isHead>
    <div slot="content" class="sample__room_box">  
        <emptyPageCard :isEmptyType="sampleRoomList.length===0?'sampleroom':'normal'"/> 	
        <div class="sample_rooms" :style="`background: url(${hostURL}${item.coverImg}) no-repeat;background-size: 100% 275px;`" v-for="(item, index) in sampleRoomList" :key="index"> 
            <div class="spacing"></div>       	       	
        	<p class="community_name">{{item.regionName}}</p>
            <ExpectCard class="expect_card" :isExpect="item.isPublish === 2" :date="item.publishTime"/>  	
        	<div class="each__sample_room"> 
        		<router-link class="link" :to="item.isPublish === 1?(`/sampleRoomDetails/${sample.id}`):''" v-for="(sample, index) in item.houselayouts" :key="index">
                    <SampleRoomCard :data="sample" class="sample_room_card"/>
            </router-link>
               <!--  <router-link class="link" to="/">
                    <SampleRoomCard class="sample_room_card"></SampleRoomCard>
                </router-link>     -->           
        	</div>	        	       	
        </div>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import SampleRoomCard from "@/common/widget/sampleRoomCard.vue";
import ExpectCard from "@/common/widget/expectCard.vue";
import emptyPageCard from "@/common/widget/emptyPageCard.vue";
import { mapState } from "vuex";
import api from "@/api/index.js";
let URL = api.serverURI;
export default {
  components: {
    sailPage,
    SampleRoomCard,
    ExpectCard,
    emptyPageCard
  },
  props:{
      
  },
  computed: {
    ...mapState({
      sampleRoomList: state => state.sampleRoomModule.sampleRoomList,
    })
  },
  asyncData({store, route}) {
    let id = route.params.id;
    return store.dispatch("sampleRoomModule/fetchSampleRoomList").then(res => {
         
    });
  },
  data: function(){
    return {
      hostURL: URL
    }; 
  },
  methods: {
      
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    .sample__room_box {
    	width: 375px;
    	min-height: 100vh;
    	background: @nice-bgwhite;
    	.sample_rooms {
    		width: 375px;    		
    		position: relative;
    		// background: url(~@/assets/img/login_bg@3x.png) no-repeat;
    		// background-size: 100% 275px;
    		z-index: 0; 
        .background_style {

        } 
    		.expect_card {
    			position: absolute;   			
    			left: 141px;
    			top: 65px; 
    		}
    		.community_name {
    			min-width: 104px;
          padding: 0 10px;
    			height: 27px;
    			text-align: center;
    			font-size: 15px;
    			background: @nice-green;
    			color: @nice-bgwhite;
    			line-height: 27px;
    			top: 40px;
    			left: 0;
    			position: absolute;
    		}
    		.each__sample_room {
    			z-index: 999;
    			width: 375px;  			
    			padding-top: 179px;  				
    			
    		}
    		.sample_room_card {
    			margin: 10px 0 10px 13.5px;
    			z-index: 999;

    		}
    		
    	}
    	
    }
</style>