<template>
  <PageBanner :layout="layout" title="案例" desc="客户案例推荐，或许更快找到灵感" />
  <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 CardList from './components/CardList.vue';
import type {App} from "~/api/oa/app/model";

const route = useRoute();

// 页面信息
const runtimeConfig = useRuntimeConfig();
const list = ref<App[]>([]);
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<App>>>('/oa/oa-app/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>
