<template>
  <div class="letters-info">
    <cy-info-title style="margin-top: 10px;">用信信息</cy-info-title>
    <el-form
      ref="ruleForm"
      :key="formKey"
      :model="ruleForm"
      label-position="top"
      label-width="150px"
      :rules="rules"
      class="rule-form-orange"
    >
      <el-form-item label="是否绑定账户" prop="isAccount">
        <el-radio-group v-model="ruleForm.isAccount" :disabled="disabled">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否占用公司资金" prop="isOccupation">
        <el-radio-group v-model="ruleForm.isOccupation" disabled>
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否公司承险" prop="isRisk">
        <el-radio-group v-model="ruleForm.isRisk" disabled>
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="征信上报方式" prop="reportMethod">
        <el-radio-group v-model="ruleForm.reportMethod" :disabled="disabled || isM1AOrM1B">
          <el-radio :label="1">A类</el-radio>
          <el-radio :label="0">B类</el-radio>
          <el-radio :label="null">不上报</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="融资利率" prop="financingRate">
        <cy-number-input
          v-model="ruleForm.financingRate"
          :decimal-options="{
            needy: true,
            digitsNo: 2
          }"
          :disabled="disabled"
          placeholder="请输入融资利率"
          :is-unit="true"
          unit-name="%"
          @blur="financingRateBlur"
        />
      </el-form-item>
      <el-form-item label="长银逾期利率 " prop="longbankOverdueInterestRate">
        <cy-number-input
          v-model="ruleForm.longbankOverdueInterestRate"
          :decimal-options="{
            needy: true,
            digitsNo: 2
          }"
          disabled
          placeholder="请输入长银逾期利率"
          :is-unit="true"
          unit-name="%"
        />
      </el-form-item>
      <el-form-item label="长银其它费用金额 " prop="longbankOtherExpenses">
        <cy-amount-input
          v-model="ruleForm.longbankOtherExpenses"
          :disabled="disabled"
          placeholder="请输入长银其它费用金额"
          :is-unit="true"
          unit-name="元"
        />
      </el-form-item>
      <el-form-item label="融资期限 " prop="financingTerm">
        <cy-number-input
          v-model="ruleForm.financingTerm"
          :disabled="disabled || isM3A"
          placeholder="请输入融资期限"
          :is-unit="true"
          unit-name="天"
        />
      </el-form-item>
      <el-form-item label="清分期限 " prop="clearanceTerm">
        <cy-number-input
          v-model="ruleForm.clearanceTerm"
          :disabled="disabled"
          placeholder="请输入清分期限"
          fornt-unit-name="第"
          :is-unit="true"
          unit-name="天"
        />
      </el-form-item>
      <el-form-item label="长银代偿利率" prop="longbankOverdueCompensationRate">
        <cy-number-input
          v-model="ruleForm.longbankOverdueCompensationRate"
          :decimal-options="{
            needy: true,
            digitsNo: 2
          }"
          disabled
          placeholder="请输入长银代偿利率"
          :is-unit="true"
          unit-name="%"
        />
      </el-form-item>
      <el-form-item label="出资方账户名称 " prop="donorAccountName">
        <el-input v-model="ruleForm.donorAccountName" disabled placeholder="请输入出资方账户名称 " />
      </el-form-item>
      <el-form-item label="利息是否计算投放日" prop="isInterest">
        <el-radio-group v-model="ruleForm.isInterest" :disabled="disabled || !isM1AOrM1B">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="还款方式 " prop="payBackMethod">
        <el-select
          v-model="ruleForm.payBackMethod"
          placeholder="请选择还款方式"
          clearable
          style="width: 100%"
          :disabled="disabled"
        >
          <el-option
            v-for="item in constant.payBackMethod"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="回款方式" prop="payCollectionMethod">
        <el-select
          v-model="ruleForm.payCollectionMethod"
          placeholder="请选择回款方式"
          clearable
          style="width: 100%"
          disabled
        >
          <el-option
            v-for="item in constant.payCollectionMethod"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="转让通知书" prop="noticeAssignment">
        <el-input v-model="ruleForm.noticeAssignment" disabled placeholder="请输入转让通知书" />
      </el-form-item>
      <el-form-item label="服务范围" class="two-form-item" prop="serviceArea">
        <el-checkbox-group v-model="ruleForm.serviceArea">
          <el-checkbox v-for="(item, index) in constant.serviceScope" :key="index" :label="item.code" :disabled="disabled" name="serviceArea">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        isAccount: '',
        isOccupation: '',
        isRisk: '',
        reportMethod: '',
        financingRate: '',
        longbankOverdueInterestRate: '',
        longbankOtherExpenses: '',
        financingTerm: '',
        clearanceTerm: '',
        longbankOverdueCompensationRate: '',
        donorAccountName: '',
        isInterest: '',
        payBackMethod: '',
        payCollectionMethod: '',
        noticeAssignment: '',
        serviceArea: []

      },
      rules: {
        isAccount: [{ required: true, message: '请选择是否绑定账户', trigger: 'change' }],
        isOccupation: [{ required: true, message: '请选择是否占用公司资金', trigger: 'change' }],
        isRisk: [{ required: true, message: '请选择是否公司承险', trigger: 'change' }],
        reportMethod: [{ required: true, message: '请选择征信上报方式', trigger: 'change' }],
        financingRate: [{ required: true, message: '请输入融资利率', trigger: 'blur' }],
        longbankOverdueInterestRate: [{ required: true, message: '请输入长银逾期利率', trigger: 'blur' }],
        longbankOtherExpenses: [{ required: true, message: '请输入长银其它费用金额', trigger: 'blur' }],
        financingTerm: [{ required: true, message: '请输入融资期限', trigger: 'blur' }],
        clearanceTerm: [{ required: true, message: '请输入清分期限', trigger: 'blur' }],
        longbankOverdueCompensationRate: [{ required: true, message: '请输入长银代偿利率', trigger: 'change' }],
        donorAccountName: [{ required: true, message: '请输入出资方账户名称', trigger: 'blur' }],
        isInterest: [{ required: true, message: '请选择利息是否计算投放日 ', trigger: 'change' }],
        payBackMethod: [{ required: true, message: '请选择还款方式', trigger: 'change' }],
        // payCollectionMethod: [{ required: true, message: '请选择回款方式', trigger: 'change' }],
        // noticeAssignment: [{ required: true, message: '请输入转让通知书', trigger: 'blur' }],
        serviceArea: [{ required: true, message: '请选择服务范围', trigger: 'change' }]
      },
      formKey: 1
    }
  },
  computed: {
    ...mapGetters(['constant']),
    isM1AOrM1B() {
      const codeList = ['M1A', 'M1B']
      return codeList.includes(this.detailsInfo.businessTypeNo)
    },
    isM2AOrM2B() {
      const codeList = ['M2A', 'M2B']
      return codeList.includes(this.detailsInfo.businessTypeNo)
    },
    isM3A() {
      const codeList = ['M3A']
      return codeList.includes(this.detailsInfo.businessTypeNo)
    }
  },
  watch: {
    detailsInfo: {
      handler(newV) {
        if (newV && Object.keys(newV).length) {
          const deepNewV = JSON.parse(JSON.stringify(newV))
          for (const key in this.ruleForm) {
            if (Object.hasOwnProperty.call(deepNewV, key)) {
              this.ruleForm[key] = deepNewV[key]
            }
          }
          this.formKey += 1
        }
      },
      immediate: true
      // deep: true
    },
    'ruleForm.financingTerm'(newV) {
      const val = newV * 1 - 30 + 1
      this.ruleForm.clearanceTerm = val < 0 ? 0 : val
    }
  },

  created() {
    this.$store.dispatch('getConstant', ['payCollectionMethod', 'payBackMethod', 'CreditStatus', 'serviceScope'])
  },
  methods: {
    financingRateBlur() {
      this.$emit('financingRateBlur', this.ruleForm.financingRate)
    },
    getParams(type) {
      return new Promise((resolve, reject) => {
        if (type === 'temp') {
          resolve(this.ruleForm)
        } else {
          this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              resolve(this.ruleForm)
            } else {
              reject()
              return
            }
          })
        }
      })
    }
  }
}
</script>

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

}

</style>
