<template>
  <PageWrapper dense contentFullHeight contentClass="flex">
    <div class="category-tree">
      <div class="category-tree-search">
        <a-input-search
          placeholder="请输入关键字搜索"
          enter-button
          size="large"
          v-model:value="searchKeyword"
          @search="handleSearch"
        />
      </div>
      <a-tree v-if="treeData.length > 0" :tree-data="treeData" default-expand-all show-icon>
        <template #custom="{ title, id, record }">
          <div class="tree-node">
            <span>{{ title }}</span>
            <div class="but_operation">
              <span class="but_type" @click="handleAdd(id)">新增</span>
              <span class="but_type" @click="handleEdit(record)">编辑</span>
              <a-popconfirm
                title="你是否确认删除操作?"
                ok-text="确认"
                cancel-text="取消"
                @confirm="handleDelete(record)"
              >
                <span class="but_type">删除</span>
              </a-popconfirm>
            </div>
          </div>
        </template>
      </a-tree>
      <div v-else class="empty-tree" style="margin: 200px auto">
        <a-empty :image="simpleImage" />
      </div>
      <categoryModal @register="registerModal" @handleReload="handleReload" />
    </div>
  </PageWrapper>
</template>
<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import './index.less';
  import { categoryModal } from './components/index';
  import { useModal } from '/@/components/Modal';
  import { deleteCategory, getAllCategory } from '/@/api/equipment/category';
  import { ref, onMounted  } from 'vue';
  import { Empty } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  const treeData = ref([]); // 声明为响应式变量
  const { t } = useI18n();
  const { createMessage } = useMessage();
  const searchKeyword = ref('');

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  // 递归转换函数
  const transformTreeData = (data: any) => {
    return data?.map((item) => {
      const transformedItem = {
        title: item.name,
        key: item.id,
        id: item.id,
        record: item, // 将原始数据赋值给 record
        slots: { title: 'custom' },
      };

      // 递归处理 children
      if (item.children && item.children.length > 0) {
        //@ts-ignore
        transformedItem.children = transformTreeData(item.children);
      }

      return transformedItem;
    });
  };

  // 获取分类数据的函数
  const fetchTreeData = async (name?: string) => {
    try {
      const res = await getAllCategory({ name }); // 将关键字传递给接口
      // 使用递归函数转换数据
      treeData.value = transformTreeData(res);
    } catch (error) {
      console.error('获取分类数据失败:', error);
    }
  };

  // 组件挂载时获取数据
  onMounted(() => {
    fetchTreeData();
  });

  const [registerModal, { openModal }] = useModal();

  // 处理搜索事件
  const handleSearch = () => {
    fetchTreeData(searchKeyword.value);
  };

  // 处理新建按钮点击事件
  const handleAdd = (key: string) => {
    openModal(true, {
      isUpdate: false, // 表示是新建操作
      parentId: key, // 传递当前节点的 key
    });
  };

  // 编辑
  const handleEdit = (record?: any) => {
    openModal(true, {
      isUpdate: true,
      record,
    });
  };

  const handleDelete = async (record?: any) => {
    let id = record.id;
    try {
      await deleteCategory({ id });
      createMessage.success(t('common.deleteSuccessText'));
      handleReload();
    } catch (error) {
      throw error;
    } finally {
    }
  };

  const handleReload = () => {
    fetchTreeData();
  };
</script>