<template>
<div class="binding">
  <span class="title">完善业主信息</span>
  <div class="label">
    <span class="small-title">房屋信息</span>
    <houseSelect class="input" @on-select="onSelect"></houseSelect>
  </div>
  <div class="label">
    <span class="small-title">业主基本信息</span>
    <input type="text" placeholder="姓名" class="input" v-model="form.name">
    <input type="text" placeholder="身份证号码" class="input" v-model="form.idNumber">
  </div>

  <div class="label">
    <span class="small-title">产证信息</span>
    <van-uploader :max-count="1"  v-model="fileList" :after-read="afterRead"  @delete="deleteImg"/>
  </div>
  <div class="btn" @click="submit">提交信息</div>
</div>
</template>

<script>
import {Dialog, Notify} from 'vant';
import houseSelect from "@/components/houseSelect";
import reg from "@/util/reg";
export default {
  name: "binding",
  components:{
    houseSelect
  },
  data() {
    return {
      form:{
        certificateNo:'',
        certificatePhoto:'',
        houseId:'',
        name:'',
        idNumber:''
      },
      fileList:[],
    };
  },
  methods: {
    deleteImg(){
      console.log(11)
      this.form.certificatePhoto = ''
    },
    onSelect(item){
      this.form.houseId = item.value
      let params = {
        houseId:item.value,
        name:this.name,
        idNumber:this.idNumber,
      }
      this.$api.houseBlindAuto(params).then(res=>{
        Dialog.confirm({
          title: '提示',
          message: '该房产的预留号码与该账号配对成功，无需审核，已绑定',
        })
            .then(() => {
              Notify({ type: 'success', message: '已绑定成功' });
              this.$router.go(-1)
            })
            .catch(() => {
              // on cancel
            });

      }).catch(err=>{})
    },
    submit(){
      if(this.form.certificatePhoto == '' || this.houseId == '' || this.name == ''){
        Notify({ type: 'warning', message: '请填写完整的审核信息' });
        return
      }
      reg.regIDNumber(this.form.idNumber).then(x=>{
        this.$api.houseBlind(this.form).then(res=>{
          Dialog.confirm({
            title: '提交成功',
            message: '请等待管理员审核通过后，参能参与实名后的活动',
          })
              .then(() => {
                this.$router.go(-1)
              })
              .catch(() => {
                // on cancel
              });
        })
      })
    },
    afterRead(file) {
      let formData = new FormData()
      formData.append('file',file.file)
      this.$api.upload(formData).then(res=>{
        this.form.certificatePhoto = res.content
      }).catch(err=>{
        this.fileList = []
      })
    },

  },
}
</script>

<style scoped lang="less">
/deep/.van-cell__right-icon{
  margin-top: 12px;
}
.binding{
  text-align: center;
  .title{
    display: inline-block;
    width: calc(100% - 48px);
    padding: 0 24px;
    font-size: 28px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #01040D;
    line-height: 36px;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .label{
    margin-bottom: 30px;

    .small-title{
      display: inline-block;
      width: calc(100% - 48px);
      padding: 0 24px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #01040D;
      line-height: 36px;
      text-align: left;
      margin-bottom: 10px;
    }
  }
  .input{
    width: 310px;
    padding: 0 15px;
    height: 48px;
    //display: flex;
    //justify-content: center;
    //align-items: center;
    margin: 0 auto;
    background: #F4F5F6;
    border-radius: 8px;
    opacity: 0.8;
    border: none;
    outline: none;
    line-height: 50px;
    margin-bottom: 15px;
  }
  .input-a{
    width: 340px;
    padding: 0 15px;
    height: 48px;
    //display: flex;
    //justify-content: center;
    //align-items: center;
    margin: 0 auto;
    background: #F4F5F6;
    border-radius: 8px;
    opacity: 0.8;
    border: none;
    outline: none;
    line-height: 50px;
  }
}
</style>