<template>
  <div class="person-info">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入姓名"
          :disabled="personType === 'legal' || source === 'business'"
        />
      </el-form-item>
      <el-form-item label="身份证号码" prop="personalCertNo">
        <cy-card-input v-model="ruleForm.personalCertNo" :disabled="disabled" placeholder="请输入身份证号码" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model="ruleForm.mobile"
          placeholder="请输入手机号"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="身份证正面" prop="idCardFront" class="required-item">
        <span slot="label" class="required-label">身份证正面</span>
        <cy-upload
          ref="idCardFrontIds"
          :upload-params="{
            fileType: 'idCardFront'
          }"
          :file-data="ruleForm.idCardFront"
          :upload-from-orange-status="true"
          :placeholder="`请上传身份证正面照片`"
          :limit="1"
          :file-size="20"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item label="身份证反面" prop="idCardBack" class="required-item">
        <span slot="label" class="required-label">身份证反面</span>
        <cy-upload
          ref="idCardBackIds"
          :upload-params="{
            fileType: 'idCardBack'
          }"
          :file-data="ruleForm.idCardBack"
          :upload-from-orange-status="true"
          :placeholder="`请上传身份证反面照片`"
          :limit="1"
          :file-size="20"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item
        v-if="personType === 'legal'"
        label="法定代表人是否实际控制人"
        prop="legalIsControl"
        :rules="[{required: true, message: '请选择法定代表人是否实际控制人', trigger: 'change'}]"
      >
        <el-select
          v-model="ruleForm.legalIsControl"
          placeholder="请选择法定代表人是否实际控制人"
          :disabled="disabled"
          @change="selectChange"
        >
          <el-option
            v-for="item in constant.sys_yes_no"
            :key="item.dictCode"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { validIdcard, validPhone } from '@/utils/validate'
export default {
  props: {
    personType: {
      type: String,
      default: ''
    },
    detailInfo: {
      type: Object,
      default: () => {}
    },
    source: {
      type: String,
      default: ''
    }
  },
  data() {
    const validPhoneNo = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入'))
      } else if (!validPhone(value)) {
        callback(new Error('手机号格式有误'))
      } else {
        callback()
      }
    }
    const validContactIdcard = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入'))
      } else if (!validIdcard(value)) {
        callback(new Error('身份证号格式有误'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        id: '',
        enterpriseChangeRecordId: '',
        name: '',
        personalCertNo: '',
        mobile: '',
        idCardFront: [],
        idCardBack: [],
        legalIsControl: '',
        disabled: false
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }, { validator: validPhoneNo, trigger: 'blur' }],
        personalCertNo: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }, { validator: validContactIdcard, trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'constant'
    ])
  },
  watch: {
    detailInfo: {
      handler(newV) {
        if (Object.keys(newV).length) {
          const { id, name, personalCertNo, mobile, idCardFront, idCardBack, isControl, enterpriseChangeRecordId } = newV
          this.ruleForm = {
            ...this.ruleForm,
            id,
            name,
            personalCertNo,
            mobile,
            idCardFront: idCardFront ? [idCardFront] : [],
            idCardBack: idCardBack ? [idCardBack] : [],
            legalIsControl: isControl,
            enterpriseChangeRecordId
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.$store.dispatch('getConstant', ['sys_yes_no'])
    this.disabled = this.source === 'business'
  },
  mounted() {
    if (this.personType === 'legal') {
      window.$bus.$on('sendLegalName', (msg) => {
        console.log(msg)
        this.ruleForm.name = msg
      })
    }
  },
  methods: {
    selectChange() {
      this.$emit('legalIsControl', this.ruleForm.legalIsControl)
    },
    validate(submitType) {
      const idCardFrontFile = this.$refs.idCardFrontIds.getFileLists
      const idCardBackFile = this.$refs.idCardBackIds.getFileLists

      var params = {
        id: this.ruleForm.id,
        name: this.ruleForm.name,
        personalCertNo: this.ruleForm.personalCertNo,
        mobile: this.ruleForm.mobile,
        idCardFront: idCardFrontFile.length ? { id: idCardFrontFile.map(item => item.id)[0] } : null,
        idCardBack: idCardBackFile.length ? { id: idCardBackFile.map(item => item.id)[0] } : null
      }
      return new Promise((resolve, reject) => {
        if (submitType === 'submit') {
          this.$refs.ruleFormRef.validate(valid => {
            if (!idCardFrontFile.length) {
              this.$message.warning(`请上传身份证正面照片`)
              return
            }
            if (!idCardBackFile.length) {
              this.$message.warning(`请上传身份证反面照片`)
              return
            }

            if (valid) {
              resolve(params)
            } else {
              reject()
              return false
            }
          })
        } else {
          resolve(params)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .person-info {
    padding: 10px 20px;
  }
</style>
