<template>
  <div class="p-10">
    <!-- 推荐工具区 -->
    <HomeRecommend
      :recommendList="list"
      :navTitle="findLabelByAlias(name as string, sortList as any)"
      navIcon="tag"
      :navTitleWidth="120.5"
    />
    <el-pagination
      background
      layout="prev, pager, next"
      :hide-on-single-page="true"
      v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNum"
      :total="total"
      @current-change="onPageChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const sortList = useState("sortTree");
const route = useRoute();
const router = useRouter();
const { pageNum, name } = route.params;
const list = ref<any[]>([]);
const total = ref<number>(0);
const params = ref<any>({
  pageNum: Number(pageNum),
  pageSize: 5,
  typeAlias: name as string,
});

// 返回分类名称
function findLabelByAlias<
  T extends { alias?: string; label?: string; children?: T[] }
>(alias: string, data: T[], childrenKey: string = "children"): string {
  if (!data || data.length === 0) {
    return "";
  }

  // 1. 首先在当前层级查找
  for (const item of data) {
    if (item.alias === alias) {
      return item.label || ""; // 返回 label 或空字符串
    }
  }

  // 2. 如果当前层级没找到，递归查找子节点
  for (const item of data) {
    const children = (item as any)[childrenKey] as T[];
    if (children && children.length > 0) {
      const foundLabel = findLabelByAlias(alias, children, childrenKey);
      if (foundLabel !== "") {
        return foundLabel;
      }
    }
  }

  return "";
}

function onPageChange(pageNum: number) {
  if (pageNum === 1) {
    router.push({
      path: "/category/" + name,
    });
  } else if (pageNum > 1) {
    router.push({
      path: route.path + "/page/" + pageNum,
    });
  }
}

const { data } = await useFetch(
  "http://aitoolht.crgx.net/dh/app/listFrontApp",
  {
    method: "get",
    params: params.value,
  }
);
list.value = data.value.rows;
total.value = data.value.total;
</script>