<template>
  <div class="credit-info">
    <cy-info-title style="margin-top: 10px">授信信息</cy-info-title>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item label="资方状态" prop="capitalStatus">
        <el-radio-group v-model="ruleForm.capitalStatus" :disabled="disabled">
          <el-radio label="capitalStatusInEffect">启用</el-radio>
          <el-radio label="capitalStatusForbidden">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否长银资方" prop="isCapital">
        <el-radio-group v-model="ruleForm.isCapital" :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="capitalFinancingTerm">
        <cy-number-input
          v-model="ruleForm.capitalFinancingTerm"
          :disabled="disabled"
          placeholder="请输入资方融资期限"
          :is-unit="true"
          unit-name="天"
          @blur="capitalFinancingTermBlur"
        />
      </el-form-item>
      <el-form-item label=" 是否支持多店铺" prop="isMultiStore">
        <el-radio-group v-model="ruleForm.isMultiStore" :disabled="disabled">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    detailsInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      ruleForm: {
        capitalStatus: '',
        isCapital: '',
        capitalFinancingTerm: '',
        isMultiStore: ''
      },
      rules: {
        capitalStatus: [
          { required: true, message: '请选择资方状态', trigger: 'change' }
        ],
        isCapital: [
          { required: true, message: '请选择是否长银资方', trigger: 'change' }
        ],
        capitalFinancingTerm: [
          { required: true, message: '请输入资方融资期限', trigger: 'blur' }
        ],
        isMultiStore: [
          { required: true, message: '请选择是否支持多店铺', trigger: 'change' }
        ]
      }
    }
  },
  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]
            }
          }
        }
      },
      immediate: true
      // deep: true
    }
  },
  methods: {
    capitalFinancingTermBlur() {
      this.$emit('capitalFinancingTermBlur', this.ruleForm.capitalFinancingTerm)
    },
    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>
