<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="160px">
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form-item ref="linkname" label="姓名" prop="linker.linkname">
          <el-input
            v-model="formData.linker.linkname"
            :disabled="naturalPersonIsDisabled"
            placeholder="请输入姓名"
          />
        </el-form-item>
        <el-form-item ref="linkerID" label="身份证" prop="linker.linkerID">
          <el-input
            v-model="formData.linker.linkerID"
            :disabled="naturalPersonIsDisabled"
            placeholder="请输入身份证号"
          />
        </el-form-item>
        <el-form-item ref="address" label="联系地址" prop="linker.address">
          <el-input
            v-model="formData.linker.address"
            :disabled="naturalPersonIsDisabled"
            placeholder="请输入联系地址"
          />
        </el-form-item>
        <el-form-item ref="linkPostCode" label="邮政编码" prop="linker.linkPostCode">
          <el-input
            v-model="formData.linker.linkPostCode"
            :disabled="naturalPersonIsDisabled"
            placeholder="请输入邮政编码"
          />
        </el-form-item>
        <el-form-item ref="bankaccount" label="基本账户账号" prop="finance.bankaccount">
          <el-input
            v-model="formData.finance.bankaccount"
            :disabled="naturalPersonIsDisabled"
            placeholder="请输入基本账户账号"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="交易主体类型">
          <span>投标人</span>
        </el-form-item>
        <el-form-item ref="linktel" label="联系电话" prop="linker.linktel">
          <el-input
            v-model="formData.linker.linktel"
            :disabled="naturalPersonIsDisabled"
            placeholder="请输入联系电话"
          />
        </el-form-item>
        <el-form-item ref="email" label="电子邮箱" prop="linker.email">
          <el-input
            v-model="formData.linker.email"
            :disabled="naturalPersonIsDisabled"
            placeholder="请输入电子邮箱"
          />
        </el-form-item>
        <el-form-item label="开户银行" red="bankname" prop="finance.bankname">
          <el-input
            v-model="formData.finance.bankname"
            :disabled="naturalPersonIsDisabled"
            placeholder="请输入开户银行"
          />
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="身份证扫描件" prop="corporateAttr">
          <upload
            ref="upload"
            :title="``"
            :data="idUpLoadIdData"
            :auto-upload="true"
            :limit="2"
            :action="idImportFileUrl"
            :auto-delete="true"
            file-ref="fileRefOne"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { upLoadFileUrl } from '@/api/common/uploadCenter'
import upload from '@comp/common/updownload/upload'
import { characters1_50, checkLinktel, makeSureId, checkCode, phone, email, checkNum } from '@/assets/js/validate'
export default {
  name: 'NaturalPerson',
  components: {
    upload // 上传组件
  },
  // 接收步骤条父页面信息
  props: {
    formData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    idUpLoadIdData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      idImportFileUrl: upLoadFileUrl,
      naturalPersonIsDisabled: false, // 查看的时候控制自然人是否可以点击
      rules: {
        'linker.linkname': [{ required: true, validator: characters1_50, trigger: 'blur' }],
        'linker.linkerID': [
          { required: true, validator: characters1_50, trigger: 'blur' },
          { validator: makeSureId, trigger: 'blur' }],
        'linker.linkPostCode': [
          { required: true, validator: characters1_50, trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ],
        'linker.linktel': [
          { required: true, validator: checkLinktel, trigger: 'blur' },
          { validator: phone, trigger: 'blur' }

        ],
        'linker.address': [{ required: true, validator: characters1_50, trigger: 'change' }],
        'finance.bankaccount': [
          { required: true, validator: characters1_50, trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }
        ],
        'finance.bankname': [{ required: true, validator: characters1_50, trigger: 'blur' }],
        'linker.email': [
          { required: true, validator: characters1_50, trigger: 'blur' },
          { validator: email, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交校验
    vaildate() {
      return this.$refs['ruleForm'].validate()
    }
  }
}
</script>

<style scoped>

</style>
