<template>
  <div class="descriptions-edit">
    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" :show-message="false" v-enterboard>
      <el-descriptions :column="2" border>
        <el-descriptions-item>
          <template slot="label">客户代码<rq /></template>
            <MyFormItem prop="custCode" :value="form.custCode" :readonly="readonly">
              <el-input v-model="form.custCode" placeholder="请输入客户代码" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">客户名称<rq /></template>
            <MyFormItem prop="custName" :value="form.custName" :readonly="readonly">
              <el-input v-model="form.custName" placeholder="请输入客户名称" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">客户类型<rq /></template>
            <MyFormItem prop="custTypes" :value="form.custTypes" :readonly="readonly">
              <template slot="readonly">
                <dict-tag :options="dict.type.customer_type" :value="form.custType" />
              </template>
              <el-select v-model="form.custTypes" placeholder="请选择客户类型" clearable multiple>
                <el-option v-for="dict in dict.type.customer_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">营业执照</template>
            <MyFormItem prop="licenseNumber" :value="form.licenseNumber" :readonly="readonly">
              <el-input v-model="form.licenseNumber" placeholder="请输入营业执照" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">联系人</template>
            <MyFormItem prop="contactPerson" :value="form.contactPerson" :readonly="readonly">
              <el-input v-model="form.contactPerson" placeholder="请输入联系人" />
            </MyFormItem>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">联系方式</template>
            <MyFormItem prop="contactWay" :value="form.contactWay" :readonly="readonly">
              <el-input v-model="form.contactWay" placeholder="请输入联系方式" />
            </MyFormItem>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
  </div>
</template>

<script>
import { getCust, addCust, updateCust } from "@/api/jxc/cust";
export default {
  name: 'CustEdit',
  dicts: ['customer_type'],
  props: {
    bid: [String, Number, Array],
    readonly: Boolean,
  },
  data() {
    return {
      loading: false,
      form: this.defaultForm(),
      rules: {
        custCode: [
          { required: true, message: "客户代码不能为空", trigger: "blur" }
        ],
        custName: [
          { required: true, message: "客户名称不能为空", trigger: "blur" }
        ],
        custTypes: [
          { required: true, message: "客户类型不能为空", trigger: "change" }
        ],
      },
    }
  },
  watch: {
    bid: {
      immediate: true,
      handler(val) {
        this.getDetail();
      }
    },
  },
  methods: {
    // 获取详情
    getDetail() {
      this.form = this.defaultForm();
      this.resetForm("form");
      if (!this.bid) {
        return;
      }
      this.loading = true;
      getCust(this.bid).then((res) => {
        this.loading = false;
        const data = res.data || {};
        data.custTypes = data.custType ? data.custType.split(',') : [];
        this.form = {...this.defaultForm(), ...data};
      }).catch((err) => {
        this.loading = false;
      });
    },
    // 默认表单
    defaultForm() {
      return {
        id: null,
        custCode: null,
        custName: null,
        custTypes: [],
        licenseNumber: null,
        contactPerson: null,
        contactWay: null,
        remark: null,
      };
    },
    // 提交表单
    submitForm() {
      if (this.readonly) {
        return;
      }
      this.$refs.form.validate((valid, rules) => {
        if (!valid) {
          this.$modal.formWarning(rules);
          return;
        }
        this.form.custType = this.form.custTypes.join(',');
        if (this.$validate.hasValue(this.form.id)) {
          updateCust(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.$emit('saved', false);
          });
        } else {
          addCust(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$emit('saved', true);
          });
        }
      });
    }
  }
}
</script>

<style>

</style>