<template>
  <div class="add-info">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      class="rule-form-orange"
    >
      <cy-info-title type="center">征信信息</cy-info-title>
      <el-form-item style="width: 100%">
        <template slot="label">
          <span>个人征信</span>
          <span class="slot-name-desc">烦请本人线上查询个人征信，并填写我司邮箱作为央行等银行发送征信报告的指定邮箱operation@changan-inkasso.com</span>
        </template>
        <cy-comm-table
          ref="commTable"
          style="margin-top: 10px; width: 100%"
          :columns="columns"
          :data="tableData"
          :count="0"
        />
      </el-form-item>
      <el-form-item style="width: 100%">
        <template slot="label">
          <span>企业征信查询授权书</span>
          <span class="slot-name-desc">必须已认证已签署才可提交</span>
        </template>
        <cy-comm-table
          name="enterprise"
          style="margin-top: 10px; width: 100%"
          :columns="enterpriseColumns"
          :data="enterpriseTableData"
          :count="0"
        />
      </el-form-item>
      <cy-info-title type="center">企业经营地址</cy-info-title>
      <el-form-item label="经营地址" style="width: 100%;" prop="businessAddress">
        <el-input v-model="ruleForm.businessAddress" placeholder="请输入经营地址" disabled />
      </el-form-item>
      <el-form-item label="地点定位图" class="one-form-item form-required" prop="locationMap">
        <cy-upload
          ref="locationMap"
          :upload-params="{
            fileType: 'enterprise_location_map'
          }"
          :file-data="locationMap"
          :upload-from-orange-status="true"
          placeholder="请上传地点定位图"
          disabled
        />
      </el-form-item>
      <el-form-item label="租房合同" class="one-form-item form-required">
        <cy-upload
          ref="rentalContract"
          :upload-params="{
            fileType: 'enterprise_rental_contract'
          }"
          :file-data="rentalContract"
          :upload-from-orange-status="true"
          placeholder="请上传租房合同"
          disabled
        />
      </el-form-item>
      <el-form-item label="房租缴纳流水" class="one-form-item form-required">
        <cy-upload
          ref="waterElectricityFees"
          :upload-params="{
            fileType: 'enterprise_water_electricity_fees'
          }"
          :file-data="waterElectricityFees"
          :upload-from-orange-status="true"
          placeholder="请上传房租缴纳流水"
          disabled
        />
      </el-form-item>
      <el-form-item label="办公环境图" class="one-form-item form-required">
        <cy-upload
          ref="officeEnvironment"
          :upload-params="{
            fileType: 'enterprise_office_environment'
          }"
          :file-data="officeEnvironment"
          :upload-from-orange-status="true"
          placeholder="请上传办公环境图"
          disabled
        />
      </el-form-item>
      <template v-if="!hasGuaranteeEnterprise">
        <cy-info-title type="center">公司相关信息</cy-info-title>
        <el-form-item label="营业执照" class="one-form-item form-required" prop="businessLicense">
          <cy-upload
            ref="businessLicense"
            :upload-params="{
              fileType: 'enterprise_business_license'
            }"
            :file-data="businessLicense"
            :upload-from-orange-status="true"
            placeholder="请上传营业执照"
            disabled
          />
        </el-form-item>
        <el-form-item label="基本户信息" class="one-form-item form-required" prop="basicAccountInformation">
          <cy-upload
            ref="basicAccountInformation"
            :upload-params="{
              fileType: 'enterprise_basic_account_information'
            }"
            :file-data="basicAccountInformation"
            :upload-from-orange-status="true"
            placeholder="请上传基本户信息"
            disabled
          />
        </el-form-item>
        <el-form-item label="公司章程和修正案 form-required" class="one-form-item" prop="articlesAssociation">
          <cy-upload
            ref="articlesAssociation"
            :upload-params="{
              fileType: 'enterprise_articles_association'
            }"
            :file-data="articlesAssociation"
            :upload-from-orange-status="true"
            placeholder="请上传公司章程和修正案"
            disabled
          />
        </el-form-item>
        <el-form-item label="结案证明或判决书" class="one-form-item" prop="judgment">
          <cy-upload
            ref="judgment"
            :upload-params="{
              fileType: 'enterprise_judgment'
            }"
            :file-data="judgment"
            :upload-from-orange-status="true"
            placeholder="请上传结案证明或判决书"
            disabled
          />
        </el-form-item>
      </template>

    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    addInfo: {
      type: Object,
      default: () => {}
    },
    hasGuaranteeEnterprise: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableKey: 0,
      ruleForm: {
        businessAddress: '',
        id: ''
      },
      locationMap: [],
      rentalContract: [],
      waterElectricityFees: [],
      officeEnvironment: [],
      businessLicense: [],
      basicAccountInformation: [],
      articlesAssociation: [],
      judgment: [],
      rules: {
        businessAddress: [{ required: true, message: '请输入经营地址', trigger: 'blur' }]
      },
      tableData: [],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '身份类型',
          prop: 'typeStr'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '身份证号',
          prop: 'socialCreditCode'
        },
        {
          label: '身份证正反面',
          render: (h, row, index) => {
            return <cy-upload
              ref={`idcardStorage${index}`}
              uploadParams={{
                fileType: 'enterprise_idcard_Files'
              }}
              fileData={row.files}
              defaultDesc={`请上传身份证正反面`}
              disabled
            />
          }
        }
      ],
      enterpriseTableData: [],
      enterpriseColumns: [
        {
          label: '公司名称',
          prop: 'corporateName',
          showTooltip: true
        },
        {
          label: '签署链接',
          showTooltip: true,
          prop: 'certificateShortSignUrl',
          render(h, row) {
            return <div class='copy'>
              <span> { row.certificateShortSignUrl }</span>
              <i
                class='iconfont icon-a-Group779'
                v-clipboard:copy={row.certificateShortSignUrl}
              ></i>
            </div>
          }
        },
        {
          label: '认证链接',
          showTooltip: true,
          prop: 'shortAuthUrl',
          render(h, row) {
            return <div class='copy'>
              <span> { row.shortAuthUrl }</span>
              <i class='iconfont icon-a-Group779' v-clipboard:copy={row.shortAuthUrl}></i>
            </div>
          }
        },
        {
          label: '认证状态',
          showTooltip: true,
          prop: 'authStatus'

        },
        {
          label: '签署状态',
          showTooltip: true,
          prop: 'certificateSignStatus'
        },
        {
          label: '授权书',
          render: (h, row, index) => {
            return <cy-upload
              fileData={row.fileStorageDO}
              defaultDesc={`请上传授权书`}
              disabled
            />
          }
        }
      ]
    }
  },
  watch: {
    addInfo: {
      handler(newV) {
        if (newV && Object.keys(newV)) {
          const { businessAddress, locationMap, rentalContract, waterElectricityFees, officeEnvironment, businessLicense, basicAccountInformation, articlesAssociation, judgment, creditInvestigationInfoList, corporateName, certificateShortSignUrl, certificateSignStatus, shortAuthUrl, authStatus, id, cComprehensiveRiskInvestigationId, fileStorageDO } = JSON.parse(JSON.stringify(newV))
          this.ruleForm = {
            businessAddress,
            id,
            cComprehensiveRiskInvestigationId
          }
          this.locationMap = locationMap
          this.rentalContract = rentalContract
          this.waterElectricityFees = waterElectricityFees
          this.officeEnvironment = officeEnvironment
          this.businessLicense = businessLicense
          this.basicAccountInformation = basicAccountInformation
          this.articlesAssociation = articlesAssociation
          this.judgment = judgment
          this.tableData = creditInvestigationInfoList
          this.enterpriseTableData = [
            {
              corporateName,
              certificateShortSignUrl,
              certificateSignStatus: certificateSignStatus === 1 ? '已签署' : '未签署',
              shortAuthUrl,
              authStatus: authStatus ? '已认证' : '未认证',
              fileStorageDO: [fileStorageDO]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getParams(type) {
      const locationMap = this.$refs.locationMap.getFileLists
      const rentalContract = this.$refs.rentalContract.getFileLists
      const waterElectricityFees = this.$refs.waterElectricityFees.getFileLists
      const officeEnvironment = this.$refs.officeEnvironment.getFileLists

      // 个人征信
      const creditInvestigationInfoList = this.tableData.map((item, index) => {
        const { type, name, socialCreditCode } = item
        const fileLists = this.$refs.commTable.$refs[`idcardStorage${index}`].getFileLists
        return {
          type,
          name,
          socialCreditCode,
          fileList: fileLists.map(item => item.id)
        }
      })

      var params = {
        ...this.ruleForm,
        locationMapIds: locationMap.map(item => item.id),
        rentalContractIds: rentalContract.map(item => item.id),
        waterElectricityFeesIds: waterElectricityFees.map(item => item.id),
        officeEnvironmentIds: officeEnvironment.map(item => item.id),
        businessLicenseIds: [],
        basicAccountInformationIds: [],
        articlesAssociationIds: [],
        judgmentIds: [],
        creditInvestigationInfoList
      }

      if (!this.hasGuaranteeEnterprise) {
        const businessLicense = this.$refs.businessLicense.getFileLists
        const basicAccountInformation = this.$refs.basicAccountInformation.getFileLists
        const articlesAssociation = this.$refs.articlesAssociation.getFileLists
        const judgment = this.$refs.judgment.getFileLists
        params = {
          ...params,
          businessLicenseIds: businessLicense.map(item => item.id),
          basicAccountInformationIds: basicAccountInformation.map(item => item.id),
          articlesAssociationIds: articlesAssociation.map(item => item.id),
          judgmentIds: judgment.map(item => item.id)
        }
      }

      return new Promise((resolve, reject) => {
        if (type === 'submit') {
          if (!locationMap.length) {
            this.$message.warning('请上传地点定位图')
            return
          }
          if (!rentalContract.length) {
            this.$message.warning('请上传租房合同')
            return
          }
          if (!waterElectricityFees.length) {
            this.$message.warning('请上传房租缴纳流水')
            return
          }
          if (!officeEnvironment.length) {
            this.$message.warning('请上传办公环境图')
            return
          }

          this.$refs.ruleForm.validate(valid => {
            if (valid) {
              resolve(params)
            } else {
              reject()
              return false
            }
          })
        } else {
          resolve(params)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.add-info {

}
</style>
<style lang="scss">
.add-info {
  .copy {
    display: flex;
    align-items: center;
  }
  .icon-a-Group779 {
    margin-left: 10px;
    font-size: 30px;
  }
}
</style>
