<template>
  <div>
    <a-form
      :model="formData"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
      autocomplete="off"
      ref="formRef"
      :rules="rulesRef"
    >
      <a-form-item label="商品分类" name="goodsCategoryList">
        <a-tree-select
          v-model:value="formData.goodsCategoryList"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          tree-default-expand-all
          tree-checkable
          :tree-data="classifyTree"
          :fieldNames="fieldNames"
        >
        </a-tree-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="remark">
        <a-input v-model:value="formData.remark" />
      </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="重点" name="isImport">
        <a-radio-group v-model:value="formData.isImport">
          <a-radio value="YES">是</a-radio>
          <a-radio value="NO">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="新品" name="isNews">
        <a-radio-group v-model:value="formData.isNews">
          <a-radio value="YES">是</a-radio>
          <a-radio value="NO">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="非常规" name="isUnconventional">
        <a-radio-group v-model:value="formData.isUnconventional">
          <a-radio value="YES">是</a-radio>
          <a-radio value="NO">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="促销商品" name="isPromotion">
        <a-radio-group v-model:value="formData.isPromotion">
          <a-radio value="YES">是</a-radio>
          <a-radio value="NO">否</a-radio>
        </a-radio-group>
      </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="pageKeyword">
        <a-input v-model:value="formData.pageKeyword" />
      </a-form-item>
      <a-form-item label="页面描述(提示)" name="pageRemark">
        <a-input v-model:value="formData.pageRemark" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted, defineExpose, defineEmits } from 'vue';
  import { rulesRef } from '../schema';
  import { BasicData } from '../type';
  import { DataItem } from '/@/views/product/goods-category/type';
  import * as GoodsCategoryApi from '/@/api/product/goodsCategoryApi';
  import { fieldNames } from '/@/views/product/goods-category/schema';

  const emits = defineEmits(['handleSubmit']);
  const formRef = ref<any>();
  const formData = reactive<BasicData>({
    goodsCategoryList: [],
    name: '',
    status: 'NO',
    isImport: 'NO',
    isNews: 'NO',
    isUnconventional: 'NO',
    isPromotion: 'NO',
    sort: 0,
    pageKeyword: '',
    pageRemark: '',
    remark: '',
  });

  const classifyTree = ref<DataItem[]>([]);

  // 获取树结构
  const getTreeData = () => {
    GoodsCategoryApi.tree({ parentId: 0, status: 'YES' }).then((res: DataItem[]) => {
      let idx = 0;
      addDisabled(res, idx);
      classifyTree.value = res;
    });
  };

  const addDisabled = (arr: DataItem[], idx: number) => {
    if (++idx === 5) return;
    arr.forEach((item) => {
      item.disabled = true;
      if (item.children) addDisabled(item.children, idx);
    });
  };

  const validate = () => {
    formRef.value.validate().then(() => {
      emits('handleSubmit');
    });
  };

  onMounted(() => {
    getTreeData();
  });

  defineExpose({ formData, validate });
</script>

<style lang="less" scoped></style>
