<template>
  <sail-page type="applyCheckIn" title="申请入住" isHead>
    <div slot="content" style="height: 92vh;">
        <p class="apply-desc">请认真填写您的真实信息，以便我们的服务人员尽快与您取得联系</p>
        <div class="apply-form">
            <div class="weui-cells zero-top">
              <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
                  <div class="weui-cell__bd">
                      <input :value="applyInfo.userName" disabled class="weui-input" type="text" placeholder="请输入姓名">
                  </div>
              </div>
              <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">身份证号</label></div>
                  <div class="weui-cell__bd">
                      <input :value="applyInfo.cardCodeFilter" disabled class="weui-input" placeholder="请输入身份证号">
                  </div>
              </div>
              <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                  <div class="weui-cell__bd">
                      <input v-model="applyInfo.phone" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入手机号">
                  </div>
              </div>
              <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
                  <div class="weui-cell__bd">
                      <cube-radio-group v-model="applyInfo.applicantSex" :options="sexList" position="right" :hollow-style="true" :horizontal="true"/>
                  </div>
              </div>
               <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">是否为党员</label></div>
                  <div class="weui-cell__bd">
                      <cube-radio-group v-model="applyInfo.partyMember" :options="isPartyMember" position="right" :hollow-style="true" :horizontal="true"/>
                  </div>
              </div>
              <div @click="occupationClick">
                <van-cell-group class="spec-placeholder">
                  <van-field v-model="selectedOccupation" disabled center label="职业" placeholder="请选择">
                    <van-icon slot="icon" name="arrow" />
                  </van-field>
                </van-cell-group>
              </div>
              <div @click="educationClick">
                <van-cell-group class="spec-placeholder">
                  <van-field v-model="selectedEducation" disabled center label="学历" placeholder="请选择">
                    <van-icon slot="icon" name="arrow" />
                  </van-field>
                </van-cell-group>
              </div>
              <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">所在单位</label></div>
                  <div class="weui-cell__bd">
                      <input v-model="applyInfo.company" class="weui-input" placeholder="请输入所在单位">
                  </div>
              </div>
              
            </div>
            <div @click="subscribeMulRegionClick" style="margin-top: 15px;">
                <van-cell-group class="spec-placeholder subscribe-part">
                  <van-field type="textarea" rows="1" disabled autosize v-model="selectedRegionOnly" center label="申请项目" placeholder="请选择">
                    <van-icon slot="icon" name="arrow" />
                  </van-field>
                </van-cell-group>
              </div>
            <div class="weui-cells apply-part">
              <div class="weui-cell">
                  <div class="weui-cell__hd"><label class="weui-label">婚姻状态</label></div>
                  <div class="weui-cell__bd">
                    <van-radio-group @change="changeMarryList(applyInfo.marryStatus)" v-model="applyInfo.marryStatus">
                        <van-radio name="1">已婚</van-radio>
                        <van-radio name="2">未婚</van-radio>
                    </van-radio-group>
                     <!--  <cube-radio-group v-model="applyInfo.marryStatus" :options="marryList" position="right" :hollow-style="true" :horizontal="true"/> -->
                  </div>
              </div>
              <div class="weui-cell" v-show="applyInfo.marryStatus === '1'">
                  <div class="weui-cell__hd"><label class="weui-label">配偶姓名</label></div>
                  <div class="weui-cell__bd">
                      <input v-model="applyInfo.spouseName" class="weui-input" type="text" placeholder="请输入配偶姓名">
                  </div>
              </div>
              <div class="weui-cell" v-show="applyInfo.marryStatus === '1'">
                  <div class="weui-cell__hd"><label class="weui-label">配偶联系方式</label></div>
                  <div class="weui-cell__bd">
                      <input v-model="applyInfo.spousePhone" class="weui-input" type="text" placeholder="请输入配偶联系方式">
                  </div>
              </div>
              <div class="weui-cell" v-show="applyInfo.marryStatus === '1'">
                  <div class="weui-cell__hd"><label class="weui-label">配偶身份证号</label></div>
                  <div class="weui-cell__bd">
                      <input v-model="applyInfo.spouseCardCode" class="weui-input" type="text" placeholder="请输入配偶身份证号">
                  </div>
              </div>
              <div class="weui-cell" v-show="applyInfo.marryStatus === '1'">
                  <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
                  <div class="weui-cell__bd">
                      <cube-radio-group v-model="applyInfo.spouseSex" :options="sexList" position="right" :hollow-style="true" :horizontal="true"/>
                  </div>
              </div>
              <!-- <div v-show="selectedMarry === '1'"  ></div> -->
            </div>
        </div>
        <van-popup v-model="occupationShow" position="bottom" :overlay="true">
          <van-picker
            show-toolbar
            title="选择职业"
            :columns="occupationColums"
            @confirm="onOccupationConfirm"
            @cancel="onOccupationCancel"
          />
        </van-popup>
        <van-popup v-model="educationShow" position="bottom" :overlay="true">
          <van-picker
            show-toolbar
            title="选择学历"
            :columns="educationColums"
            @confirm="onEducationConfirm"
            @cancel="onEducationCancel"
          />
        </van-popup>
        <van-popup v-model="selectRegionShow" position="bottom" :overlay="true">
              <van-picker
                show-toolbar
                title="选择预约项目"
                :loading="loading"
                :columns="subscribeRegionColums"
                @confirm="onsubscribeRegionConfirm"
                @cancel="onsubscribeRegionCancel"
              />
            </van-popup>
        <van-button size="large" class="submit-btn" @click="submitApply">确定</van-button>
    </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import store from "@/utils/store";
import sailPage from "@/components/sail-page.vue";
import { Toast } from "vant";
export default {
  components: {
    sailPage
  },
  initData({store, route}) {
    store.dispatch("fetchSelectDataType", "Occupation");
    store.dispatch("fetchSelectDataType", "education");
    store.commit("applyModule/INIT_APPLY_INFO");
  },
  asyncData({store, route}) {
    return store.dispatch("applyModule/applyLiveFirstInfo").then(res => {
        
    });
  },
  data: function(){
    return {
      selectedSex: "1",
      selectedEducation: null,
      educationShow: false,
      occupationShow: false,
      selectRegionShow:false,
      selectedOccupation: null,
      selectedRegion:null,
      selectedRegionOnly:null,
      loading:false,
      sexList: [
        {
          label: "男",
          value: "1"
        },
        {
          label: "女",
          value: "2"
        }
      ],
      isPartyMember: [
        {
          label: "是",
          value: "1"
        },
        {
          label: "否",
          value: "2"
        }
      ],
      selectedMarry: "1",
      marryList: [
        {
          label: "已婚",
          value: "1"
        },
        {
          label: "未婚",
          value: "2"
        }
      ]
    }; 
  },
  computed: {
    ...mapState({
      applyInfo: state => state.applyModule.applyInfo,
      occupationColums: state => state.Occupation,
      educationColums: state => state.education,
      subscribeRegionColums: state =>
        state.subscribeModule.subscribeRegionColums
    })
  },
  methods: {
    subscribeMulRegionClick() {
      this.loading = true;
      this.selectRegionShow = true;
      this.$store
        .dispatch("onlineHouseModule/selectListRegion",{publishStatus:1,num:10000})
        .then(res => {
          this.loading = false;
          this.$store.commit(
            "subscribeModule/SET_REGION_COLUMS",
            res.data.data
          );
          //
        });
    },
    onsubscribeRegionConfirm(value, index) {
      
      this.selectRegionShow = false;
      this.selectedRegionOnly = value.text;
      this.$store.commit("applyModule/SET_APPLY_REGIONID", value.id);
    },
    onsubscribeRegionCancel(value, index) {
      this.selectRegionShow = false;
    },
    changeMarryList(value) {
      
      this.$store.commit("applyModule/SET_APPLY_MARRYSTATUS",value);
    },
    submitApply() {
      if(!this.selectedOccupation ) {
        Toast.fail({
          duration: 1000,
          message: "请选择职业！"
        });
        return false; 
      }
      if(!this.selectedEducation ) {
        Toast.fail({
          duration: 1000,
          message: "请选择学历！"
        });
        return false; 
      }
      if(!this.applyInfo.company) {
        Toast.fail({
          duration: 1000,
          message: "请填写所在单位！"
        });
        return false; 
      }
      if(this.applyInfo.marryStatus === "1") {
        const reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/; 
        if(!this.applyInfo.spouseName) {
          Toast.fail({
            duration: 1000,
            message: "请输入配偶姓名！"
          });
          return false; 
        }     
        if(!reg.test(this.applyInfo.spousePhone)){
          Toast.fail({
            duration: 1000,
            message: "联系方式格式错误，请重新填写！"
          });
          return false;
        }                     
        if(this.applyInfo.spouseCardCode.length < 18 ) {
          Toast.fail({
            duration: 1000,
            message: "配偶身份证格式错误，请重新输入！"
          });
          return false; 
        }

      }
      //return
      this.applyInfo.marryStatus = this.applyInfo.marryStatus|0;
      store("applyInfo", this.applyInfo);
      this.$router.push({path: "/applyUpload"});
    },
    occupationClick() {
      this.occupationShow = true;
    },
    educationClick() {
      this.educationShow = true;
    },
    onOccupationConfirm(value, index) {
      this.selectedOccupation = value.text;
      this.$store.commit("applyModule/SET_APPLY_OCCUPATION", value.value);
      this.occupationShow = false;
    },
    onOccupationCancel(value, index) {
      this.occupationShow = false;
    },
    onEducationConfirm(value, index) {
      this.selectedEducation = value.text;
      this.$store.commit("applyModule/SET_APPLY_EDUCATION", value.value);
      this.educationShow = false;
    },
    onEducationCancel(value, index) {
      this.educationShow = false;
    }
  }
};
</script>
<style lang="less">
    .apply-form {
      .cube-radio-group[data-horz=true]:after {
        border: 0;
      }
      .border-right-1px:after {
        border: 0;
      }
      .cube-radio-group[data-horz=true] .cube-radio {
        padding: 0;
        margin-left: -5px;
      }
      .cube-radio-group[data-horz=true] .cube-radio[data-pos=right] .cube-radio-ui {
        order: 0;
      }
      .cube-radio-group[data-horz=true] .cube-radio[data-pos=right] .cube-radio-label {
        margin-left: 9px;
      }
      .cube-radio-group[data-horz=true] .cube-radio-wrap {
        justify-content: left;
        padding: 0;
      }
      .cube-radio-group[data-horz=true] .cube-radio:last-child {
        margin-left: -100px;
      }
      .apply-part {
        .weui-label {
          width: 95px;
        }
      }
    } 
</style>
<style lang="less" scoped>
    .apply-desc {
      font-size: 11px;
      margin-top: 11.5px;
      margin-bottom: 11.5px;
    }
    .apply-part{
      margin-top: 12px;
    }
    .van-radio {
      width: 100px;
    }
    .van-radio-group {
      display: flex;
    }
</style>1