<template>
  <div class="main-enterprise">
    <cy-info-title type="center">{{ typeName }}</cy-info-title>
    <cy-comm-table
      ref="commTable"
      style="margin-top: 20px"
      :columns="columns"
      :data="tableData"
    />
    <cy-info-title type="center">征信情况</cy-info-title>
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="top" label-width="200px" class="rule-form-orange">
      <cy-info-title type="left">逾期（红否）</cy-info-title>
      <el-form-item label="近两年发生过逾期的账户数" prop="numberOfOverdueAccounts" class="one-form-item">
        <cy-number-input v-model="ruleForm.numberOfOverdueAccounts" :disabled="disabled" placeholder="请输入近两年发生过逾期的账户数" />
      </el-form-item>
      <el-form-item label="近两年发生过逾期的合计金额(元)" prop="totalOverdueAmount" class="one-form-item">
        <cy-amount-input v-model="ruleForm.totalOverdueAmount" :disabled="disabled" placeholder="请输入近两年发生过逾期的合计金额" />
      </el-form-item>
      <cy-info-title type="left">90天以上逾期（红否）</cy-info-title>
      <el-form-item label="账户是否发生过90天以上逾期" prop="overdue" style="width: 100%">
        <el-select v-model="ruleForm.overdue" :disabled="disabled" placeholder="请选择账户是否发生过90天以上逾期">
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <cy-info-title type="left">连三累六（红否）</cy-info-title>
      <el-form-item label="近两年贷款、信用卡连续逾期的月数" prop="consecutiveOverdueMonth" class="one-form-item">
        <cy-number-input v-model="ruleForm.consecutiveOverdueMonth" :disabled="disabled" placeholder="请输入近两年贷款、信用卡连续逾期的月数" />
      </el-form-item>
      <el-form-item label="近两年逾期还款记录累计次数" prop="accumulatedOverdueTimes" class="one-form-item">
        <cy-number-input v-model="ruleForm.accumulatedOverdueTimes" :disabled="disabled" placeholder="请输入近两年逾期还款记录累计次数" />
      </el-form-item>
      <div class="row-three">
        <div>
          <cy-info-title type="left">贷款审批查询记录</cy-info-title>
          <el-form-item label="近半年来贷款审批查询次数" prop="numberOfApprovalQueries" style="width: 100%">
            <cy-number-input v-model="ruleForm.numberOfApprovalQueries" :disabled="disabled" placeholder="请输入近半年来贷款审批查询次数" />
          </el-form-item>
        </div>
        <div>
          <cy-info-title type="left">相关还款担保</cy-info-title>
          <el-form-item label="相关还款担保责任金额(元)" prop="amountOfGuaranteeLiability" style="width: 100%">
            <cy-amount-input v-model="ruleForm.amountOfGuaranteeLiability" :disabled="disabled" placeholder="请输入相关还款担保责任金额(为非授信主体的担保)" />
          </el-form-item>
        </div>
        <div>
          <cy-info-title type="left">关注类/不良贷款 (红否)</cy-info-title>
          <el-form-item label="关注类和不良类贷款记录" prop="badRecords" style="width: 100%">
            <el-select v-model="ruleForm.badRecords" :disabled="disabled" placeholder="请选择关注类和不良类贷款记录">
              <el-option label="有" :value="1"></el-option>
              <el-option label="无" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <el-form-item label="有无失信被执行记录" prop="recordOfDishonestyExecution">
        <el-select v-model="ruleForm.recordOfDishonestyExecution" :disabled="disabled" placeholder="请选择有无失信被执行记录">
          <el-option label="有" :value="1"></el-option>
          <el-option label="无" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有无被执行记录" prop="executedRecord">
        <el-select v-model="ruleForm.executedRecord" :disabled="disabled" placeholder="请选择有无被执行记录">
          <el-option label="有" :value="1"></el-option>
          <el-option label="无" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="有无限高消费情况" prop="stCount">
        <el-select v-model="ruleForm.stCount" :disabled="disabled" placeholder="请选择有无限高消费情况">
          <el-option label="有" :value="1"></el-option>
          <el-option label="无" :value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    typeName: {
      type: String,
      default: ''
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ruleForm: {
        cCreditInvestigationInfoHistoryId: '',
        numberOfOverdueAccounts: '',
        totalOverdueAmount: '',
        overdue: '',
        consecutiveOverdueMonth: '',
        accumulatedOverdueTimes: '',
        numberOfApprovalQueries: '',
        amountOfGuaranteeLiability: '',
        badRecords: '',
        recordOfDishonestyExecution: '',
        executedRecord: '',
        stCount: ''
      },
      rules: {
        numberOfOverdueAccounts: [
          { required: true, message: '请输入近两年发生过逾期的账户数', trigger: 'blur' }
        ],
        totalOverdueAmount: [
          { required: true, message: '请输入近两年发生过逾期的合计金额', trigger: 'blur' }
        ],
        overdue: [
          { required: true, message: '请选择账户是否发生过90天以上逾期', trigger: 'change' }
        ],
        consecutiveOverdueMonth: [
          { required: true, message: '请输入近两年贷款、信用卡连续逾期的月数', trigger: 'blur' }
        ],
        accumulatedOverdueTimes: [
          { required: true, message: '请输入近两年逾期还款记录累计次数', trigger: 'blur' }
        ],
        numberOfApprovalQueries: [
          { required: true, message: '请输入近半年来贷款审批查询次数', trigger: 'blur' }
        ],
        amountOfGuaranteeLiability: [
          { required: true, message: '请输入相关还款担保责任金额', trigger: 'blur' }
        ],
        badRecords: [
          { required: true, message: '请选择关注类和不良类贷款记录', trigger: 'change' }
        ],
        recordOfDishonestyExecution: [
          { required: true, message: '请选择有无信被执行记录', trigger: 'change' }
        ],
        executedRecord: [
          { required: true, message: '请选择有无被执行记录', trigger: 'change' }
        ],
        stCount: [
          { required: true, message: '请选择有无限高消费情况', trigger: 'change' }
        ]
      },
      tableData: [],
      columns: [
        {
          label: '身份类型',
          prop: 'typeStr'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '身份证正反面',
          prop: 'cardFiles',
          render: (h, row, index) => {
            return <cy-upload
              uploadParams={{ fileType: 'enterprise_idcard_Files' }}
              fileData={row.cardFiles}
              disabled
              defaultDesc='请上传附件'
            />
          }
        },
        {
          label: '征信报告',
          prop: 'inDate',
          render: (h, row, index) => {
            return <cy-upload
              fileData={row.creditDetailFiles}
              disabled
              defaultDesc='请上传附件'
            />
          }
        }
      ]
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        const { creditInvestigationInfoHistory, cCreditInvestigationInfoHistoryId } = newV
        this.tableData = [creditInvestigationInfoHistory]
        this.ruleForm.cCreditInvestigationInfoHistoryId = cCreditInvestigationInfoHistoryId
        this.ruleForm = newV
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    validate(type) {
      return new Promise((resolve, reject) => {
        const params = {
          ...this.ruleForm
        }
        if (type === 'temp') {
          resolve(params)
        } else {
          this.$refs.ruleForm.validate(valid => {
            if (valid) {
              resolve(params)
            } else {
              return false
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-enterprise {
  .row-three {
    width: 100%;
    display: flex;
    & > div {
      width: calc(33.33% - 20px);
      margin-right: 20px;
    }
  }
}
</style>
