<template>
  <div ref="searchPageRef" class="bg-white/90">
    <div>
      <!-- 搜索栏 -->
      <div class="p-4">
        <div class="flex items-center gap-2 justify-between">
          <el-button link @click="router.back()" class="text-gray-600 hover:text-primary">
            <el-icon class="mr-1">
              <IEpArrowLeft />
            </el-icon>
            返回
          </el-button>
          <div class="w-auto flex items-center gap-2">
            <el-input
              v-model="searchParams.title"
              placeholder="输入关键词搜索"
              class="w-400px"
              size="default"
              @keyup.enter="handleSearch"
              clearable
            />

            <el-button type="primary" class="rounded-lg" @click="handleSearch">搜索</el-button>
          </div>
        </div>
      </div>

      <!-- 一级分类 -->
      <div class="flex items-center justify-between border-b border-gray-200 p-4">
        <div class="flex items-center gap-2">
          <span v-if="columnTitle" class="text-gray-600 text-base"
            >当前栏目：{{ columnTitle }}</span
          >

          <!-- <template v-else>
            <span class="text-gray-600 text-14px">分类：</span>
            <div class="flex gap-2">
              <button
                v-for="sort in [{ label: '全部', value: '' }, ...articleTypeListOptions]"
                :key="sort.value"
                class="px-4 py-1.5 rounded-lg text-14px transition-colors cursor-pointer"
                :class="{
                  'text-blue-600 bg-blue-50': searchParams.type === sort.value,
                  'text-gray-600 hover:text-blue-600': searchParams.type !== sort.value,
                }"
                @click="changeType(sort.value)"
              >
                {{ sort.label }}
              </button>
            </div>
          </template> -->
        </div>
        <div class="text-gray-500 text-14px">
          <el-radio-group
            size="default"
            v-model="searchParams.sortLogic"
            @change="(val) => changeSort(val as number)"
          >
            <el-radio-button
              v-for="sort in sortOptions"
              :key="sort.value"
              :label="sort.label"
              :value="sort.value"
            />
          </el-radio-group>
        </div>
      </div>

      <div v-show="list.length">
        <div class="space-y-4">
          <div
            v-for="item in list"
            :key="item.articleId"
            class="flex gap-4 p-4 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
            @click="handleClick(item)"
          >
            <!-- 封面图 -->
            <div
              v-if="item.faceUrl"
              class="flex-shrink-0 w-240px h-135px rounded-lg overflow-hidden bg-gray-100 relative"
            >
              <img :src="item.faceUrl" class="w-full h-full object-cover" />
              <div
                class="absolute bottom-2 right-2 bg-black/70 text-white text-12px px-2 py-0.5 rounded"
              >
                {{ item.videoDuration }}
              </div>
            </div>

            <!-- 内容信息 -->
            <div class="flex-1 flex flex-col justify-between min-w-0">
              <div>
                <!-- 标题 -->
                <h3 class="text-16px font-500 text-gray-900 mb-2 line-clamp-1">
                  {{ item.title }}
                </h3>

                <!-- 描述 -->
                <p class="text-14px text-gray-600 mb-3 line-clamp-2">
                  {{ item.content }}
                </p>
              </div>

              <!-- 底部信息 -->
              <div class="flex items-center gap-4 text-13px text-gray-500">
                <span>{{ item.showName }}</span>
                <span>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
                <div class="flex items-center gap-1">
                  <el-icon class="text-sm">
                    <IEpView />
                  </el-icon>
                  <span class="font-medium text-gray-500">{{
                    Math.max(item.playCount, item.viewCount)
                  }}</span>
                </div>
                <div class="flex items-center gap-1">
                  <el-icon class="text-sm">
                    <IEpChatDotRound />
                  </el-icon>
                  <span class="font-medium">{{ item.replyCount }}</span>
                </div>
                <div class="flex items-center gap-1">
                  <el-icon class="text-sm">
                    <IEpStar />
                  </el-icon>
                  <span class="font-medium">{{ item.praiseCount }}</span>
                </div>
              </div>
            </div>

            <div class="flex-shrink-0 self-end">
              <span class="text-blue-600 text-13px">{{
                articleTypeListOptions.find((i) => i.value === item.type)?.label
              }}</span>
            </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-end gap-4">
              <!-- 左侧：回到顶部按钮 -->
              <!-- <div class="left">
                <ScrollTopComp />
              </div> -->

              <!-- 右侧：分页器 -->
              <div class="right">
                <div class="pr-4">
                  <el-pagination
                    v-model:current-page="searchParams.current"
                    v-model:page-size="searchParams.size"
                    :page-sizes="[5, 20, 1]"
                    layout="prev, pager, next, jumper, total"
                    :total="total"
                    class="custom-pagination"
                    @current-change="
                      (e) => {
                        ;(handleBackTop(), goToPage(e))
                      }
                    "
                    @size-change="changePageSize"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="!list.length">
        <div class="flex items-center justify-center h-full">
          <el-empty description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { articleTypeListOptions } from '@/constants'
import { getVideoListViewMore } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks'
import dayjs from 'dayjs'
import type { SearchMoreVideoItemDto } from '@/api'

const router = useRouter()
const route = useRoute()
const searchPageRef = ref<HTMLElement | null>(null)
const { handleBackTop } = useScrollTop(searchPageRef)

const columnTitle = (route.query.columnTitle as string) || ''

const sortOptions = [
  { label: '最新', value: 1 },
  { label: '最热', value: 0 },
]

const { total, goToPage, changePageSize, refresh, searchParams, list } = usePageSearch(
  getVideoListViewMore,
  {
    defaultParams: {
      sortLogic: sortOptions[0]?.value,
      columnId: Number(route.params.id) || '',
    },
  },
)

// const changeType = (value: ArticleTypeEnum) => {
//   searchParams.value.type = value
//   refresh()
// }

const changeSort = (value: number) => {
  searchParams.value.sortLogic = value
  refresh()
}
const handleSearch = () => {
  refresh()
}

const handleClick = (item: SearchMoreVideoItemDto) => {
  window.open(`/videoDetail/${item.articleId}`)
}
</script>

<style scoped></style>
