<template>
  <a-modal
    v-model:visible="visible"
    :title="props.editId ? '编辑商品分类' : '新增商品分类'"
    @ok="handleOk"
    @cancel="handleCancel"
    class="myModal"
  >
    <a-form
      :model="formData"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
      autocomplete="off"
      ref="formRef"
      :rules="rulesRef"
    >
      <a-form-item label="分类类型" name="parentId">
        <a-tree-select
          v-model:value="formData.parentId"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          tree-default-expand-all
          :tree-data="classifyTree"
          :defaultValue="0"
          :fieldNames="fieldNames"
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item label="产品线" v-if="formData.parentId === 0" name="lineThirdId">
        <a-select ref="select" v-model:value="formData.lineThirdId" @select="handleChangeLine">
          <a-select-option :value="item.id" v-for="item in thirdProductOption" :key="item.name">{{
            item.name
          }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="分类名称" name="name">
        <a-input v-model:value="formData.name" />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number v-model:value="formData.sort" :min="0" />
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="formData.status">
          <a-radio value="YES">启用</a-radio>
          <a-radio value="NO">禁用</a-radio>
        </a-radio-group>
      </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="页面描述" name="remark">
        <a-input v-model:value="formData.remark" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import { defineExpose, ref, reactive, defineEmits, watch, defineProps } from 'vue';
  import { message } from 'ant-design-vue';
  import * as GoodsCategoryApi from '/@/api/product/goodsCategoryApi';
  import { DataItem } from '/@/views/product/goods-category/type';
  import { GoodsCategory } from '/@/api/model/goodsCategory';
  import { fieldNames, rulesRef } from './schema';
  import lodash from 'lodash';

  const visible = ref<boolean>(false);
  const emits = defineEmits(['handleSuccess', 'update:editId']);
  const props = defineProps(['editId']);
  const formRef = ref<any>();
  const formData = reactive<GoodsCategory>({
    name: '',
    remark: '',
    status: 'NO',
    sort: 0,
    lineName: undefined,
    lineThirdId: undefined,
    parentId: 0,
  });

  // 树结构选项
  const classifyTree = ref<DataItem[]>([]);
  const thirdProductOption = ref([{ name: '产品线1', id: 1 }]);

  // 获取树结构
  const getTreeData = () => {
    GoodsCategoryApi.tree({ parentId: 0 }).then((res: DataItem[]) => {
      res.unshift({
        name: '顶级分类',
        id: 0,
      });
      classifyTree.value = res;
      console.log(classifyTree.value);
    });
  };

  const getEditInfo = () => {
    GoodsCategoryApi.getById(props.editId).then((res) => {
      for (const key in formData) {
        formData[key] = res[key];
      }
      if (res.lineThirdId) {
        formData.lineThirdId = res.lineThirdId * 1;
      }
    });
  };

  const handleChangeLine = (value, option) => {
    formData.lineName = option.key;
  };

  const handleOk = () => {
    formRef.value.validate().then(() => {
      const data = lodash.cloneDeep(formData);
      if (data.parentId != 0) {
        data.lineName = undefined;
        data.lineThirdId = undefined;
      }
      let api;
      if (props.editId) {
        data.id = props.editId;
        api = GoodsCategoryApi.update;
      } else {
        api = GoodsCategoryApi.add;
      }

      api(data).then(() => {
        message.success('操作成功');
        emits('handleSuccess');
        handleCancel();
      });
    });
  };

  const handleCancel = () => {
    formRef.value.resetFields();
    emits('update:editId', undefined);
    visible.value = false;
  };

  watch(
    () => visible.value,
    (newValue) => {
      if (newValue) {
        getTreeData();
      }
    },
  );

  watch(
    () => props.editId,
    (newValue) => {
      if (newValue) {
        getEditInfo();
      }
    },
    {
      immediate: true,
    },
  );

  defineExpose({ visible });
</script>

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