<template>
  <div class="legalperson-info">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      class="rule-form-orange"
    >
      <!-- <el-form-item label="授权代理人" prop="authorizedAgent">
        <el-radio-group v-model="ruleForm.authorizedAgent" :disabled="disabled">
          <el-radio :label="1">有</el-radio>
          <el-radio :label="0">无</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <!-- v-if="ruleForm.authorizedAgent" -->
      <template>
        <el-form-item label="身份证正面" class="form-required">
          <cy-upload
            ref="idCardFront"
            :upload-params="{
              fileType: 'bocomAuthorizedAgentFront',
            }"
            :file-data="frontFile"
            :disabled="disabled"
            :upload-from-orange-status="true"
            :file-type="'jpeg,jpg,png,bmp,gif'"
            placeholder="请上传身份证正面(格式:jpeg、jpg、png、bmp、gif)"
            :is-call-back="true"
            @call-back="callBack"
          />
        </el-form-item>
        <el-form-item label="身份证反面" class="form-required">
          <cy-upload
            ref="idCardReverse"
            :upload-params="{
              fileType: 'bocomAuthorizedAgentBack',
            }"
            :file-data="backFile"
            :disabled="disabled"
            :upload-from-orange-status="true"
            :file-type="'jpeg,jpg,png,bmp,gif'"
            placeholder="请上传身份证反面(格式:jpeg、jpg、png、bmp、gif)"
            :is-call-back="true"
            @call-back="callBack"
          />
        </el-form-item>
        <el-form-item label="授权代理人姓名" prop="personName">
          <el-input
            v-model="ruleForm.personName"
            placeholder="请输入授权代理人姓名"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="证件种类" prop="idType">
          <el-select
            v-model="ruleForm.idType"
            placeholder="请选择证件种类"
            :disabled="disabled"
          >
            <el-option
              v-for="item in constant.idCard"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="idNumber">
          <el-input
            v-model="ruleForm.idNumber"
            placeholder="请输入证件号码"
            :disabled="disabled"
            @blur="getIdType"
          />
        </el-form-item>
        <el-form-item label="证件有效期" prop="periodValidityDate">
          <el-date-picker
            v-model="ruleForm.periodValidityDate"
            value-format="yyyy-MM-dd"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="国籍" prop="country">
          <el-select v-model="ruleForm.country" placeholder="国籍" disabled>
            <el-option
              v-for="item in constant.registerCountry"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input
            v-model="ruleForm.phoneNumber"
            placeholder="请输入手机号"
            :disabled="disabled"
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import qichachaInfo from '../../mixins/qichachaInfo'
import { validPhone } from '@/utils/validate'

export default {
  mixins: [qichachaInfo],
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入手机号'))
      }
      if (!validPhone(value)) {
        return callback(new Error('请输入有效的手机号'))
      }
      callback()
    }
    return {
      frontFile: [],
      backFile: [],
      ruleForm: {
        authorizedAgent: 1,
        name: '',
        country: 'registerCountry_CHN',
        phoneNumber: '',
        certificateType: '',
        certificateCode: '',
        idType: '',
        idNumber: '',
        periodValidityDate: [],
        periodOfValidityFrom: '',
        periodOfValidity: '',
        personName: ''
      },
      rules: {
        authorizedAgent: [
          { required: true, message: '请选择授权代理人', trigger: 'change' }
        ],
        personName: [
          { required: true, message: '请输入授权代理人姓名', trigger: 'blur' }
        ],
        idType: [
          { required: true, message: '请选择证件种类', trigger: 'change' }
        ],
        idNumber: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ],
        periodValidityDate: [
          { required: true, message: '请选择证件有效期', trigger: 'change' }
        ],
        phoneNumber: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ]
        // country: [{ required: true, message: '请选择国籍', trigger: 'change' }],
      }
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const deepData = JSON.parse(JSON.stringify(newV))
          for (const key in this.ruleForm) {
            this.ruleForm[key] = deepData[key]
          }
          this.frontFile = deepData.frontFile ? [deepData.frontFile] : []
          this.backFile = deepData.backFile ? [deepData.backFile] : []
          this.ruleForm.periodValidityDate = this.ruleForm.periodOfValidityFrom ? [this.ruleForm.periodOfValidityFrom, this.ruleForm.periodOfValidity] : []
          this.ruleForm.personName = deepData.name
          this.ruleForm.idType = deepData.certificateType
          this.ruleForm.idNumber = deepData.certificateCode
          this.ruleForm.country = 'registerCountry_CHN'
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['idCard', 'registerCountry'])
  },
  methods: {
    submitParams(type) {
      let front = null
      let back = null
      let idCardFront = []
      let idCardReverse = []
      // if (this.ruleForm.authorizedAgent) {
      idCardFront = this.$refs.idCardFront.getFileLists
      if (type === 'submit' && !idCardFront.length) {
        this.$message.error('请上传身份证正面照片')
        return false
      }
      idCardReverse = this.$refs.idCardReverse.getFileLists
      if (type === 'submit' && !idCardReverse.length) {
        this.$message.error('请上传身份证反面照片')
        return false
      }
      // }

      front = idCardFront.length ? idCardFront[0].id : ''
      back = idCardReverse.length ? idCardReverse[0].id : ''
      const { periodValidityDate, personName, idType, idNumber } =
        this.ruleForm
      const params = {
        ...this.ruleForm,
        name: personName,
        periodOfValidityFrom:
          periodValidityDate && periodValidityDate.length
            ? periodValidityDate[0]
            : '',
        periodOfValidity:
          periodValidityDate && periodValidityDate.length
            ? periodValidityDate[1]
            : '',
        front,
        back,
        certificateType: idType,
        certificateCode: idNumber
      }
      delete params.personName
      delete params.periodValidityDate
      delete params.idType
      delete params.idNumber
      return params
    },
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            resolve(this.submitParams('submit'))
          } else {
            return false
          }
        })
      })
    },
    // 获取数据
    getParams(type) {
      return new Promise((resolve, reject) => {
        if (type === 'temp') {
          resolve(this.submitParams(type))
        } else {
          this.validateForm().then((data) => {
            resolve(data)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
