<template>
  <div>
    <div class="flex items-center justify-between pb-4">
      <div class="flex items-center space-x-1 justify-between w-full">
        <div class="flex items-center space-x-1">
          <div
            v-for="tab in tabs"
            :key="tab.sortLogic"
            :class="[
              'px-6 py-2 rounded-full text-sm font-medium cursor-pointer transition-all duration-200',
              searchParamsMore.sortLogic === tab.sortLogic
                ? 'bg-orange-400 text-white shadow-md'
                : 'text-gray-600 hover:text-orange-500 hover:bg-orange-50',
            ]"
            @click="changeSort(tab.sortLogic)"
          >
            {{ tab.label }}
          </div>
        </div>
        <span
          class="mr-1 text-14px color-#606266 cursor-pointer"
          @click="
            router.push({
              path: `/videoSearchList`,
            })
          "
        >
          查看更多 >></span
        >
      </div>
    </div>
    <div v-loading="loadingMore" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
      <div
        @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.articleId })"
        v-for="item in listMore"
        :key="item.articleId"
        class="group relative rounded-lg overflow-hidden bg-white shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
      >
        <div class="relative overflow-hidden">
          <img
            :src="item.faceUrl"
            class="w-full h-36 xl:h-42 object-cover group-hover:scale-105 transition-transform duration-500"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>

          <!-- 标签 -->
          <!-- <div
                class="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2.5 py-1 rounded-full text-xs font-semibold"
              >
                {{ item.tagNameList[0] }}
              </div> -->
          <div
            v-if="item.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 bottom-3 right-3 bg-black/80 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs"
          >
            {{ item?.videoDuration }}
          </div>

          <!-- 数据 -->
          <div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
            <div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
              <el-icon class="text-sm"><IEpView /></el-icon>
              <span>{{ Math.max(item.playCount, item.viewCount) }}</span>
            </div>
            <div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
              <el-icon class="text-sm"><IEpChatDotRound /></el-icon>
              <span>{{ item.replyCount }}</span>
            </div>
            <div class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg">
              <el-icon class="text-sm"><IEpStar /></el-icon>
              <span>{{ item.replyCount }}</span>
            </div>
          </div>
        </div>
        <div class="p-2.5 xl:p-4 xl:pb-3">
          <h3
            class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
          >
            {{ item.title }}
          </h3>
          <div class="flex items-center justify-between text-gray-500 text-xs">
            <div class="flex items-center gap-2 max-w-55%">
              <img :src="item.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
              <el-tooltip :content="item.showName" placement="top">
                <span class="font-medium line-clamp-1">{{ item.showName }}</span>
              </el-tooltip>
            </div>
            <span v-if="smallerThanXl">{{
              dayjs(item.createTime * 1000).format('YYYY-MM-DD')
            }}</span>
            <span v-else>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
          </div>
        </div>
      </div>
    </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-lg shadow-sm mb-6 overflow-hidden"
          :style="{ '--dynamic-color': item.color }"
        >
          <div
            class="flex items-center justify-between pr-4 pl-4 pt-2 pb-2 bg-green-50 border-b border-green-100"
            :style="{ backgroundColor: item.color, '--dynamic-color': item.color }"
          >
            <h3 class="text-lg font-medium text-gray-800 flex items-center">
              <span class="w-1 h-5 mr-2 bg-#444"></span>
              {{ item.title }}
            </h3>
            <div
              class="flex items-center cursor-pointer"
              @click="
                router.push({
                  path: `/videoSearchList/${item.id}`,
                  query: {
                    columnTitle: item.title,
                  },
                })
              "
            >
              <span class="mr-1 text-14px color-#606266">查看更多 >></span>
            </div>
          </div>

          <div class="p-4">
            <div v-if="item.yaColumnVoList.length" class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div
                v-for="i in item.yaColumnVoList"
                :key="i.articleId"
                class="group cursor-pointer rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300"
                @click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
              >
                <div class="relative overflow-hidden">
                  <img
                    :src="i.faceUrl"
                    class="w-full h-36 xl:h-44 object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>

                  <!-- 标签 -->
                  <!-- <div
                class="absolute top-3 left-3 bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2.5 py-1 rounded-full text-xs font-semibold"
              >
                {{ item.tagNameList[0] }}
              </div> -->
                  <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 bottom-3 right-3 bg-black/80 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs"
                  >
                    {{ i.videoDuration }}
                  </div>

                  <!-- 数据 -->
                  <div class="absolute bottom-3 left-3 flex gap-3 text-white text-xs">
                    <div
                      class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
                    >
                      <el-icon class="text-sm"><IEpView /></el-icon>
                      <span>{{ Math.max(i.playCount, i.viewCount) }}</span>
                    </div>
                    <div
                      class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
                    >
                      <el-icon class="text-sm"><IEpChatDotRound /></el-icon>
                      <span>{{ i.replyCount }}</span>
                    </div>
                    <div
                      class="flex items-center gap-1 bg-black/50 backdrop-blur-sm px-2 py-1 rounded-lg"
                    >
                      <el-icon class="text-sm"><IEpStar /></el-icon>
                      <span>{{ i.replyCount }}</span>
                    </div>
                  </div>
                </div>

                <div class="p-4 pb-3">
                  <h3
                    class="font-semibold text-base mb-2 group-hover:text-blue-600 transition-colors line-clamp-1"
                  >
                    {{ i.title }}
                  </h3>
                  <div class="flex items-center justify-between text-gray-500 text-xs">
                    <div class="flex items-center gap-2 max-w-55%">
                      <img :src="i.showAvatar" alt="" class="w-6 h-6 rounded-full object-cover" />
                      <el-tooltip :content="i.showName" placement="top">
                        <span class="font-medium line-clamp-1">{{ i.showName }}</span>
                      </el-tooltip>
                    </div>
                    <span v-if="smallerThanXl">{{
                      dayjs(i.createTime * 1000).format(' MM-DD HH:mm')
                    }}</span>
                    <span v-else>{{ dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</span>
                  </div>
                </div>
                <!-- <div class="relative mb-3 overflow-hidden rounded-lg">
                  <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--1 left--1 w-15 h-7 z-1000 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>
                <h3 class="text font-medium text-gray-800 mb-2 transition-colors line-clamp-1">
                  {{ i.title }}
                </h3>
                <p class="text-sm text-gray-500 mb-3 line-clamp-1">
                  {{ i.content }}
                </p>
                <div class="flex items-center justify-between text-xs text-gray-500">
                  <div class="flex items-center space-x-4">
                    <span class="flex items-center">
                      <el-icon class="mr-1">
                        <View />
                      </el-icon>
                      {{ i.viewCount }}
                    </span>
                    <span class="flex items-center">
                      <el-icon class="mr-1">
                        <ChatDotRound />
                      </el-icon>
                      {{ i.replyCount }}
                    </span>
                    <span class="flex items-center">
                      <el-icon class="mr-1">
                        <Star />
                      </el-icon>
                      {{ i.collectCount }}
                    </span>
                  </div>
                  <span>{{ dayjs(i.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </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 backdrop-blur-8 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 { getVideoList, getVideoListViewMore } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks'
import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { useNavigation } from '@/hooks'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'

// 判断是否是xl
const breakpoints = useBreakpoints(breakpointsTailwind)
const smallerThanXl = breakpoints.smaller('xl')
const router = useRouter()
const tabsRef = inject(TABS_REF_KEY)
const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
const { jumpToArticleDetailPage } = useNavigation()
const tabs = [
  { label: '最新发布', sortLogic: 1 },
  { label: '最多播放', sortLogic: 0 },
]

const { list, total, searchParams, goToPage, changePageSize, loading, refresh } = usePageSearch(
  getVideoList,
  {
    defaultSize: 3,
    immediate: false,
  },
)

const {
  list: listMore,
  searchParams: searchParamsMore,
  loading: loadingMore,
  refresh: refreshMore,
} = usePageSearch(getVideoListViewMore, {
  defaultSize: 3,
  defaultParams: {
    sortLogic: 1,
  },
  immediate: false,
})
const changeSort = (sortLogic: number) => {
  searchParamsMore.value.sortLogic = sortLogic
  refreshMore()
}

defineExpose({
  refresh: () => {
    // searchParams.value.current = 0
    refresh()
    refreshMore()
  },
})
</script>

<style scoped></style>
