<template>
  <PageBanner :layout="layout" />
  <el-tabs v-model="activeName" class="md:w-screen-xl m-auto relative sm:flex pb-2" @tab-click="handleClick">
    <el-tab-pane label="轻松一刻" name="happy"></el-tab-pane>
    <el-tab-pane label="企业官网" name="website"></el-tab-pane>
    <el-tab-pane label="企业商城" name="weShop"></el-tab-pane>
    <el-tab-pane label="内容管理" name="cms"></el-tab-pane>
    <el-tab-pane label="点餐外卖" name="food"></el-tab-pane>
    <el-tab-pane label="派单系统" name="task"></el-tab-pane>
    <el-tab-pane label="办公OA" name="oa"></el-tab-pane>
    <el-tab-pane label="问答" name="ask"></el-tab-pane>
    <el-tab-pane label="分享" name="share"></el-tab-pane>
  </el-tabs>
  <CardList :list="list" :disabled="disabled" @done="onSearch" />

</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {Navigation} from "~/api/cms/navigation/model";
import type {CompanyParam} from "~/api/system/company/model";
import type {Article} from "~/api/cms/article/model";
import CardList from './components/CardList.vue';

const route = useRoute();

// 页面信息
const runtimeConfig = useRuntimeConfig();
const list = ref<Article[]>([]);
const page = ref<number>(1);
const resultText = ref('');
const layout = ref<any>();
const disabled = ref<boolean>(false);
const activeName = ref(undefined)

// 获取状态
const form = ref<Navigation>();
const website = useWebsite();

// 搜索表单
const where = reactive<CompanyParam>({
  keywords: ''
});

const handleClick = (e:any) => {
  console.log(e.index)
}

const onSearch = () => {
  if(!disabled.value){
    page.value++;
    reload(route.path);
  }
}

// 请求数据
const reload = async (path: string) => {
  const {data: response} = await useServerRequest<ApiResult<PageResult<Article>>>('/cms/cms-article/page',{baseURL: runtimeConfig.public.apiServer, params: {
      page: page.value,limit: 8, keywords: where.keywords
    }})
  if(response.value?.data){
    if (list.value.length < response.value?.data.count) {
      disabled.value = false;
      if (response.value?.data.list) {
        list.value = list.value.concat(response.value?.data.list);
      }
    }else {
      disabled.value = true;
    }
    if(response.value.data.count == 0){
      resultText.value = '暂无相关结果'
    }
  }
}

const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/cms-navigation/getNavigationByPath',{query: {path: route.path}})
if(nav.value?.data){
  form.value = nav.value?.data;
}
// 页面布局
if(form.value?.layout){
  layout.value = JSON.parse(form.value?.layout)
}

useHead({
  title: `文档 - ${website.value.websiteName}`,
  bodyAttrs: {
    class: "page-container",
  }
});

watch(
    () => route.path,
    (path) => {
      reload(path);
    },
    { immediate: true }
);
</script>
