<template>
  <sail-page type="switchBindHouse" title="绑定房源" isHead>
    <div slot="content" class="switch-wrapper">
        <sailCell type="region" toType="room" desc="请选择所在项目"/>
        <sailCell type="room" toType="unit" desc="请选择所在楼栋"/>
        <sailCell type="unit" toType="floor" desc="请选择所在单元"/>
        <sailCell type="floor" toType="roomNumber" desc="请选择所在楼层"/>
        <sailCell type="roomNumber" toType="relation" desc="请选择所在房间号"/>
        <sailCell type="relation" toType="relation" desc="请选择身份信息"/>
        <div class="switch-house-wrapper">
            <p class="switch-house-desc">您未在赛嶺公寓入住，您还可以选择以下方法成为赛领的小伙伴：</p>
            <div class="switch-house-button__explain">
              <span class="spec-order">•</span>若您是赛领小伙伴的同住人，可手动绑定房屋
            </div>
            <div class="switch-btn gradient-green" @click="manualBind">手动绑定</div>
            <div class="switch-house-button__explain">
              <span class="spec-order">•</span>您可以现在加入赛领呦
            </div>
            <div class="switch-btn gradient-green" @click="applyClick">申请入住</div>
        </div>
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import sailPage from "@/components/sail-page.vue";
import sailCell from "@/components/sail-cell.vue";
import { Toast } from "vant";
export default {
  components: {
    sailPage,
    sailCell
  },
  computed: {
    ...mapState({
      //hurryPersonLInk: state => state.hurryPersonLInk,
    })
  },
  data: function(){
    return {
        
    }; 
  },
  mounted() {
    //this.$store.dispatch("fetchSelectDataType", "hurryPersonLInk");      
  },
  methods: {
    applyClick() {
      this.$router.push({path: "/applyCheckIn"});
    },
    manualBind() {
      this.$store.commit("UPDATE_FILTER_HOUSE_OPTION", "region");
      Toast.loading({
        duration: 0,       // continuous display toast
        forbidClick: true, // forbid click background
        loadingType: "spinner",
        message: "正在加载"
      });
      this.$store.dispatch("sendDiffList", {
        type: "region",
        times: 1
      }).then(res => {
        Toast.clear();
      });
    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
    @import "~@/common/less/variable.less";
    @nice-gray: #585858;
    @nice-explain-gray: #939393;
    .switch-wrapper {
      height: 100vh;
    }
    .switch-house-wrapper {
      margin-top: 14px;
      text-align: left;
      .switch-btn {
        width: 125px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        margin: 0 auto;
        color: white;
        margin-bottom: 51.5px;
      }
      .spec-order {
         color: @nice-green;
         padding-right: 13px;
         font-size: 14px;
      }
      .switch-house-button__explain {
        padding-left: 33px;
        margin-top: 25px;
        margin-bottom: 18.5px;
        color: @nice-explain-gray;
        font-size: 14px;
      }
      .switch-house-desc {
        width:336px;
        margin: 0 auto;
        text-align: left;
        color: @nice-gray;
        font-size: 14px;
      }
    }
</style>1