<template>
  <div class="categories-modal-container">
    <a-form
      ref="formRef"
      :model="props.modalData.data"
      :rules="props.modalData.type.indexOf('left') > -1 ? rules : rightRules"
      labelAlign="right"
      :label-col="{ span: 5 }"
    >
      <template v-if="props.modalData.type.indexOf('left') > -1">
        <a-form-item label="分类ID" name="itemCode">
          <a-input v-model:value="props.modalData.data.itemCode" />
        </a-form-item>
        <a-form-item label="分类名称" name="itemName">
          <a-input v-model:value="props.modalData.data.itemName" />
        </a-form-item>
      </template>
      <template v-else>
        <a-form-item label="ID" name="id">
          <a-input v-model:value="props.modalData.data.id" disabled placeholder="系统自动处理" />
        </a-form-item>
        <a-form-item label="代码" name="isDefault">
          <a-input v-model:value="props.modalData.data.isDefault" type="number" />
        </a-form-item>
        <a-form-item label="名称" name="itemName">
          <a-input v-model:value="props.modalData.data.itemName" />
        </a-form-item>
        <a-form-item label="值" name="itemValue">
          <a-input v-model:value="props.modalData.data.itemValue" />
        </a-form-item>
        <a-form-item label="是否可用" name="enabledMark">
          <a-select v-model:value="props.modalData.data.enabledMark">
            <a-select-option value="0">停用</a-select-option>
            <a-select-option value="1">正常</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="排序号" name="sortCode">
          <a-input-number
            v-model:value="props.modalData.data.sortCode"
            addon-before="-"
            addon-after="+"
            :min="1"
            :max="99"
          ></a-input-number>
        </a-form-item>
        <a-form-item label="描述" name="description">
          <a-input v-model:value="props.modalData.data.description" />
        </a-form-item>
        <a-form-item label="分类标识" name="itemCode">
          <a-select v-model:value="props.modalData.data.itemCode">
            <a-select-option v-for="item in props.lTree" :value="item.key">{{
              item.title
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="线索编号" name="prefix">
          <a-input v-model:value="props.modalData.data.prefix" />
        </a-form-item>
      </template>
    </a-form>
    <div class="modal-footer">
      <a-button style="margin-right: 10px" @click="closeModal">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits, ref } from 'vue';
  const props = defineProps(['modalData', 'modalForm', 'lTree']);
  const emit = defineEmits(['closeModal', 'submit']);
  const formRef = ref();
  const rules = {
    itemCode: [{ required: true, message: '分类ID不能为空', trigger: 'blur' }],
    itemName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
  };
  const rightRules = {
    itemName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
    itemCode: [{ required: true, message: '所属分类不能为空', trigger: 'blur' }],
  };
  const submit = () => {
    formRef.value
      .validate()
      .then(() => {
        emit('submit');
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  const closeModal = () => {
    emit('closeModal');
    formRef.value.resetFields();
  };
  const clearModalData = () => {
    formRef.value.resetFields();
  };
  defineExpose({
    clearModalData,
  });
</script>
<style lang="scss" scoped>
  .categories-modal-container {
    padding: 10px 25px;
    .modal-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
  }
</style>
