<template>
<!--  <div class="relative">-->
<!--    <el-image src="https://oss.wsdns.cn/20241108/dbb0ef723f414394bbf6736818f7ac2c.png" class="absolute top-0 z-0" />-->
<!--  </div>-->
  <div class="w-full bg-white pb-20 mb-3">
    <div class="text-center flex flex-col items-center py-15 relative bg-white">
      <div class="sub-title">
        <p class="text-gray-200 text-6xl font-bold dark:text-gray-700 py-0 line-height-5">
          {{ comments }}
        </p>
      </div>
      <h2 class="text-3xl font-bold tracking-tight text-[#409eff] lg:text-5xl">
        {{ title }}
      </h2>
    </div>
    <div class="xl:w-screen-2xl m-auto text-xl">
      <el-row :gutter="20">
        <el-col :span="10">
          <div class="carousel py-2">
            <el-carousel indicator-position="none" height="400px">
              <el-carousel-item class="relative" v-for="(item,index) in hotList" :key="index">
                <el-image :src="item.image" @click="openSpmUrl(`/detail`,item,item.articleId,true)" class="cursor-pointer" />
                <div class="absolute bg-[#e65a01]/75 w-full py-2 z-100 text-center text-sm text-white bottom-0">{{ item.title }}</div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="13">
          <div class="tabs px-10 w-full">
            <el-tabs class="custom-tabs" v-model="categoryId" @tab-change="handleClick">
              <el-tab-pane label="企业新闻" :name="939" class="text-xl" />
              <el-tab-pane label="媒体报道" :name="940">
              </el-tab-pane>
              <el-tab-pane label="出资企业聚焦" :name="941">
              </el-tab-pane>
            </el-tabs>
            <template v-for="(item,index) in list" :key="index">
              <li class="flex justify-between py-2">
                <a class="line-clamp-1 max-w-2xl" :class="`item-${index}`" :href="getSpmUrl(`/detail`,item,item.articleId)" target="_blank">{{ item.title }}</a>
                <span class="text-gray-400 font-200">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
              </li>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>


</template>

<script setup lang="ts">
import {getSpmUrl, openSpmUrl} from "~/utils/common";
import dayjs from "dayjs";
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult, PageResult} from "~/api";
import type {CmsArticle} from "~/api/cms/cmsArticle/model";
import type {CompanyParam} from "~/api/system/company/model";
import {TENANT_ID} from "~/config";

const props = withDefaults(
    defineProps<{
      list?: any[];
      disabled?: boolean;
      title?: string;
      comments?: string;
    }>(),
    {
      title: '卡片标题',
      comments: '卡片描述'
    }
);

const emit = defineEmits<{
  (e: 'done'): void;
}>();

const list = ref<CmsArticle[]>([]);
const hotList = ref<CmsArticle[]>([]);
const categoryId = ref(939)

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

const handleClick = () => {
  reload();
}

// 轮播图
const {data: hotResponse} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
  params: {
    recommend: 1,
    limit: 5
  }
})
if (hotResponse.value?.data) {
  hotList.value = hotResponse.value?.data.list
}

// 请求数据
const reload = async () => {
  const {data: response} = await useServerRequest<ApiResult<PageResult<CmsArticle>>>('/cms/cms-article/page', {
    params: {
      categoryId: Number(categoryId.value),
      limit: 8
    }
  })
  if (response.value?.data) {
    list.value = response.value?.data.list
  }
}

reload();
</script>
