<template>
  <a-modal v-model:visible="visible" title="新增商品分类" @ok="handleOk" class="myModal">
    <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
      <a-form-item label="分类类型" v-bind="validateInfos.parentId">
        <a-select ref="select" v-model:value="formData.parentId">
          <a-select-option :value="item.id" v-for="item in classifyOption">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="产品线" v-bind="validateInfos.thirdProductId" v-if="formData.parentId === 0">
        <a-select ref="select" v-model:value="formData.thirdProductId">
          <a-select-option :value="item.id" v-for="item in thirdProductOption">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="分类名称" v-bind="validateInfos.name">
        <a-input v-model:value="formData.name" />
      </a-form-item>
      <a-form-item label="排序" v-bind="validateInfos.sort">
        <a-input v-model:value="formData.sort" />
      </a-form-item>
      <a-form-item label="状态" v-bind="validateInfos.status">
        <a-input v-model:value="formData.status" />
      </a-form-item>
      <a-form-item label="页面关键词" v-bind="validateInfos.name">
        <a-input v-model:value="formData.name" />
      </a-form-item>
      <a-form-item label="页面描述" v-bind="validateInfos.remark">
        <a-input v-model:value="formData.remark" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineExpose, ref, reactive } from 'vue';
  import { Form } from 'ant-design-vue';
  import * as GoodsCategoryApi from '/@/api/product/goodsCategoryApi';
  const visible = ref<boolean>(false);
  const useForm = Form.useForm;
  const formData = reactive({
    name: '',
    remark: '',
    status: 'NO',
    sort: 0,
    thirdProductId: 1,
    parentId: 0,
  });
  const rulesRef = reactive({
    name: [
      {
        required: true,
        message: 'Please input name',
      },
    ],
  });
  const classifyOption = ref([
    {
      name: '顶级分类',
      id: 0,
    },
  ]);
  const thirdProductOption = ref([{ name: '产品线1', id: 1 }]);

  const { resetFields, validate, validateInfos } = useForm(formData, rulesRef);

  const handleOk = () => {
    validate().then(() => {
      console.log(111);
    });
    // visible.value = false;
  };

  defineExpose({ visible });
</script>

<style lang="less" scoped>
  ::v-deep .ant-modal .ant-modal-body {
    padding: 24px !important;
  }
</style>
