<template>
  <sail-page type="onlineHouse" title="在线选房" isHead>
    <div slot="content">
        <div class="online-detail-wrapper" style="min-height: 90vh;">
            <van-tabs class="online-big-tab" @click="onTitleClick">
              <van-tab v-for="(item, index) in tabTitle" :key="index" :disabled="index === 1 && !regionId">
                <div slot="title" class="online-tab-title">
                   <span ref="ptabs">{{item}}</span>
                   <svg class="icon tip-success" aria-hidden="true">
                      <use xlink:href="#icon-fanhui1"/>
                   </svg>
                </div>
              </van-tab>
            </van-tabs>
            <van-tabs @click="onBuildClick">
              <van-tab v-for="(build, index) in buildNums" :title="`${build.buildingNum}栋`" :key="index">
                 <van-tabs @click="onUnitClick">
                   <van-tab v-for="(unit, sub_index) in units" :title="`${unit.unit}单元`" :key="sub_index"/>
                 </van-tabs>
              </van-tab>
            </van-tabs>
            <div class="house-card-wrapper online-part">
                <van-list
                  v-model="listLoading"
                  :finished="finished"
                  class="house-card-wrapper"
                  :offset="60"
                  :immediate-check="false"
                  @load="onLoad"
                >
                  <div @click="markHouse(index)" class="house-card" :class="{'house-card__active': activeIndex === index}" v-for="(house, index) in houseList" :key="index">
                      <p class="house-card__title">房间号：{{house.houseCode}}</p>
                      <div class="house-card__content">
                        <p class="house-card__desc">{{house.monthRent + house.deviceFee + house.propertyFee}}元/月</p>
                        <p class="house-card__desc">{{`${house.layoutName}${house.toilet}卫 ${house.acreage}㎡ ${house.facingName || ''}`}}</p>
                      </div>
                  </div>
                </van-list>
            </div>
             <van-button v-show="houseList.length > 0" :loading="submitLoading" class="submit-btn gradient-green" @click="submit">确定</van-button>
             <van-dialog title="确认选房" showCancelButton showConfirmButton v-model="showHouse" :beforeClose="beforeClose">
                <div class="houseInfo">
                    <p>项目：{{houseDetail.regionName}}</p>
                    <p>户型：{{houseDetail.layoutName}}</p>
                    <p>房间：{{`${houseDetail.buildingNum}栋${houseDetail.unit}单元${houseDetail.houseCode}`}}</p>
                    <p>租金：{{houseDetail.monthRent + houseDetail.deviceFee + houseDetail.propertyFee}}元/月</p>
                    <p>面积：{{houseDetail.acreage}}㎡</p>
                    <p>朝向：{{houseDetail.facingName}}</p>
                </div>
             </van-dialog>
        </div>
        <van-popup v-model="regionShow" position="bottom" :overlay="true">
          <van-picker
            show-toolbar
            title="选择项目"
            :loading="loading"
            :columns="regionColums"
            @cancel="onCancel"
            @confirm="onConfirm"
          />
        </van-popup>
        <van-popup v-model="layoutShow" position="bottom" :overlay="true">
          <van-picker
            show-toolbar
            title="选择户型"
            :loading="loading"
            :columns="layoutColums"
            @cancel="onLayoutCancel"
            @confirm="onLayoutConfirm"
          />
        </van-popup>
      </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
import { Dialog } from "vant";
import { Toast } from "vant";
import store from "@/utils/store";
//import Vue from 'vue';
export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      regionColums:state => state.onlineHouseModule.regionColums,
      layoutColums:state => state.onlineHouseModule.layoutColums,
      buildNums:state => state.onlineHouseModule.buildNums,
      units:state => state.onlineHouseModule.units,
      houseList:state => state.onlineHouseModule.houseList,
      houseDetail:state => state.onlineHouseModule.houseDetail,
      regionId: state => state.onlineHouseModule.regionId
      //homeLayoutListInfo:state => state.findMoreRegionsModule.homeLayoutListInfo, //获取热门户型列表数据
      // selectListAreaInfo:state => state.layoutListModule.selectListAreaInfo,
      // selectListPriceInfo:state => state.layoutListModule.selectListPriceInfo,
      // selectListHouseTypeInfo:state => state.layoutListModule.selectListHouseTypeInfo
    })
  },
  mounted() {
    this.$store.commit("onlineHouseModule/CLEAR_HOUSE_LIST");
    this.$store.commit("onlineHouseModule/CLEAR_BUILDNUMS");
    this.$store.commit("onlineHouseModule/CLEAR_UNINTS");
      

  },
  data: function(){
    return {
      message: "",
      currentPage: 1,
      listLoading: false,
      finished: false,
      loading: false,
      showHouse: false,
      tabTitle: ["选择项目", "选择户型"],
      regionShow: false,
      layoutShow: false,
      activeIndex: 0,
      submitLoading: false,
    }; 
  },
  methods: {
    onLoad() {
      this.currentPage++;
      this.$store.dispatch("onlineHouseModule/getHouseList", {
        currentPage: this.currentPage,
        isScroll: true
      }).then(res => {
        //Toast.clear();
        if(res.data.data.list.length === 0) {
          this.finished = true;
        }
        this.finished = false;
        this.listLoading = false;
      });
    },
    beforeClose(action, done) {
      if (action === "confirm") {
        this.$store.dispatch("onlineHouseModule/chooseHouseCommit", {
          houseId: this.houseList[this.activeIndex].id,
          id: this.$route.params.id
        }).then(res => {
          done();
          if(res) {
            res.Toast.success("选房成功");
            
            store("depositInfo",res.data.data);
            //this.$router.push({ path: `/applyDetail/${this.$route.params.id}` }); // -> 编程式跳转
            setTimeout(() => {
              this.$router.push("/payDepositBill/choosePay"); //缴纳定金
            },1000);
              
          }
        });
      } else {
        done();
      }
    },
    submit() {
      this.showHouse = true;
    },
    onConfirm(value, index) {
      
      //
      this.$store.commit("onlineHouseModule/SET_CURRENT_REGION_ID", value.id);
      //this.tabTitle = [1, 2]
      this.tabTitle[0] = value.text;
      var event = new Event("click");
      document.querySelectorAll(".online-big-tab .van-tab")[0].dispatchEvent(event);
      document.querySelectorAll(".online-big-tab .van-tab")[1].dispatchEvent(event);
      this.regionShow = false;
      // Vue.nextTick(()=> {
      // })
    },
    onCancel() {
      //
      this.regionShow = false;
    },
    onLayoutCancel() {
      this.layoutShow = false;
    },
    onLayoutConfirm(value, index) {
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在加载"
      });
      this.$store.commit("onlineHouseModule/SET_CURRENT_LAYOUT_ID", value.id);
      this.tabTitle[1] = value.text || "无户型数据";
      var event = new Event("click");
      document.querySelectorAll(".online-big-tab .van-tab")[1].dispatchEvent(event);
      this.layoutShow = false;
      this.$store.dispatch("onlineHouseModule/getBuildingNum").then(res => {
        this.$store.dispatch("onlineHouseModule/getUnit").then(res => {
          this.$store.dispatch("onlineHouseModule/getHouseList", {
            currentPage: 1,
            isScroll: false
          }).then(res => {
            this.finished = false;
            Toast.clear();
            this.currentPage = 1;
          });
        });
      });
    },
    onUnitClick(index) {
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在加载"
      });
      
      //return;
      this.$store.commit("onlineHouseModule/SET_CURRENT_UNIT", this.units[index].unit);
      this.$store.dispatch("onlineHouseModule/getHouseList", {
        currentPage: 1,
        isScroll: false
      }).then(res => {
        this.finished = false;
        Toast.clear();
        this.currentPage = 1;
      });
      // this.$store.dispatch('onlineHouseModule/getUnit').then(res => {
      // })
    },
    onBuildClick(index) {
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在加载"
      });
      this.$store.commit("onlineHouseModule/SET_CURRENT_BUILDINGNUM", this.buildNums[index].buildingNum);
      this.$store.dispatch("onlineHouseModule/getUnit").then(res => {
        this.$store.dispatch("onlineHouseModule/getHouseList", {
          currentPage: 1,
          isScroll: false
        }).then(res => {
          this.finished = false;
          Toast.clear();
          this.currentPage = 1;
        });
      });
    },
    onTitleClick(index) {
      if(index === 0) {
        this.regionShow = true;
        this.loading = true;
        this.$store.dispatch("onlineHouseModule/selectListRegion",{publishStatus:1,num:10000}).then(res => {
          this.loading = false;
            
        });
      }else {
        this.layoutShow = true;
        this.loading = true;
        this.$store.dispatch("onlineHouseModule/selectListHouseType").then(res => {
          this.loading = false;
          //
        });
      }
      
    },
    markHouse(index) {
      this.activeIndex = index;
      this.$store.commit("onlineHouseModule/SET_HOUSE_DETAIL", this.houseList[this.activeIndex]);
    }
  }
};
</script>
<style lang="less">
  @nice-gray: #e5e5e5;
  @nice-black: #464646;
  .online-detail-wrapper {    
      .online-big-tab {
        .van-tabs__line {
          height: 0;
        }
        .van-tab--active {
          color:@nice-black;
        }
      }
      .online-tab-title {
        position: relative;
        text-align: left;
        padding-left: 20px;
        span {
          display: inline;
        }
        .icon {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translate(0, -50%);
        }
      }
  }
  
</style>
<style lang="less" scoped>
    @nice-desc-gray: #ADADAD;
    @nice-txt-gray: #747474;
    @nice-shallow-green: #F4FCF8;
    @nice-green: #2BAA76;
    .online-detail-wrapper {
      height: 90vh;
      overflow: auto;
       .submit-btn {
         position: fixed;
         left: 15px;
         bottom: 0;
       }
      .houseInfo {
        text-align: left;
        background: rgb(245, 245, 245);
        color: @nice-txt-gray;
        font-weight: 600;
        padding: 12px;
      }
      .online-btn {
        text-align: center;
        width: 100%;
        position: fixed;
        bottom: 0;
        margin-bottom: 0;
      }
      .online-part {
        margin-top: 4px;
      }
      .house-card-wrapper {
        display: flex;
        flex-wrap: wrap;
        margin-left: 3px;
        margin-bottom: 50px;
        .house-card__active {
          background: @nice-shallow-green !important;
          border: 1px solid @nice-green;
        }
        .house-card {
          width: 171px;
          height:78.89px;
          background: white;
          margin-left: 9px;
          margin-top: 12.11px;
          box-sizing: border-box;
          padding-left: 11px;
          padding-top: 9.5px;
          text-align: left;
          .house-card__title {
            color: @nice-txt-gray;
            font-weight: 500;
            margin-bottom: 6px;
            font-size: 13px;
          }
          .house-card__desc {
            font-size: 12px;
            color: @nice-txt-gray;
          }
        }
      }
    }
</style>