<template>
  <div ref="listRef">
    <div v-loading="loading" v-if="list.length">
      <div class="space-y-3 sm:space-y-4">
        <div
          v-for="item in list"
          :key="item.id"
          class="relative group bg-white rounded-lg p-4 cursor-pointer transition-all duration-300 hover:shadow-lg hover:shadow-gray-100 hover:-translate-y-1 border border-gray-100 hover:border-gray-200 mb-3 sm:mb-4"
          @click="jumpToArticleDetailPage({ type: item.type, id: item.id })"
        >
          <!-- 推荐标签 -->
          <div v-if="item.isRecommend" class="absolute left-0 top-5">
            <div
              class="h-5.5 pl-2 pr-2.5 flex items-center gap-1 bg-gradient-to-r from-#6366f1 to-#818cf8 rounded-r-full text-white text-11px font-medium shadow-sm"
            >
              <svg viewBox="0 0 16 16" class="w-3 h-3 fill-current">
                <path d="M8 1.3l2 4.1 4.5.7-3.2 3.1.8 4.5L8 11.5l-4.1 2.2.8-4.5L1.5 6.1l4.5-.7z" />
              </svg>
              推荐
            </div>
          </div>

          <div class="flex gap-3 justify-between">
            <div class="flex-1 min-w-0 flex flex-col justify-between h-24">
              <h2
                class="text-xl font-semibold text-gray-900 line-clamp-1 group-hover:text-blue-600 transition-colors duration-200 leading-tight"
                :class="{ 'pl-12': item.isRecommend }"
              >
                {{ item.title }}
              </h2>

              <div v-if="!item.content?.includes('</')" class="my-2 space-y-1">
                <p
                  class="text-gray-600 text-sm sm:text-base leading-relaxed line-clamp-1 break-all"
                >
                  {{ item.content }}
                </p>
              </div>

              <div class="flex items-center gap-2 xl:gap-4 text-gray-500 text-xs lg:text-sm">
                <div class="flex items-center gap-2">
                  <el-avatar :size="24" :src="item.showAvatar" />
                  <span class="text-sm text-gray-500">{{ item.showName }}</span>
                </div>
                <span class="text-gray-500 font-medium ml-0">
                  <span class="hidden sm:inline">{{
                    dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm')
                  }}</span>
                </span>
                <span class="text-sm text-gray-500">{{
                  articleTypeListOptions.find((i) => i.value === item.type)?.label
                }}</span>
                <div class="hidden sm:block w-1 h-1 bg-gray-300 rounded-full"></div>
                <div class="flex items-center gap-1 hover:text-blue-500 transition-colors">
                  <el-icon class="text-sm"><IEpView /></el-icon>
                  <span class="font-medium">{{
                    item.type === ArticleTypeEnum.VIDEO
                      ? Math.max(item.playCount, item.viewCount)
                      : item.viewCount
                  }}</span>
                </div>
                <div class="flex items-center gap-1 hover:text-red-500 transition-colors">
                  <el-icon class="text-sm"> <IEpChatDotRound /></el-icon>
                  <span class="font-medium">{{ item.replyCount }}</span>
                </div>
                <div class="flex items-center gap-1 hover:text-yellow-500 transition-colors">
                  <el-icon class="text-sm"><IEpStar /></el-icon>
                  <span class="font-medium">{{ item.collectionCount }}</span>
                </div>
              </div>
            </div>

            <div v-show="item.faceUrl" class="relative flex-shrink-0 w-30 h-20 xl:w-36 xl:h-24">
              <el-image
                :src="item.faceUrl + '?x-oss-process=image/format,webp'"
                alt="文章配图"
                fit="cover"
                :lazy="true"
                class="w-full h-full object-cover rounded-lg sm:rounded-lg group-hover:scale-105 transition-transform duration-300"
                loading="lazy"
              />
              <div
                class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-5 rounded-lg sm:rounded-lg transition-all duration-300"
              ></div>
            </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="[5, 10, 20]"
                  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 { usePageSearch } from '@/hooks'
import { getArticleList } from '@/api'
import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
import { useScrollTop, useNavigation } from '@/hooks'
import { articleTypeListOptions } from '@/constants'
import dayjs from 'dayjs'

const { list, total, searchParams, loading, goToPage, changePageSize, refresh } = usePageSearch(
  getArticleList,
  {
    defaultParams: { sortLogic: 0 },
    defaultCurrent: 1,
    defaultSize: 8,
    immediate: false,
  },
)
const tabsRef = inject(TABS_REF_KEY)

const { ScrollTopComp, handleBackTop } = useScrollTop(tabsRef!)

const { jumpToArticleDetailPage } = useNavigation()

defineExpose({
  refresh: (sortLogic?: number) => {
    searchParams.value.sortLogic = sortLogic
    refresh()
  },
})
</script>
