<template>
  <van-popup v-model="filterOption[type].visible" position="right">
      <div class="cell-page">
        <van-nav-bar
          title="手动绑定"
          left-arrow
          @click-left="back"
        />
      	 <div class="cell-wrapper">
            <div class="cell-content" v-if="isRelation">
                <p class="cell-desc">{{desc}}</p>
                <div class="my-cell-wrapper">
                  <van-cell-group>
                    <van-cell v-for="(cell, index) in filterOption[type].options" :key="index" :title="cell.name" @click="jumpPane(cell.id, cell.name)" is-link />
                  </van-cell-group>
                </div>
              <!-- <van-list
                v-model="loading"
                :finished="finished"
                :offset="0"
                @load="onLoad"
                v-if="isRelation"
              >
              </van-list> -->
            </div>
            <p class="cell-desc" v-show="!isRelation">房屋信息：{{regionName}}{{buildNumName}}栋{{unitName}}单元{{floorName}}层{{houseCode}}</p>
            <cube-radio-group v-if="!isRelation" v-model="filterOption[type].selected" :options="filterOption[type].options" />
            <van-button :loading="loading" class="submit-btn mg-left" v-show="!isRelation" @click="submit">确定</van-button>
         </div>
      </div>
  </van-popup>
</template>

<script>

//import sailPage from '@/components/sail-page.vue'
//import sailCell from '@/components/sail-cell.vue'
import { mapState } from "vuex";
import { Toast } from "vant";
export default {
  props: {
    type: {
      type: String,
      default: "",
      required: true
    },
    toType: {
      type: String,
      default: "",
      required: true
    },
    desc: {
      type: String,
      default: "",
      required: true
    },
    data: {
      type: String,
      default: "",
      required: false
    }
  },
  components: {
    //sailPage,
    //sailCell
  },
  computed: {
    ...mapState({
      filterOption: state => state.filterOption,
      regionName: state => state.regionName,
      buildNumName: state => state.buildNumName,
      unitName: state => state.unitName,
      floorName: state => state.floorName,
      houseCode: state => state.houseCode
    }),
    isRelation() {
      return this.type !== "relation";
    }
  },
  data: function(){
    return {
      //visible: false
      loading: false,
      finished: false,
      times: 1
    };
  },
  methods: {
    // onLoad() {
    //   
    //   this.times++;
    //   this.$store.dispatch('sendDiffList', {
    //     type: this.type,
    //     times: this.times
    //   }).then(res => {
    //     this.loading = false;
    //     //
    //     if(res.list.length >= res.total) {
    //       //
    //       this.finished = true;
    //       this.times = 1;
    //     }
    //   })
    // },
    back() {
      this.$store.commit("UPDATE_FILTER_HOUSE_OPTION", this.type);
    },
    jumpPane(keyId, name) {
      //
      if(this.type === "region") {
        this.$store.commit("SET_CURRENT_REGION_ID", {
          id: keyId,
          name: name
        });
      }else if(this.type === "room") {
        this.$store.commit("SET_CURRENT_BUILDINGNUM", {
          id: keyId,
          name: name
        });
      }else if(this.type === "unit") {
        this.$store.commit("SET_CURRENT_UNIT", {
          id: keyId,
          name: name
        });
      }else if(this.type === "floor") {
        this.$store.commit("SET_CURRENT_FLOOR", {
          id: keyId,
          name: name
        });
      }else if(this.type === "roomNumber") {
        this.$store.commit("SET_CURRENT_HOUSEID", {
          id: keyId,
          name: name
        });
      }
      this.$store.commit("UPDATE_FILTER_HOUSE_OPTION", this.toType);
      //
      if(this.toType === "relation") {
        return;
      }
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在加载"
      });
      this.$store.dispatch("sendDiffList", {
        type: this.toType,
        times: 1
      }).then(res => {
        Toast.clear();
      });
    },
    submit() {
      this.loading = true;
      this.$store.dispatch("commitBindHouse").then(res => {
        this.loading = false;
        if(res) {
          this.$store.dispatch("bindHouseModule/viewHouseInfo").then(res => {
            this.$store.commit("loginModule/SET_LOGIN_HOUSE_INFO", res.data.data);
            this.$router.push({path: "/MyPage"});
          });
        }
      });
      //
    },
    jump() {
      this.$emit("jumpCallback");
    }
  }
};
</script>
<style lang="less">
  .cell-page {
    .van-list {
      height: 95vh;
      overflow: scroll;
    }
    .van-cell:not(:last-child):after {
      left: 0;
    }
  }
  
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    .mg-left {
      margin-left: 10px;
    }
    .cell-page {
    	width: 100vw;
    	height: 100vh;
    	background: #F7F7F7;
      .my-cell-wrapper {
          height: 80vh;
          overflow-y: scroll;
      }
      .cell-wrapper {
        text-align: left;
        // min-height: 80%;
      }
      .cell-desc {
        color: #585858;
        margin-left: 18px;
        margin-top: 14.5px;
        margin-bottom: 11.5px;
      }
    }
    
</style>1