<template>
  <div class="base-info">
    <cy-info-title>基础信息</cy-info-title>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      label-position="top"
      label-width="120px"
      class="rule-form-orange"
    >
      <el-form-item label="客户类型" prop="customerType">
        <el-select
          v-model="ruleForm.customerType"
          placeholder="请选择客户类型"
          :disabled="disabled"
        >
          <el-option
            v-for="item in constant.customerTypeList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input
          v-model="ruleForm.supplierName"
          :disabled="disabled"
          placeholder="请输入供应商名称"
        ></el-input>
        <!-- <el-select
          v-model="ruleForm.customerType"
          placeholder="请选择供应商名称"
          :disabled="disabled"
        >
          <el-option
            v-for="item in customerList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select> -->
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="socialCreditCode">
        <el-input
          v-model="ruleForm.socialCreditCode"
          :disabled="disabled"
          placeholder="请输入统一社会信用代码"
        />
      </el-form-item>
      <el-form-item label="资方" prop="institutionName">
        <el-input
          v-model="ruleForm.institutionName"
          :disabled="disabled"
          placeholder="请输入资方名称"
        ></el-input>
        <!-- <el-select
          v-model="ruleForm.customerType"
          placeholder="请选择资方"
          :disabled="disabled"
        >
          <el-option
            v-for="item in customerList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select> -->
      </el-form-item>
      <el-form-item label="用户唯一标识" prop="openId">
        <el-input
          v-model="ruleForm.openId"
          :disabled="disabled"
          placeholder="请输入用户唯一标识"
        />
      </el-form-item>
      <el-form-item label="归还金额" prop="hxAmt">
        <!-- :is-unit="true" unit-name="CNY" -->
        <cy-amount-input
          v-model="ruleForm.hxAmt"
          :disabled="disabled"
          placeholder="请输入归还金额"
        />
      </el-form-item>
      <el-form-item label="合同编号" prop="contractNo">
        <el-input
          v-model="ruleForm.contractNo"
          :disabled="disabled"
          placeholder="请输入合同编号"
        />
      </el-form-item>
      <el-form-item label="支用批次" prop="quotaDisburseBatch">
        <el-input
          v-model="ruleForm.quotaDisburseBatch"
          :disabled="disabled"
          placeholder="请输入支用批次"
        />
      </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: {
        customerType: '',
        supplierName: '',
        cEnterpriseId: '',
        socialCreditCode: '',
        institutionName: '',
        contractNo: '',
        quotaDisburseBatch: '',
        openId: '',
        hxAmt: ''
      }
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  watch: {
    detailsInfo: {
      handler(val) {
        console.log('baseinfo-------')
        console.log(val)
        if (val && Object.keys(val).length) {
          const {
            customerType,
            cEnterpriseId,
            supplierName,
            socialCreditCode,
            financingManagementId,
            institutionName,
            openId,
            hxAmt,
            contractNo,
            quotaDisburseBatch
          } = val

          this.ruleForm = {
            customerType,
            cEnterpriseId,
            supplierName,
            socialCreditCode,
            financingManagementId,
            institutionName,
            quotaDisburseBatch,
            contractNo,
            openId,
            hxAmt
          }
        }
      },
      immediate: true
    }
  }
}
</script>
