<template>
  <sail-page type="loading-view" title="我的收藏" isHead>
    <div slot="content" class="my_collections">
        <van-tabs @click="onClick" v-model="active" swipeable>
           <van-tab v-for="index in 2" :key="index" :title="tabTextMap[index]" class="van-tab-style">
              <div v-show="index == 1">
                 <emptyPageCard :isEmptyType="collectionRegionInfo.length===0?'collectregion':'normal'"/>
                  <div class="project_collections">
                    <router-link class="link" v-for="(region,index) in collectionRegionInfo" :to="`/projectDetails/${region.midReference}`" :key="index">
                         <ProjectCard :data="region" isHouseAddress isProjectNum/> 
                    </router-link>                  
                  </div>             
              </div>
              <div v-show="index == 2">
                 <emptyPageCard :isEmptyType="collectionLayoutInfo.length===0?'collectlayout':'normal'"/>
                   <div class="housing_collections">
                       <router-link class="link" v-for="(layout,index) in collectionLayoutInfo" :to="`/housingTypeDetails/${layout.midReference}`" :key="index">
                            <ProjectCard :data="layout" isHouseName isHouseSpace/> 
                       </router-link> 
                   </div>
              </div>
           </van-tab>
        </van-tabs>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import ProjectCard from "@/common/widget/projectCard.vue";
import { mapState } from "vuex";
import { Toast } from "vant";
import emptyPageCard from "@/common/widget/emptyPageCard.vue";
export default {
  components: {
    sailPage,
    ProjectCard,
    emptyPageCard    
  },
  computed: {
    ...mapState({
      collectionRegionInfo:state => state.addCollectionModule.collectionRegionInfo, // 获取收藏项目
      collectionLayoutInfo:state => state.addCollectionModule.collectionLayoutInfo  // 获取收藏户型
    })
  },
  data: function(){
    return {
      name: "template",
      active: 0,
      tabTextMap: {
        1: "项目",
        2: "户型"
      }
    }; 
  },
  asyncData({store,route}){
    return store.dispatch("addCollectionModule/getCollectionInfo",{
      pn:1,
      pageSize:1000,
      type:1
    });
  },
  methods: {
    onClick(index, title) {
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在加载"
      });
      if(index === 0) {
        this.$store.dispatch("addCollectionModule/getCollectionInfo",{
          pn:1,
          pageSize:1000,
          type:1
        }).then(res => {
          Toast.clear();
        });
      }else {
        this.$store.dispatch("addCollectionModule/getCollectionInfo",{
          pn:1,
          pageSize:1000,
          type:2
        }).then(res => {
          Toast.clear();
        });
      }
      

    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
    .my_collections {
      width: 100vw;
      min-height:100vh;
      background: #ffffff; 
    }
</style>