<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 mb-6 border-b border-gray-200 p-4">
        <div class="flex items-center gap-2">
          <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 as ArticleTypeEnum)"
            >
              {{ sort.label }}
            </button>
          </div>
        </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="
          searchParams.type === ArticleTypeEnum.COLUMN ||
          searchParams.type === ArticleTypeEnum.INTERVIEW
        "
        class="flex items-center gap-2 px-4"
      >
        <span class="text-gray-600 text-14px">二级分类：</span>
        <div class="flex gap-2">
          <button
            v-for="sort in 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>
      </div> -->

      <div v-show="list.length">
        <div class="space-y-4">
          <div
            v-for="item in list"
            :key="item.id"
            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
                v-if="item.type === ArticleTypeEnum.VIDEO"
                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
                  v-if="
                    item.type !== ArticleTypeEnum.POST &&
                    item.type !== ArticleTypeEnum.INTERVIEW &&
                    item.type !== ArticleTypeEnum.COLUMN
                  "
                  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">{{
                    item.type === ArticleTypeEnum.VIDEO
                      ? Math.max(item.playCount, item.viewCount)
                      : 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 { getArticleList } from '@/api/article'
import { usePageSearch, useScrollTop } from '@/hooks'
import { ArticleTypeEnum } from '@/constants'
import dayjs from 'dayjs'
import type { ArticleItemDto } from '@/api'

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

const queryType = (route.query.type as ArticleTypeEnum) || ''
const querySearchTitle = (route.query.title as string) || ''

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

const { total, goToPage, changePageSize, refresh, searchParams, list } = usePageSearch(
  getArticleList,
  {
    defaultParams: {
      type: queryType || '',
      sortLogic: sortOptions[0]?.value,
      title: querySearchTitle || '',
    },
    immediate: false,
  },
)

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

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

const handleClick = (item: ArticleItemDto) => {
  if (item.type === ArticleTypeEnum.VIDEO) {
    window.open(`/videoDetail/${item.id}`)
  } else {
    window.open(`/articleDetail/${item.id}`)
  }
}

onActivated(() => {
  searchParams.value.title = (route.query.title as string) || ''
  searchParams.value.type = (route.query.type as ArticleTypeEnum) || ''
  refresh()
})
</script>

<style scoped></style>
