<template>
  <el-form ref="certInfoForm" :model="certInfo" :rules="certRules" size="medium" label-width="150px">
    <el-row style="margin-top: 20px">
      <el-col :span="8">
        <el-form-item label="是否三证合一" prop="threeCertificatesInOne">
          <el-select v-model="threeInOne" placeholder="请选择是否三证合一" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in yesOrNoOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" v-show="certInfo.threeCertificatesInOne == '1'">
        <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
          <el-input v-model="certInfo.unifiedSocialCreditCode" placeholder="请输入统一社会信用代码" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="营业执照注册号" prop="licenseRegisterNumber">
          <el-input v-model="certInfo.licenseRegisterNumber" placeholder="请输入营业执照注册号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="注册资金" prop="registerCapital">
          <el-input v-model="certInfo.registerCapital" placeholder="请输入注册资金（万元）" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="注册地址" prop="registerAddress">
          <el-input v-model="certInfo.registerAddress" placeholder="请输入注册地址" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="法人代表" prop="legalPerson">
          <el-input v-model="certInfo.legalPerson" placeholder="请输入法人代表" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="成立日期" prop="establishDate">
          <el-date-picker v-model="certInfo.establishDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :style="{ width: '100%' }" placeholder="请选择成立日期" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="营业期限" prop="businessTerm">
          <el-input v-model="certInfo.businessTerm" placeholder="请输入营业期限" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="经营范围" prop="businessScope">
          <el-input v-model="certInfo.businessScope" placeholder="请输入经营范围" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="执照扫描件" prop="licenseScan">
          <el-upload
            ref="licenseScan"
            action="action"
            :file-list="licenseScanFileList"
            :http-request="uploadLicenseScanFile"
            :on-remove="handleLicenseScanFileRemove"
            :on-exceed="licenseScanFileExceed"
            :limit="1"
            accept=".jpg,.jpeg,.png,.pdf"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              营业执照扫描件.pdf
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="组织机构代码" prop="organizeCode">
          <el-input v-model="certInfo.organizeCode" placeholder="请输入组织机构代码" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="组织代码扫描件" prop="organizeCodeScan" required>
          <el-upload
            ref="organizeScan"
            action="action"
            :file-list="organizeScanFileList"
            :http-request="uploadOrganizeScanFile"
            :on-remove="handleOrganizeScanFileRemove"
            :on-exceed="organizeScanFileExceed"
            :limit="1"
            accept=".jpg,.jpeg,.png,.pdf"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              组织机构代码证扫描件.pdf
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <el-form-item label="纳税人性质" prop="taxpayerNature">
          <el-select v-model="certInfo.taxpayerNature" placeholder="请选择纳税人性质" clearable :style="{ width: '100%' }">
            <el-option
              v-for="item in taxpayerNatureOptions"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="税务登记证号" prop="taxRegisterCode">
          <el-input v-model="certInfo.taxRegisterCode" placeholder="请输入税务登记证号" clearable :style="{ width: '100%' }" />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="税务登记扫描件" prop="taxRegisterCodeScan">
          <el-upload
            ref="taxRegisterScan"
            action="action"
            :file-list="taxRegisterScanFileList"
            :http-request="uploadTaxRegisterScanFile"
            :on-remove="handleTaxRegisterScanFileRemove"
            :on-exceed="taxRegisterScanFileExceed"
            :limit="1"
            accept=".jpg,.jpeg,.png,.pdf"
          >
            <el-button size="small" type="primary" icon="el-icon-upload">
              税务登记证扫描件.pdf
            </el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getDictByCode } from '@/api/system/dict'
import { Uploadimg } from '@/api/common'
export default {
  name: 'CertInfo',
  mounted() {
    this.getYesOrNoDict()
    this.getTaxNatureDict()
  },
  watch: {
    threeInOne: function(val, oldval) {
      if (val === '1') {
        this.certInfo.threeCertificatesInOne = 1
        // 三证合一则自动填充其他字段
        this.certInfo.unifiedSocialCreditCode = ''
      } else {
        this.certInfo.threeCertificatesInOne = 0
        // 如果选择不是三证合一则 赋值统一社会信用代码为'0' 将其他三证清空
        this.certInfo.unifiedSocialCreditCode = '0'
      }

      this.certInfo.licenseRegisterNumber = ''
      this.certInfo.organizeCode = ''
      this.certInfo.taxRegisterCode = ''
    },
    'certInfo.unifiedSocialCreditCode': function(val, oldval) {
      if (this.threeInOne === '1') {
        this.certInfo.licenseRegisterNumber = this.certInfo.unifiedSocialCreditCode
        this.certInfo.taxRegisterCode = this.certInfo.unifiedSocialCreditCode
        if (this.certInfo.unifiedSocialCreditCode.length >= 17) {
          this.certInfo.organizeCode = this.certInfo.unifiedSocialCreditCode.substring(8, 17)
        }
      }
    }
  },
  data() {
    const uscCodeValidator = (rule, value, callback) => {
      const reg = /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/
      if (value.length > 0 && reg.test(value) === false) {
        callback(new Error('格式不正确，请核对后重新输入'))
      } else {
        callback()
      }
    }
    const regCapValidator = (rule, value, callback) => {
      const reg = /^\d+(\.\d+)?$/
      if (value.length > 0 && reg.test(value) === false) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }
    const orgCodeValidator = (rule, value, callback) => {
      const reg = /^[0-9A-HJ-NPQRTUWXY]{9}$/
      if (value.length > 0 && reg.test(value) === false) {
        callback(new Error('格式不正确，请核对后重新输入'))
      } else {
        callback()
      }
    }
    return {
      certInfo: {
        threeCertificatesInOne: 1,
        unifiedSocialCreditCode: undefined,
        licenseRegisterNumber: undefined,
        registerCapital: undefined,
        registerAddress: undefined,
        legalPerson: undefined,
        establishDate: null,
        businessTerm: undefined,
        businessScope: undefined,
        licenseScan: null,
        organizeCode: undefined,
        organizeCodeScan: null,
        taxpayerNature: undefined,
        taxRegisterCode: '',
        taxRegisterCodeScan: null
      },
      threeInOne: '1',
      yesOrNoOptions: [],
      taxpayerNatureOptions: [],
      licenseScanFileList: [],
      organizeScanFileList: [],
      taxRegisterScanFileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      certRules: {
        threeCertificatesInOne: [{ required: true, message: '请选择是否三证合一', trigger: 'change' }],
        unifiedSocialCreditCode: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }, { validator: uscCodeValidator, trigger: 'blur' }],
        licenseRegisterNumber: [{ required: true, message: '请输入营业执照注册号', trigger: 'blur' }, { validator: uscCodeValidator, trigger: 'blur' }],
        taxRegisterCode: [{ required: true, message: '请输入税务登记证号', trigger: 'blur' }, { validator: uscCodeValidator, trigger: 'blur' }],
        organizeCode: [{ required: true, message: '请输入组织机构代码', trigger: 'blur' }, { validator: orgCodeValidator, trigger: 'blur' }],
        registerCapital: [{ required: true, message: '请输入注册资金', trigger: 'change' }, { validator: regCapValidator, trigger: 'blur' }],
        registerAddress: [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
        legalPerson: [{ required: true, message: '请输入法人代表', trigger: 'blur' }],
        establishDate: [{ required: true, message: '请选择成立日期', trigger: 'blur' }],
        businessTerm: [{ required: true, message: '请输入营业期限', trigger: 'blur' }],
        businessScope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
        taxpayerNature: [{ required: true, message: '请选择纳税人性质', trigger: 'change' }],
        licenseScan: [{ required: true, message: '请上传营业执照扫描件', trigger: 'change' }],
        organizeCodeScan: [{ required: true, message: '请上传组织机构代码证扫描件', trigger: 'change' }],
        taxRegisterCodeScan: [{ required: true, message: '请上传税务登记证扫描件', trigger: 'change' }]
      },
      certInfoValid: false
    }
  },
  methods: {
    getYesOrNoDict: function() {
      getDictByCode('sysYesOrNo').then(response => {
        if (response.code === 200) {
          this.yesOrNoOptions = response.data
        }
      })
    },
    getTaxNatureDict: function() {
      getDictByCode('taxpayerNature').then(response => {
        if (response.code === 200) {
          this.taxpayerNatureOptions = response.data
        }
      })
    },
    validateForm: function() {
      this.$refs.certInfoForm.validate(valid => {
        this.certInfoValid = valid
      })
    },
    // 文件上传
    uploadLicenseScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.licenseScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.licenseScanFileList = [] // 只保留一张图片或一个文件
          this.licenseScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.certInfo.licenseScan = res.data.fileId
          this.$message.success('文件上传成功')
        }
      })
    },
    uploadOrganizeScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.organizeScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.organizeScanFileList = [] // 只保留一张图片或一个文件
          this.organizeScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.certInfo.organizeCodeScan = res.data.fileId
          this.$message.success('文件上传成功')
        }
      })
    },
    uploadTaxRegisterScanFile(file) {
      const upload = this.handleBeforeUpload(file.file, this.taxRegisterScanFileList)
      if (upload === false) {
        return
      }
      const base_url = this.baseConfig.baseUrl + '/static/'
      Uploadimg(file).then(res => {
        if (res.code === 200) {
          this.taxRegisterScanFileList = [] // 只保留一张图片或一个文件
          this.taxRegisterScanFileList.push({ name: res.data.fileName, url: base_url + res.data.fileId })
          this.certInfo.taxRegisterCodeScan = res.data.fileId
          this.$message.success('文件上传成功')
        }
      })
    },
    handleLicenseScanFileRemove(file) {
      this.certInfo.licenseScan = ''
      this.handleRemove(file, this.licenseScanFileList)
    },
    handleOrganizeScanFileRemove(file) {
      this.certInfo.organizeCodeScan = ''
      this.handleRemove(file, this.organizeScanFileList)
    },
    handleTaxRegisterScanFileRemove(file) {
      this.certInfo.taxRegisterCodeScan = ''
      this.handleRemove(file, this.taxRegisterScanFileList)
    },
    licenseScanFileExceed(file, fileList) {
      this.handleExceed(file, this.licenseScanFileList)
    },
    organizeScanFileExceed(file, fileList) {
      this.handleExceed(file, this.organizeScanFileList)
    },
    taxRegisterScanFileExceed(file, fileList) {
      this.handleExceed(file, this.taxRegisterScanFileList)
    },
    // 上传前判断文件格式及大小
    handleBeforeUpload(file, fileList) {
      let res = true
      // 判断文件格式
      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png')
      const isPDF = file.type === 'application/pdf'
      if (!isJPG && !isPDF) {
        this.$message.error('上传文件只能是 图片 或 PDF 格式!')
        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>