<template>
  <sail-page type="loading-view" title="首页">
    <div slot="content" id="homeApp">       
          <div class="home__banner">
            <van-swipe>
              <van-swipe-item v-for="(image, index) in images" :key="index">
                 <img :src="image" >
              </van-swipe-item>
            </van-swipe>
          </div>                      
          <div class="section-content">
              <p class="search__box">
                <svg class="icon search__icon" aria-hidden="true">
                     <use xlink:href="#icon-02"/>
                </svg>
                <input @focus="focus" type="text" readonly class="serach__input" style="width: 100%;" placeholder="搜索">
                <!-- <svg class="icon scan__icon" aria-hidden="true">
                     <use xlink:href="#icon-saoyisao"></use>
                </svg> -->
              </p>
              <div class="housing_operation">
                <router-link class="link" to="/projectList">
                   <p class="housing_list housing">
                      <!-- <svg class="icon housing__icon" aria-hidden="true">
                           <use xlink:href="#icon-fangyuan"></use>
                      </svg> -->
                      <img class="housing__icon" src="@/assets/img/home_btn_1_n@3x.png" alt="">
                      <span class="housing_title">房源</span>
                   </p>
                </router-link>
                <router-link class="link" to="/sampleRoomList">
                   <p class="housing_list housing">
                      <!-- <svg class="icon housing__icon" aria-hidden="true">
                           <use xlink:href="#icon-yangbanjian"></use>
                      </svg> -->
                      <img class="housing__icon" src="@/assets/img/home_btn_2_n@3x.png" alt="">
                      <span class="housing_title">样板间</span>
                   </p>
                </router-link>
                <router-link class="link" to="/subscribeHouse">
                   <p class="housing_list housing">
                     <!--  <svg class="icon housing__icon" aria-hidden="true">
                          <use xlink:href="#icon-yuyuekanfang"></use>
                     </svg> -->
                     <img class="housing__icon" src="@/assets/img/home_btn_3_n@3x.png" alt="">

                      <span class="housing_title">预约看房</span>
                   </p>
                 </router-link>
                 <router-link class="link" to="/detailsOccupancy">
                   <p class="housing_list housing">
                     <!--  <svg class="icon housing__icon" aria-hidden="true">
                          <use xlink:href="#icon-shenqingruzhu"></use>
                     </svg> -->
                     <img class="housing__icon" src="@/assets/img/home_btn_4_n@3x.png" alt="">

                      <span class="housing_title">申请入住</span>
                   </p>
                </router-link>              
                   <p class="housing_list housing" @click="callCustomerService">
                     <!--  <svg class="icon housing__icon" aria-hidden="true">
                          <use xlink:href="#icon-lianxikefu"></use>
                     </svg> -->
                     <img class="housing__icon" src="@/assets/img/home_btn_5_n@3x.png" alt="">

                      <span class="housing_title">联系客服</span>
                   </p>             
              </div>
              <div class="service_operation">
                 <router-link class="link" to="/checkInGuide">
                    <p class="service_list">
                       <svg class="icon service__icon" aria-hidden="true">
                            <use xlink:href="#icon-ruzhuzhinan1"/>
                       </svg>
                       <span class="service_title">入住指南</span>
                    </p>
                 </router-link>
                 <router-link class="link" to="/maintenanceApply/normal/normal">
                    <p class="service_list">
                       <svg class="icon service__icon" aria-hidden="true">
                            <use xlink:href="#icon-weibao1"/>
                       </svg>
                       <span class="service_title">维保</span>
                    </p>
                 </router-link>
                 <router-link class="link" to="/mobilePhoneOpenDoor">
                    <p class="service_list">
                       <svg class="icon service__icon" aria-hidden="true">
                            <use xlink:href="#icon-shoujikaimen"/>
                       </svg>
                       <span class="service_title">手机开门</span>
                    </p>
                 </router-link>
                 <router-link class="link" to="/complainSuggest">
                    <p class="service_list">
                       <svg class="icon service__icon" aria-hidden="true">
                            <use xlink:href="#icon-tousujianyi1"/>
                       </svg>
                       <span class="service_title">投诉建议</span>
                    </p>
                 </router-link>
                 <router-link class="link" to="/helloHouseKeeper">
                    <p class="service_list">
                       <svg class="icon service__icon" aria-hidden="true">
                            <use xlink:href="#icon-changjianwenti1"/>
                       </svg>
                       <span class="service_title">常见问题</span>
                    </p>
                 </router-link>
              </div>
              <div class="hot__project-boxs">
                 <p class="hot_project">
                    <span class="hot_words">热门项目</span>
                    <router-link class="link look_more" to="/projectList">
                    查看更多
                    <svg class="icon service__icon" aria-hidden="true">
                         <use xlink:href="#icon-qianjin"/>
                    </svg>
                  </router-link>
                 </p>
                 <p class="hot_project-instructe">打造别具一格的生活品味</p>
                 <div class="hot_project_swiper">
                    <swiper :options="HotProjectSwiperOption">
                      <swiper-slide v-for="(project, index) in homeProjectListInfo" :key="index">
                        <router-link class="link" :to="`/projectDetails/${project.id}`">                      
                           <HotProjectCard :index="index" :data="project" class="HotProjectCard" isPrice/>
                        </router-link>
                      </swiper-slide>
                                     
                    </swiper> 
                 </div>
              </div>
              <div class="hot__project-boxs" style="padding-bottom: 20px;">
                 <p class="hot_project hot_house">
                    <span class="hot_words">热门户型</span>
                    <router-link class="link look_more" to="/housingTypeList">
                    查看更多
                    <svg class="icon service__icon" aria-hidden="true">
                         <use xlink:href="#icon-qianjin"/>
                    </svg>
                  </router-link>
                 </p>
                 <p class="hot_project-instructe">房子可以租 生活不将就</p>
                 <div class="hot_project_swiper">
                    <swiper :options="HotHouseSwiperOption">
                      <swiper-slide v-for="(layout, index) in homeLayoutListInfo" :key="index">
                        <router-link class="link" :to="`/housingTypeDetails/${layout.id}`">                      
                           <HotHouseTypeCard :index="index" :data="layout" class="HotProjectCard"/>
                        </router-link>
                      </swiper-slide>                                                                       
                    </swiper> 
                 </div>
              </div>
          </div>       
        <footer>
          <div class="weui-tabbar footer-content">
           <navFooter/>
          </div>
        </footer>
    </div>
  </sail-page>
</template>

<script>
import sailPage from "@/components/sail-page.vue";
import NavFooter from "@/common/widget/navFooter.vue";
//import HotProjectCard from '@/common/widget/hotProjectCard.vue'
import HotProjectCard from "@/common/widget/swiperHotProjectCard.vue";
//import HotHouseTypeCard from '@/common/widget/hotHouseTypeCard.vue'
import HotHouseTypeCard from "@/common/widget/swiperHotHouseTypeCard.vue";
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper"; 
import { mapState } from "vuex";
import { Dialog } from "vant";
  
import imgDemo from "@/assets/img/bannerImg/home_pic_banner@3x.jpg";
export default {
  components: {
    sailPage,
    NavFooter,
    HotProjectCard,
    HotHouseTypeCard,
    swiper,
    swiperSlide
  },
  computed: {
    ...mapState({
      telephone: state => state.telephone,
      homeProjectListInfo:state => state.findMoreRegionsModule.homeProjectListInfo, //获取热门项目列表数据
      homeLayoutListInfo:state => state.findMoreRegionsModule.homeLayoutListInfo //获取热门户型列表数据
    })
  },   
  data: function() {
    return {
      name: "template",
      phone:"",
      images: [
        imgDemo,
      ],
      HotProjectSwiperOption: {
        //slidesPerView: 'auto',
        lazy: true,
        spaceBetween: -40,
        //freeMode: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      HotHouseSwiperOption: {
        slidesPerView: "2",
        spaceBetween: -15,
        //freeMode: true,
        lazy: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }        
    };
  },
  asyncData({store, route}) { // 异步调取页面接口数据 asyncData
    let promise1 = store.dispatch("findMoreRegionsModule/findMoreRegions",{ // 项目
      pn:1,
      pageSize:10
    });
    let promise2 = store.dispatch("findMoreRegionsModule/findAllOnCApp",{ //户型
      pn:1,
      pageSize:10,
      status:0,
      price: 0,
      houseType: 0,
      keyWords: "",
      area: ""
    });
    let promise3 = store.dispatch("selectServiceTel");
    return Promise.all([promise1, promise2, promise3]).then(function(values) {
      // 
      // this.telephone = values[2].data.data.phone
    });
    // return store.dispatch('findMoreRegionsModule/findMoreRegions',{ // 项目
    //    pn:1,
    //    pageSize:10
    //  }).then(res=> {
    //     return store.dispatch('findMoreRegionsModule/findAllOnCApp',{ //户型
    //      pn:1,
    //      pageSize:10,
    //      status:0,
    //      price: 0,
    //      houseType: 0,
    //      keyWords: '',
    //      area: ''
    //     }).then(res=> {
    //       //
    //     })
    //  })
  },
  methods: {
    focus() {
      this.$router.push({ path: "/cleanProjectSearchList" }); // -> 编程式跳转
    },
    callCustomerService() {
      let me = this;
      
      Dialog.confirm({
        title: "提示",
        message: "你确认拨打"+ me.telephone,
        closeOnClickOverlay:true,
        confirmButtonText: "致电"
      }).then(() => {
        // on confirm
        window.location.href = "tel:"+ me.telephone;
      }).catch(() => {
        // on cancel
      });
    }
  },
  mounted() {
    // this.$store.dispatch('selectServiceTel').then(res=>{
         
    //  this.telephone = res.data.data.phone
    // })
  }
};
</script>
<style lang="less">
#homeApp {
   .van-swipe__indicator {
      width: 7px;
      height: 7px;
      background: #EFEFEF;
      border-radius: 0;
      margin-bottom: 23px;

   }
   .van-swipe__indicator--active {
    background:#AACD06; 
   } 
    .swiperHotHouseType{
    .hot__house_type {
      height: 195px;
    }
   } 
  } 
  
  .van-modal {
    background-color: rgba(0,0,0,.4);
  } 
  .van-dialog__header {
   text-align: center;
  } 
</style>
<style lang="less" scoped>
 @import "~@/common/less/variable.less";
 @nice-homebg:#F5F5F5;
 @nice-search:#BBBBBB;
 @nice-housing:#676767;
 @nice-hotProject:#585858;
 @nice-lookMore:#868686;
 @nice-intrudute:#D3D3D3;

  #homeApp{
    width: 375px;
    overflow: hidden;

    .home__banner {
      width: 375px;
      height: 209px;
      img {
        width: 375px;
        height: 209px;
      }    
    }
    .section-content {
      position: relative;
      background: @nice-homebg;
      width: 375px;
      .search__box {
         width: 337px;
         height: 33px;
         display: flex;
         position: absolute;
         left: 19px;
         top: -16.5px;
         background: @nice-bgwhite;
         border-radius: 3px;
         box-shadow: 0 0 10px rgba(0,0,0,0.11);
         z-index: 999;
         //border-bottom:2px solid rgba(0,0,0,0.2); 
         .search__icon {
           width: 14px;
           height: 14px;
           margin: 9.41px 6px 0 12.5px;
         }
        .search__input {
           flex: 1;
           width: 275px;
           height: 33px;
           border:none;
           font-size: 14px;
           color: @nice-search;
          }
         .scan__icon {
           width: 17.91px;
           height: 16.8px;           
           margin: 8.49px 13.73px 0 0; 
         } 
      }
      .housing_operation {
        width: 375px;
        height: 112px;
        display: flex;
        margin-bottom: 13px;
        background: @nice-bgwhite;
        .housing_list {
          width: 75px;
          height: 112px;
          text-align: center;        
          .housing__icon {
            display: block;
            color: @nice-green;
            width: 28px;
            padding-top: 40px;           
            margin-left: 22.5px;
          }
          .housing_title {
            display: block;
            width: 75px;
            height: 20px;
            line-height: 35px;
            font-size: 13px;
            color: @nice-housing;            
          }

        }
      }
      .service_operation {
        width: 375px;
        height: 80px;
        display: flex;
        margin-top: 13px;
        background: @nice-bgwhite;
        .service_list {
          width: 75px;
          height: 80px;
          text-align: center;        
          .service__icon {
            display: block;
            color: @nice-green;
            width: 30px;
            height: 30px;
            padding-top: 15px;           
            margin-left: 22.5px;

          }
          .service_title {
            display: block;
            width: 75px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            color: @nice-housing;
          }

        }

      }
      .hot__project-boxs {
        width: 375px;
        height: 310px;
        background: @nice-bgwhite;
        margin-top: 13px;
        .hot_project {
          width: 347px;
          height: 24px;
          padding-top: 30px;
          margin: 0 auto;
          font-size: 17px;
          color: @nice-hotProject;
          text-align: left;
          line-height: 24px;
          .hot_words{
            font-weight: bold;
          }
          .look_more {
            float: right;
            font-size: 13px;
            color: @nice-lookMore;
            margin-top: 3px;
          }
        }
        .hot_house {
          padding-top: 10px;
        }
        .hot_project-instructe {
          width: 347px;
          height: 17px;
          line-height: 17px;
          font-size: 12px;
          color: @nice-intrudute;
          float: left;
          margin-left:14px; 
          text-align: left;
        }
        .hot_project_swiper {
          width: 375px;
          height: 220px;
          margin-top: 40px;
          .swiper-container {
            height: 220px;
          }
          .HotHouseTypeCard {
            margin-left: 14px;
          }
          .HotProjectCard {
            margin-left: 14px;
            height: 210px;
          }
          .hot__house_type {
            height: 210px;
          }
        }       

      }


    }
    .footer-content{
      background: #fff;
      display: flex;
      position: fixed;
      z-index: 500;
      bottom: 0;
      left: 0;
      border-top: 1px solid rgba(0,0,0,0.3)
    }
    
  }
  
</style>