<template>
  <div class="p-10" style="min-height: calc(100vh - 320px)">
    <HomeRecommend :recommendList="list" :navTitle="keyword" navIcon="tag" />
    <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>
const route = useRoute();
const router = useRouter();

const { keyword } = route.query as { keyword: string };
const list = ref<any[]>([]);
const total = ref<number>(0);
const params = ref<any>({
  pageNum: 1,
  pageSize: 10,
  title: keyword,
});

function onPageChange(pageNum: number) {
  router.push({
    path: route.path + "/page/" + pageNum,
    query: {
      keyword: keyword,
    },
  });
}

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>