<template>
  <div class="person-add">
    <el-form
      ref="ruleFormRef"
      :model="ruleFormPer"
      :rules="rulesPer"
      label-position="left"
      label-width="150px"
      class="rule-form-orange company-form"
    >
      <el-form-item label="姓名" style="width: 100%" prop="name">
        <el-input
          v-model.trim="ruleFormPer.name"
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item label="证件类型" style="width: 100%" prop="documentType">
        <el-select
          v-model="ruleFormPer.documentType"
          style="width: 100%"
          clearable
          placeholder="请选择证件类型"
        >
          <el-option
            label="身份证"
            value="1"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" style="width: 100%" prop="cardNo">
        <el-input
          v-model.trim="ruleFormPer.cardNo"
          placeholder="请输入证件号码"
        />
      </el-form-item>
      <el-form-item label="手机号" style="width: 100%" prop="phone">
        <el-input
          v-model.trim="ruleFormPer.phone"
          placeholder="请输入手机号"
        />
      </el-form-item>
      <el-form-item label="证照正面" prop="cardPhoto" style="width: 100%">
        <cy-upload
          ref="cardPhoto"
          :upload-params="{
            fileType: 'creditCardPhoto'
          }"
          :file-data="ruleFormPer.cardPhoto"
          :upload-from-orange-status="true"
          placeholder="请上传证照正面"
        />
      </el-form-item>
      <el-form-item label="证照反面" prop="cardRevPhoto" style="width: 100%">
        <cy-upload
          ref="cardRevPhoto"
          :upload-params="{
            fileType: 'creditCardRevPhoto'
          }"
          :file-data="ruleFormPer.cardRevPhoto"
          :upload-from-orange-status="true"
          placeholder="请上传证照反面"
        />
      </el-form-item>
      <el-form-item label="征信查询日期" prop="searchDate" style="width: 100%;">
        <el-date-picker v-model="ruleFormPer.searchDate" value-format="yyyy-MM-dd" type="date" placeholder="选择征信查询日期" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="征信报告" prop="creditReport" style="width: 100%">
        <cy-upload
          ref="creditReport"
          :upload-params="{
            fileType: 'creditReport'
          }"
          :file-data="ruleFormPer.creditReport"
          :upload-from-orange-status="true"
          placeholder="请上传征信报告"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleFormPer: {
        id: '',
        name: '',
        documentType: '1',
        cardNo: '',
        phone: '',
        searchDate: '',
        cardPhoto: [],
        cardRevPhoto: [],
        creditReport: []
      },
      rulesPer: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        documentType: [
          { required: true, message: '请选择证件类型', trigger: 'change' }
        ],
        cardNo: [
          { required: true, message: '请输入证件号码', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleFormRef.validate(valid => {
          if (valid) {
            const cardPhoto = this.$refs.cardPhoto.getFileLists
            const cardRevPhoto = this.$refs.cardRevPhoto.getFileLists
            const creditFile = this.$refs.creditReport.getFileLists

            const postData = {
              Loading: true,
              type: 0,
              name: this.ruleFormPer.name,
              cardNo: this.ruleFormPer.cardNo,
              documentType: this.ruleFormPer.documentType,
              searchDate: this.ruleFormPer.searchDate !== '' ? this.ruleFormPer.searchDate + ' 00:00:00' : '',
              phone: this.ruleFormPer.phone,
              cardPhoto: cardPhoto.length ? cardPhoto.map(item => item.id)[0] : '',
              cardRevPhoto: cardRevPhoto.length ? cardRevPhoto.map(item => item.id)[0] : '',
              creditAddress: creditFile ? creditFile.map(item => item.id)[0] : ''
            }
            return resolve(postData)
          } else {
            reject()
            return false
          }
        })
      })
    }

  }
}
</script>

  <style lang="scss" scoped>
  .person-add {
    .company-form {
    max-height: 55vh;
    overflow: auto;
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  }
  </style>
