<template>
  <div class="partner-register">
    <van-form
      validate-first
      @failed="onFailed"
      @submit="submit"
    >
      <div class="picker-wrap">
        <van-field
          readonly
          clickable
          name="area"
          label="区域"
          :value="value"
          placeholder="请选择区域"
          @click="showArea = true"
          :rules="[{ required:true, message: '请选择区域' }]"
        />
        <van-popup
          v-model="showArea"
          position="bottom"
          v-if="isShowSuperior"
        >
          <van-area
            :value="areaValue"
            :area-list="areaList"
            :columns-num="2"
            @confirm="onConfirm"
            @change="onChange"
            @cancel="showArea = false"
          />
        </van-popup>
        <van-icon
          v-if="isShowSuperior"
          name="arrow"
          class="arrow-icon"
        />
      </div>
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        v-model="partnerName"
        name="partnerName"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required:true, pattern: patternName, message: '请输入正确的姓名'}]"
      />

      <van-field
        v-model="idCard"
        name="idCard"
        label="身份证"
        type="number"
        placeholder="请输入身份证号"
        :rules="[{ required:true, pattern: patternIdCard, message: '请输入正确的身份证号'}]"
      />

      <van-field
        v-model="roles"
        name="roles"
        label="认证角色"
        disabled
      />

      <div class="picker-wrap">
        <van-field
          readonly
          clickable
          name="superior"
          :value="superior"
          label="选择上级"
          placeholder="选择上级"
          @click="showSuperior = true"
          :rules="[{ required:true, message: '请选择上级' }]"
        />
        <van-popup
          v-model="showSuperior"
          position="bottom"
          v-if="isShowSuperior"
        >
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm2"
            @cancel="onCancel2"
            @change="onChange2"
          />
        </van-popup>
        <van-icon
          v-if="isShowSuperior"
          name="arrow"
          class="arrow-icon"
        />
      </div>

      <van-field
        v-model="message"
        rows="2"
        name="introduction"
        autosize
        maxlength="200"
        label="个人简介"
        type="textarea"
        placeholder="填写个人市场简介，方便审核。不超过200字"
        show-word-limit
        :rules="[{ required:true, message: '请填写个人简介' }]"
      />
      <div style="margin: .5rem;">
        <van-button
          round
          block
          type="info"
          native-type="submit"
        >
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import areaList from "@/assets/js/area/area.js"; //地区码
import {
  getPartnerInfo
} from '../../../api/Partner/Partner';
import {
  Toast
} from 'vant';
import {
  registerPartner,
  getAdvancedPartnerByAreaCode
} from '../../../api/Partner/Partner'
export default {
  data() {
    return {
      tempList: "", // 当前用户没有上级合伙人,保存级联后请求回来的高级合伙人数据列表
      partnerSuperiorId: "",
      PartnerType: "",
      value: "",
      isShowSuperior: true, // 是否显示选择上级picker
      partnerInfo: {},
      message: "",
      areaCode: "", // 区域编号
      areaValue: '',
      introduction: "",
      partnerName: "",
      idCard: "",
      roles: "",
      areaList: areaList,
      superior: "",
      showArea: false,
      showSuperior: false,
      pattern: /^[\u4e00-\u9fa5]{2,}$/,
      patternName: /^([\u4e00-\u9fa5]{2,20}|[a-zA-Z.\s]{2,20})$/,
      patternIdCard: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/,
      columns: [], // Array String
    };
  },
  methods: {
    // 获取合伙人信息
    async getPartnerInfoFunc() {
      this.value = "";
      let {
        data
      } = await getPartnerInfo();
      this.partnerInfo = data.ResultObject;
      this.partnerName = data.ResultObject.PartnerName;
      this.idCard = data.ResultObject.IDCard;
      this.areaCode = data.ResultObject.Region;
      this.message = data.ResultObject.PersonalProfile;
      this.PartnerType = data.ResultObject.PartnerType;
      this.roles = this.PartnerType === 1 ? "初级合伙人" : '高级合伙人';
      if (data.ResultObject.Region) {
        this.areaValue = data.ResultObject.Region;
        let areaNames = [];
        areaNames.push(areaList.province_list[data.ResultObject.Region.substr(0, 2) + '0000']) // 获取省的地区编码
        areaNames.push(areaList.city_list[data.ResultObject.Region]); // 获取市的地区编码
        this.value = areaNames.join('/');
      }
      if (data.ResultObject.SuperiorID) {
        this.superior = data.ResultObject.SuperiorName;
        this.isShowSuperior = false;
      } else {
        this.isShowSuperior = true;
      }
    },

    // 提交表单
    submit(result) {
      let obj = {
        Region: this.areaCode,
        PartnerName: this.partnerName,
        IDCard: this.idCard,
        PartnerType: this.PartnerType, // 1是低级合伙人，高级合伙人
        SuperiorPartnerID: this.partnerInfo.SuperiorID || this.partnerSuperiorId,
        PersonalProfile: this.message
      }
      console.log("this.partnerSuperiorId: ", this.partnerSuperiorId);
      if (!this.partnerInfo.SuperiorID) {
        obj.SuperiorPartnerID = this.partnerSuperiorId;
      }
      console.log("obj params: ", obj);
      registerPartner(obj).then(res => {
        console.log(res)
        if (res.data.IsSuccess) {
          this.$toast('提交成功')
          this.$router.push({
            name: 'PartnerToBeCertified'
          })
        } else {
          this.$toast('提交失败')
        }
      })
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    // 选择区域的确认回调
    onConfirm(values) {
      this.value = values.map((item) => item.name).join('/');
      this.areaCode = values[1].code;
      console.log(values);
      this.showArea = false;
    },
    // 区域切换的回调
    onChange(picker, values, index) {
      getAdvancedPartnerByAreaCode({
        areaCode: values[1].code
      })
        .then(res => {
          console.log("res: ", res)
          let columns = res.data.ResultObject.map(item => item.PartnerName)
          this.tempList = res.data.ResultObject;
          (res.data.ResultObject.length !== 0) && (this.columns = columns);
        })
    },
    // 选择上级合伙人确认的回调
    onConfirm2(value, index) {
      this.superior = value;
      this.showSuperior = false;
      this.partnerSuperiorId = this.tempList[index].ID;
      this.areaCode = this.tempList[index].Region;
    },
    // 选择上级合伙人切换的回调
    onChange2(picker, value, index) {

    },
    // 选择上级合伙人取消的回调
    onCancel2() {
      this.showSuperior = false;
    },
  },
  mounted() {
    this.getPartnerInfoFunc()
  }
};
</script>

<style lang="less">
.arrow-icon {
  font-size: 0.3rem;
  margin-right: 0.2rem;
}

.picker-wrap {
  display: flex;
  align-items: center;
}

.van-button {
  background-color: #478bfb;
  border: 1px solid #478bfb;
  border-radius: 0.1rem;
}

.van-field__label {
  font-size: 0.32rem;
  text-align: left;
}
</style>