<template>
  <div class="base-info">
    <cy-info-title>基础信息</cy-info-title>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      class="rule-form-orange"
    >
      <template>
        <el-form-item label="客户号" class="form-required">
          <el-input
            v-model="ruleForm.customerNumber"
            placeholder="请输入客户号"
            disabled
          />
        </el-form-item>
      </template>
      <el-form-item label="客户名称" class="form-required">
        <el-input
          v-model="ruleForm.customerName"
          placeholder="请输入客户名称"
          disabled
        />
      </el-form-item>
      <el-form-item
        v-if="pageType === 'see'"
        label="客户类别"
      >
        <el-select
          v-model="ruleForm.customerType"
          placeholder="请选择客户类别"
          disabled
        >
          <el-option
            v-for="item in [
              { value: 0, label: '企业' },
              { value: 1, label: '个体工商户' },
              // { value: 2, label: '个人' },
            ]"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="账户名称" class="form-required">
        <el-input
          v-model="ruleForm.accountName"
          placeholder="请输入账户名称"
          disabled
        />
      </el-form-item>
      <template v-if="pageType === 'see'">
        <el-form-item label="账户别名">
          <el-input
            v-model="ruleForm.accountAlias"
            placeholder="请输入账户别名"
            disabled
          />
        </el-form-item>
        <el-form-item label="账号">
          <el-input
            v-model="ruleForm.accountNumber"
            placeholder="请输入账号"
            disabled
          />
        </el-form-item>
        <el-form-item label="账户状态">
          <el-select v-model="ruleForm.accountStatus" placeholder="请选择账户状态" disabled>
            <el-option
              v-for="item in constant.memberAccountStatus"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="授权状态">
          <el-select
            v-model="ruleForm.authorizationStatus"
            placeholder="请选择授权状态"
            :disabled="disabled || pageType === 'edit'"
          >
            <el-option
              v-for="item in constant.memberAccountAuthStatus"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-if="pageType === 'see'">
        <el-form-item label="渠道">
          <el-input
            v-model="ruleForm.channel"
            placeholder="请输入渠道"
            :disabled="disabled"
          />
        </el-form-item>
        <el-form-item label="客户来源">
          <el-input
            v-model="ruleForm.customerSource"
            placeholder="请输入客户来源"
            :disabled="disabled"
          />
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    detailsInfo: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 客户端类型
    clientType: {
      type: String,
      default: '', // C  C端， B  B端
      required: true
    },
    // 页面类型
    pageType: {
      type: String,
      default: '', // edit  编辑 add  新增 see  查看
      required: true
    }
  },
  data() {
    return {
      ruleForm: {
        customerNumber: '',
        customerName: '',
        customerType: '',
        accountName: '',
        accountNumber: '',
        accountAlias: '',
        socialCreditCode: '',
        bocomBasicInfoId: '',
        accountStatus: '',
        authorizationStatus: '',
        channel: '',
        customerSource: ''
      },
      rules: {
        customerNumber: [
          { required: true, message: '请输入客户号', trigger: 'blur' }
        ],
        customerName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' }
        ],
        accountName: [
          { required: true, message: '请输入账户名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  watch: {
    $route: {
      handler(val) {
        if (val.query.name) {
          this.ruleForm.customerName = val.query.name
          this.ruleForm.accountName = val.query.name
        }
        if (val.query.number) {
          this.ruleForm.customerNumber = val.query.number
        }
      },
      immediate: true
    },
    detailsInfo: {
      handler(val) {
        if (val && Object.keys(val).length) {
          Object.keys(this.ruleForm).forEach((el) => {
            if (el in val) {
              this.ruleForm[el] = val[el]
            }
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>

</style>
