<template>
  <div :class="[prefixCls, 'flex']">
    <div>
      <mai-tab :active="currentTab.id" :data-source="tabs" @change="handleChange"/>
    </div>
    <div :class="`${prefixCls}-content dynamicInfo flex flex-col px-8`" style="border-left: 1px solid #d9d9d9;">
      <div class="mb-10">
        <el-skeleton :loading="loading" animated :count="4">
          <template #template>
            <div class="flex flex-col mb-15">
              <el-skeleton-item variant="text" style="width: 500px;height: 50px; margin-bottom: 25px"></el-skeleton-item>
              <el-skeleton-item variant="text" style="width: 100%;height: 30px; margin-bottom: 20px"></el-skeleton-item>
              <el-skeleton-item variant="text" style="width: 100%;height: 30px; margin-bottom: 30px"></el-skeleton-item>
              <el-skeleton-item variant="text" style="width: 200px;height: 20px; margin-bottom: 20px"></el-skeleton-item>
            </div>
          </template>
          <template #default>
            <div v-if="content.length" class="py-8 cursor-pointer select-none" style="border-bottom: 1px solid #d9d9d9;" v-for="item in content" :key="item.id">
              <nuxt-link :to="`/warning/${item.id}`">
                <h3 class="text-2xl mb-6 w-full overflow-hidden text-ellipsis">{{ item.title }}</h3>
                <p class="text-xl text-zinc-500 mb-6">{{ item.description }}</p>
                <p class="">{{ dayjs(item.createtime * 1000).format('YYYY-MM-DD hh:mm:ss') }}</p>
              </nuxt-link>
            </div>
            <div v-else>
              <el-empty description="暂无数据" />
            </div>
          </template>
        </el-skeleton>
      </div>
      <Pagination
        :current="current"
        :total="total"
        :limit="limit"
        :pages="pagesRef"
        @change="onChangePage"
      />
    </div>
  </div>
</template>

<script setup lang="ts">

import dayjs from "dayjs";
import {randomUUID} from '~~/utils';

definePageMeta({
  name: '预警信息',
  headerHost: true,
  order: 3,
})
useHead({
  title:'预警信息'
})

const { warningApi } = useApi()
const {prefixCls} = useDesign('mai-wrap');
const {setTotal, current, total, setCurrentPage, limit, pagesRef} = usePagination(1, 4, 0)


const tabs = ref([
  {
    name: '动态资讯',
    id: randomUUID(),
    children: [
      {name: 'WTO资讯', id: randomUUID()},
      {name: '国内资讯', id: randomUUID()},
      {name: '国外资讯', id: randomUUID()},
    ],
  },
]);
const currentTab = ref({});
const content = ref([]);
const loading = ref(true);
const searchData = ref({})
async function handleChange(data:any) {
  currentTab.value = data;
  setCurrentPage(1)
  await getList(data)
}
async function getList(data:any) {
  if(data) {
    loading.value = true;
    const {data:listDatas} = await warningApi.getWarningList({...searchData.value,page: current.value, limit, category_id: data.id})
    content.value = listDatas.data;
    loading.value = false;
    setTotal(listDatas.total)
  }
}
function onChangePage(val: number) {
  setCurrentPage(val)
  getList(currentTab.value)
}
async function getData() {
  const cate = await warningApi.getWarningCate()
  tabs.value[0].children = cate.data
  await handleChange(cate.data[0]);
}
getData()
</script>

<style scoped lang="less">
.dynamicInfo {
  margin-top: 0;
  padding-bottom: 100px;
}
</style>
