<template>
<div class="binding">
  <span class="title">完善业主信息</span>
  <div class="label">
    <span class="small-title">业主基本信息</span>
    <input type="text" placeholder="姓名" class="input" v-model="form.name">
  </div>
  <div class="label">
    <span class="small-title">房屋信息</span>
    <input type="text" placeholder="房产证号码" class="input" v-model="form.certificateNo">
    <van-field
        class="input-a"
        v-model="fieldValue"
        is-link
        readonly
        label="具体房屋信息"
        placeholder="请选择具体位置"
        @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
          :field-names="fieldNames"
          v-model="cascaderValue"
          title="请选择具体位置"
          :options="options"
          @change="onChange"
          @close="show = false"
          @finish="onFinish"
      />
    </van-popup>
  </div>
  <div class="label">
    <span class="small-title">产证信息</span>
    <van-uploader :max-count="1"  v-model="fileList" :after-read="afterRead" />
  </div>
  <div class="btn" @click="submit">提交信息</div>
</div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  name: "binding",
  data() {
    return {
      form:{
        certificateNo:'',
        certificatePhoto:'',
        houseId:'',
        name:''
      },
      fileList:[],
      show: false,
      fieldValue: '',
      cascaderValue: '',
      fieldNames:{
        text:'name',
        value:'id',
        children:'children'
      },
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
      ],
    };
  },
  mounted() {
    this.getEstates();
  },
  methods: {
    onChange(target){
      if(target.selectedOptions[target.tabIndex].leaf == true){
        this.form.houseId = String(target.value)
      }else{
        let params = {
          estateUnitId:target.value
        }
        this.$api.getEstates(params).then(res=>{
          target.selectedOptions[target.tabIndex].children = res.content.subs.map(x=>{
            if(!x.leaf){
              return {
                ...x,
                name:x.name+(x.exp?x.exp:''),
                children:[]
              }
            }else{
              return {
                ...x,
                name:x.name+(x.exp?x.exp:''),
              }
            }
          })
        })
      }

    },

    getEstates(){
      let params = {
        estateUnitId:1
      }
      this.$api.getEstates(params).then(res=>{
        console.log(res)
        this.options = res.content.subs.map(x=>{
          if(!x.leaf){
            return {
              ...x,
              name:x.name+(x.exp?x.exp:''),
              children:[]
            }
          }else{
            return {
              ...x,
              name:x.name+(x.exp?x.exp:''),
            }
          }
        })
      })
    },
    submit(){

      this.$api.houseBlind(this.form).then(res=>{
        Dialog.alert({
          title: '提交成功',
          message: '请等待管理员审核通过后，参能参与实名后的活动',
          theme: 'round-button',
        })
        this.$router.go(-1)
      })
    },
    afterRead(file) {
      let formData = new FormData()
      formData.append('file',file.file)
      this.$api.upload(formData).then(res=>{
        this.form.certificatePhoto = res.content
      })
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.name).join('/');
    },
  },
}
</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>