<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">
      <VideoCard
        v-for="item in listMore"
        :key="item.articleId"
        :item="item"
        is-from-ya-page
        @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.VIDEO, id: item.articleId })"
      />
    </div>
    <div v-loading="loading" v-if="list.length">
      <div class="w-full max-w-6xl mx-auto">
        <YaColumnSection
          v-for="(item, index) in list"
          :key="index"
          :item="item"
          :more-link="{
            path: `/videoSearchList/${item.id}`,
            query: {
              columnTitle: item.title,
            },
          }"
        >
          <template #default="{ item: i }">
            <VideoCard
              :item="i"
              is-from-ya-page
              @click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
            />
          </template>
        </YaColumnSection>
      </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 { getVideoList, getVideoListViewMore } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks'
import { TABS_REF_KEY, ArticleTypeEnum } from '@/constants'
import { useRouter } from 'vue-router'
import { useNavigation } from '@/hooks'
import YaColumnSection from '@/components/common/YaColumnSection/index.vue'
import VideoCard from '@/components/common/VideoCard/index.vue'

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>
