<template>
  <div>
    <div v-loading="loading" v-if="list.length">
      <div class="w-full max-w-6xl mx-auto">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="bg-white rounded-xl shadow-sm mb-6 overflow-hidden border border-gray-100"
          :style="{ '--dynamic-color': item.color }"
        >
          <!-- 专栏标题栏 -->
          <div
            class="flex items-center justify-between px-5 py-3"
            :style="{ backgroundColor: item.color }"
          >
            <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
              <span class="w-1 h-5 rounded-full bg-gray-700/60"></span>
              {{ item.title }}
            </h3>
          </div>

          <!-- 内容区 -->
          <div class="p-5">
            <div
              v-if="item.yaColumnVoList.length"
              class="grid grid-cols-1 grid-cols-3 xl:grid-cols-3 gap-5"
            >
              <div
                v-for="i in item.yaColumnVoList"
                :key="i.articleId"
                class="group cursor-pointer rounded-lg overflow-hidden border border-transparent hover:border-gray-200 hover:shadow-md transition-all duration-300"
                @click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
              >
                <!-- 封面图 -->
                <div class="relative overflow-hidden">
                  <img
                    :src="i.faceUrl"
                    class="w-full aspect-[5/3] object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <!-- 推荐角标 -->
                  <div
                    v-if="i.isRecommend"
                    class="absolute top-0 left-0 w-15 h-7 bg-#FFF9B9 flex items-center justify-center border-2px border-solid border-#f4f0eb rounded-tl-lg rounded-br-lg"
                  >
                    <img class="w-6" src="@/assets/img/culture/recommend.png" alt="" />
                    <div class="text-12px text-#000 line-height-12px">推荐</div>
                  </div>
                  <!-- 底部渐变遮罩 -->
                  <div
                    class="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-black/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                  ></div>
                </div>

                <!-- 文字信息 -->
                <div class="p-2">
                  <h3 class="font-medium text-gray-800 mb-2.5 line-clamp-1">
                    {{ i.title }}
                  </h3>
                  <div class="flex items-center justify-between text-xs text-gray-500">
                    <div class="flex items-center gap-2">
                      <span class="flex items-center gap-0.5">
                        <el-icon><IEpView /></el-icon>
                        {{ i.viewCount }}
                      </span>
                      <span class="flex items-center gap-0.5">
                        <el-icon><IEpChatDotRound /></el-icon>
                        {{ i.replyCount }}
                      </span>
                      <span class="flex items-center gap-0.5">
                        <el-icon><IEpStar /></el-icon>
                        {{ i.collectCount }}
                      </span>
                    </div>
                    <div class="text-gray-500">
                      {{
                        smallerThanXl
                          ? dayjs(i.createTime * 1000).format('YYYY-MM-DD')
                          : dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm')
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="flex items-center justify-center h-48">
              <el-empty description="暂无数据" />
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-pagination border-t border-gray-200">
        <div class="max-w-7xl mx-auto py-4">
          <div class="flex items-center justify-between">
            <!-- 左侧：回到顶部按钮 -->
            <div class="left">
              <ScrollTopComp />
            </div>
            <!-- 右侧：分页器 -->
            <div class="right">
              <div
                class="pagination-wrapper bg-white rounded-lg shadow-sm border border-gray-100 p-2"
              >
                <el-pagination
                  v-model:current-page="searchParams.current"
                  v-model:page-size="searchParams.size"
                  :page-sizes="[15, 30, 45, 60]"
                  layout="prev, pager, next, jumper, total"
                  :total="total"
                  class="custom-pagination"
                  @current-change="
                    async (e) => {
                      await goToPage(e)
                      handleBackTop()
                    }
                  "
                  @size-change="changePageSize"
                  :pager-count="5"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <div class="flex items-center justify-center h-full">
        <el-empty description="暂无数据" />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { getInterviewList } from '@/api'
import { usePageSearch, useScrollTop, useNavigation } from '@/hooks'
import { TABS_REF_KEY } from '@/constants'
import dayjs from 'dayjs'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
const tabsRef = inject(TABS_REF_KEY)

const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
const { jumpToArticleDetailPage } = useNavigation()
const { list, total, searchParams, goToPage, changePageSize, loading, refresh } = usePageSearch(
  getInterviewList,
  {
    defaultSize: 3,
    immediate: false,
  },
)
defineExpose({
  refresh: () => {
    refresh()
  },
})
</script>

<style scoped></style>
