<template>
  <el-form ref="personInfoForm" :model="personInfo" :rules="personRules" size="medium" label-width="150px" style="margin-top: 20px">
    <el-row>
      <el-col :span="6">
        <el-form-item label="法人代表姓名" prop="legalPersonName">
          <el-input v-model="personInfo.legalPersonName" placeholder="请输入法人代表姓名" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="法人代表手机号" prop="legalPersonPhone">
          <el-input v-model="personInfo.legalPersonPhone" placeholder="请输入法人代表手机号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="法人代表证件类型" prop="legalPersonCertificateType">
          <el-select v-model="personInfo.legalPersonCertificateType" placeholder="请选择法人代表证件类型" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in certificateTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="法人代表证件号" prop="legalPersonCertificateCode">
          <el-input v-model="personInfo.legalPersonCertificateCode" placeholder="请输入法人代表证件号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="法人代表证件" prop="legalPersonCertificateFrontScan">
            <el-upload
              ref="legalPersonCertificateFrontScan"
              action="action"
              :file-list="legalPersonCertificateFrontScanFileList"
              :http-request="uploadLPIDFrontScanFile"
              :on-remove="handleLPIDFrontScanFileRemove"
              :on-exceed="lPIDFrontScanFileExceed"
              :limit="1"
              accept=".jpg,.jpeg,.png"
            >
            <el-button size="small" type="primary" icon="el-icon-upload">
              证件照正面
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label-width="0" prop="legalPersonCertificateBackScan">
          <el-upload
            ref="legalPersonCertificateBackScan"
            action="action"
            :file-list="legalPersonCertificateBackScanFileList"
            :http-request="uploadLPIDBackScanFile"
            :on-remove="handleLPIDBackScanFileRemove"
            :on-exceed="lPIDBackScanFileExceed"
            :limit="1"
            accept=".jpg,.jpeg,.png"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              证件照背面
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">
        <el-form-item label="业务负责人姓名" prop="businessLeaderName">
          <el-input v-model="personInfo.businessLeaderName" placeholder="请输入业务负责人姓名" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="业务负责人手机号" prop="businessLeaderPhone">
          <el-input v-model="personInfo.businessLeaderPhone" placeholder="请输入业务负责人手机号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="业务负责人证件类型" prop="businessLeaderCertificateType">
          <el-select v-model="personInfo.businessLeaderCertificateType" placeholder="请选择业务负责人证件类型" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in certificateTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="业务负责人证件号" prop="businessLeaderCertificateCode">
          <el-input v-model="personInfo.businessLeaderCertificateCode" placeholder="请输入业务负责人证件号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="业务负责人证件" prop="businessLeaderCertificateFrontScan">
          <el-upload
            ref="businessLeaderCertificateFrontScan"
            action="action"
            :file-list="businessLeaderCertificateFrontScanFileList"
            :http-request="uploadBLIDFrontScanFile"
            :on-remove="handleBLIDFrontScanFileRemove"
            :on-exceed="bLIDFrontScanFileExceed"
            :limit="1"
            accept=".jpg,.jpeg,.png"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              证件照正面
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label-width="0" prop="businessLeaderCertificateBackScan">
          <el-upload
            ref="businessLeaderCertificateBackScan"
            action="action"
            :file-list="businessLeaderCertificateBackScanFileList"
            :http-request="uploadBLIDBackScanFile"
            :on-remove="handleBLIDBackScanFileRemove"
            :on-exceed="bLIDBackScanFileExceed"
            :limit="1"
            accept=".jpg,.jpeg,.png"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              证件照背面
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">
        <el-form-item label="备用联系人姓名" prop="backupPersonName">
          <el-input v-model="personInfo.backupPersonName" placeholder="请输入姓名" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label=" 备用联系人手机号" prop="backupPersonPhone">
          <el-input v-model="personInfo.backupPersonPhone" placeholder="请输入手机号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="备用联系人证件类型" prop="backupPersonCertificateType">
          <el-select v-model="personInfo.backupPersonCertificateType" placeholder="请选择证件类型" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in certificateTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="备用联系人证件号" prop="backupPersonCertificateCode">
          <el-input v-model="personInfo.backupPersonCertificateCode" placeholder="请输入证件号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="技术负责人姓名" prop="technicalLeaderName">
          <el-input v-model="personInfo.technicalLeaderName" placeholder="请输入姓名" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label=" 技术负责人手机号" prop="technicalLeaderPhone">
          <el-input v-model="personInfo.technicalLeaderPhone" placeholder="请输入手机号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="技术负责人证件类型" prop="technicalLeaderCertificateType">
          <el-select v-model="personInfo.technicalLeaderCertificateType" placeholder="请选择证件类型" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in certificateTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="技术负责人证件号" prop="technicalLeaderCertificateCode">
          <el-input v-model="personInfo.technicalLeaderCertificateCode" placeholder="请输入证件号" clearable :style="{ width: '100%' }"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="售后负责人姓名" prop="saleLeaderName">
          <el-input v-model="personInfo.saleLeaderName" placeholder="请输入姓名" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="售后负责人手机号" prop="saleLeaderPhone">
          <el-input v-model="personInfo.saleLeaderPhone" placeholder="请输入手机号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="售后负责人证件类型" prop="saleLeaderCertificateType">
          <el-select v-model="personInfo.saleLeaderCertificateType" placeholder="请选择证件类型" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in certificateTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="售后负责人证件号" prop="saleLeaderCertificateCode">
          <el-input v-model="personInfo.saleLeaderCertificateCode" placeholder="请输入证件号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <el-form-item label="财务负责人姓名" prop="financeLeaderName">
          <el-input v-model="personInfo.financeLeaderName" placeholder="请输入姓名" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="财务负责人手机号" prop="financeLeaderPhone">
          <el-input v-model="personInfo.financeLeaderPhone" placeholder="请输入手机号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="财务负责人证件类型" prop="financeLeaderCertificateType">
          <el-select v-model="personInfo.financeLeaderCertificateType" placeholder="请选择证件类型" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in certificateTypeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="财务负责人证件号" prop="financeLeaderCertificateCode">
          <el-input v-model="personInfo.financeLeaderCertificateCode" placeholder="请输入证件号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDictByCode } from '@/api/system/dict'
import { Uploadimg } from '@/api/common'
import { validatePhone } from '@/utils/validate'
export default {
  name: 'PersonInfo',
  mounted() {
    this.getPersonCertificateTypeDict()
  },
  data() {
    const phoneValidator = (rule, value, callback) => {
      if (value !== undefined && value !== '' && validatePhone(value) === false) {
        callback(new Error('手机号格式不正确'))
      } else {
        callback()
      }
    }
    return {
      personInfo: {
        legalPersonName: '',
        legalPersonPhone: '',
        legalPersonCertificateCode: '',
        legalPersonCertificateType: '',
        legalPersonCertificateFrontScan: '',
        legalPersonCertificateBackScan: '',
        businessLeaderName: '',
        businessLeaderCertificateType: '',
        businessLeaderCertificateCode: '',
        businessLeaderPhone: '',
        businessLeaderCertificateFrontScan: '',
        businessLeaderCertificateBackScan: '',
        backupPersonName: '',
        backupPersonPhone: '',
        backupPersonCertificateType: '',
        backupPersonCertificateCode: '',
        technicalLeaderName: '',
        technicalLeaderPhone: '',
        technicalLeaderCertificateType: '',
        technicalLeaderCertificateCode: '',
        saleLeaderName: '',
        saleLeaderPhone: '',
        saleLeaderCertificateType: '',
        saleLeaderCertificateCode: '',
        financeLeaderName: '',
        financeLeaderPhone: '',
        financeLeaderCertificateType: '',
        financeLeaderCertificateCode: ''
      },
      certificateTypeOptions: [],
      legalPersonCertificateFrontScanFileList: [],
      legalPersonCertificateBackScanFileList: [],
      businessLeaderCertificateFrontScanFileList: [],
      businessLeaderCertificateBackScanFileList: [],
      personRules: {
        legalPersonName: [{ required: true, message: '请输入法人代表姓名', trigger: 'blur' }],
        legalPersonPhone: [{ required: true, message: '请输入法人代表手机号', trigger: 'blur' }, { validator: phoneValidator, trigger: 'blur' }],
        legalPersonCertificateType: [{ required: true, message: '请选择法人代表证件类型', trigger: 'change' }],
        legalPersonCertificateCode: [{ required: true, message: '请输入法人代表证件号', trigger: 'blur' }],
        legalPersonCertificateFrontScan: [{ required: true, message: '请上传法人代表证件照正面', trigger: 'blur' }],
        legalPersonCertificateBackScan: [{ required: true, message: '请上传法人代表证件照背面', trigger: 'blur' }],
        businessLeaderName: [{ required: true, message: '请输入业务负责人姓名', trigger: 'blur' }],
        businessLeaderPhone: [{ required: true, message: '请输入业务负责人手机号', trigger: 'blur' }, { validator: phoneValidator, trigger: 'blur' }],
        businessLeaderCertificateType: [{ required: true, message: '请选择业务负责人证件类型', trigger: 'change' }],
        businessLeaderCertificateCode: [{ required: true, message: '请输入业务负责人证件号', trigger: 'blur' }],
        businessLeaderCertificateFrontScan: [{ required: true, message: '请上传业务负责人证件照正面', trigger: 'blur' }],
        businessLeaderCertificateBackScan: [{ required: true, message: '请上传业务负责人证件照背面', trigger: 'blur' }],
        backupPersonPhone: [{ validator: phoneValidator, trigger: 'blur' }],
        technicalLeaderPhone: [{ validator: phoneValidator, trigger: 'blur' }],
        saleLeaderPhone: [{ validator: phoneValidator, trigger: 'blur' }],
        financeLeaderPhone: [{ validator: phoneValidator, trigger: 'blur' }]
      },
      personInfoValid: false
    }
  },
  methods: {
    getPersonCertificateTypeDict() {
      getDictByCode('legalPersonCertificateType').then(response => {
        if (response.code === 200) {
          this.certificateTypeOptions = response.data
        }
      })
    },
    validateForm: function() {
      this.$refs.personInfoForm.validate(valid => {
        this.personInfoValid = valid
      })
    },
    clearForm() {
      this.personInfo = {
        legalPersonName: '',
        legalPersonPhone: '',
        legalPersonCertificateCode: '',
        legalPersonCertificateType: '',
        legalPersonCertificateFrontScan: '',
        legalPersonCertificateBackScan: '',
        businessLeaderName: '',
        businessLeaderCertificateType: '',
        businessLeaderCertificateCode: '',
        businessLeaderPhone: '',
        businessLeaderCertificateFrontScan: '',
        businessLeaderCertificateBackScan: '',
        backupPersonName: '',
        backupPersonPhone: '',
        backupPersonCertificateType: '',
        backupPersonCertificateCode: '',
        technicalLeaderName: '',
        technicalLeaderPhone: '',
        technicalLeaderCertificateType: '',
        technicalLeaderCertificateCode: '',
        saleLeaderName: '',
        saleLeaderPhone: '',
        saleLeaderCertificateType: '',
        saleLeaderCertificateCode: '',
        financeLeaderName: '',
        financeLeaderPhone: '',
        financeLeaderCertificateType: '',
        financeLeaderCertificateCode: ''
      }
      this.legalPersonCertificateFrontScanFileList = []
      this.legalPersonCertificateBackScanFileList = []
      this.businessLeaderCertificateFrontScanFileList = []
      this.businessLeaderCertificateBackScanFileList = []
      // 清除验证
      this.$nextTick(() => {
        this.$refs.personInfoForm.clearValidate()
      })
    },
    // 文件上传
    uploadLPIDFrontScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.legalPersonCertificateFrontScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.legalPersonCertificateFrontScanFileList = [] // 只保留一张图片或一个文件
          this.legalPersonCertificateFrontScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.personInfo.legalPersonCertificateFrontScan = res.data.fileId
          this.$refs.personInfoForm.validateField('legalPersonCertificateFrontScan')
          this.$message.success('文件上传成功')
        }
      })
    },
    uploadLPIDBackScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.legalPersonCertificateBackScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.legalPersonCertificateBackScanFileList = [] // 只保留一张图片或一个文件
          this.legalPersonCertificateBackScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.personInfo.legalPersonCertificateBackScan = res.data.fileId
          this.$refs.personInfoForm.validateField('legalPersonCertificateBackScan')
          this.$message.success('文件上传成功')
        }
      })
    },
    uploadBLIDFrontScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.businessLeaderCertificateFrontScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.businessLeaderCertificateFrontScanFileList = [] // 只保留一张图片或一个文件
          this.businessLeaderCertificateFrontScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.personInfo.businessLeaderCertificateFrontScan = res.data.fileId
          this.$refs.personInfoForm.validateField('businessLeaderCertificateFrontScan')
          this.$message.success('文件上传成功')
        }
      })
    },
    uploadBLIDBackScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.businessLeaderCertificateBackScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.businessLeaderCertificateBackScanFileList = [] // 只保留一张图片或一个文件
          this.businessLeaderCertificateBackScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.personInfo.businessLeaderCertificateBackScan = res.data.fileId
          this.$refs.personInfoForm.validateField('businessLeaderCertificateBackScan')
          this.$message.success('文件上传成功')
        }
      })
    },
    handleLPIDFrontScanFileRemove(file) {
      this.personInfo.legalPersonCertificateFrontScan = ''
      this.handleRemove(file, this.legalPersonCertificateFrontScanFileList)
      this.$refs.personInfoForm.validateField('legalPersonCertificateFrontScan')
    },
    handleLPIDBackScanFileRemove(file) {
      this.personInfo.legalPersonCertificateBackScan = ''
      this.handleRemove(file, this.legalPersonCertificateBackScanFileList)
      this.$refs.personInfoForm.validateField('legalPersonCertificateBackScan')
    },
    handleBLIDFrontScanFileRemove(file) {
      this.personInfo.businessLeaderCertificateFrontScan = ''
      this.handleRemove(file, this.businessLeaderCertificateFrontScanFileList)
      this.$refs.personInfoForm.validateField('businessLeaderCertificateFrontScan')
    },
    handleBLIDBackScanFileRemove(file) {
      this.personInfo.businessLeaderCertificateBackScan = ''
      this.handleRemove(file, this.businessLeaderCertificateBackScanFileList)
      this.$refs.personInfoForm.validateField('businessLeaderCertificateBackScan')
    },
    lPIDFrontScanFileExceed(file, fileList) {
      this.handleExceed(file, this.legalPersonCertificateFrontScanFileList)
    },
    lPIDBackScanFileExceed(file, fileList) {
      this.handleExceed(file, this.legalPersonCertificateBackScanFileList)
    },
    bLIDFrontScanFileExceed(file, fileList) {
      this.handleExceed(file, this.businessLeaderCertificateFrontScanFileList)
    },
    bLIDBackScanFileExceed(file, fileList) {
      this.handleExceed(file, this.businessLeaderCertificateBackScanFileList)
    },
    // 上传前判断文件格式及大小
    handleBeforeUpload(file, fileList) {
      let res = true
      // 判断文件格式
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
      if (!isJPG) {
        this.$message.error('上传文件只能是 图片 格式!')
        res = false
      }

      // 判断文件大小
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传文件大小不能超过 5MB!')
        res = false
      }

      // 判断文件是否已经上传过
      for (const i in fileList) {
        if (fileList[i].name === file.name) {
          this.$message.error('该文件已上传过，请选择其他图片')
          res = false
        }
      }

      return res
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      for (const i in fileList) {
        if (fileList[i].name === file.name) {
          fileList.splice(i, 1)
          return
        }
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning('最多上传一个文件，请先删除再重新上传')
    }
  }
}
</script>

<style scoped>

</style>