<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="bg-white rounded-xl shadow-sm border border-gray-100/50 overflow-hidden mb-6">
        <div class="px-6">
          <!-- 排序方式 (单选) -->
          <div class="mb-6">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-gradient-to-b from-blue-500 to-blue-600 rounded-full"></div>
              <span class="text-sm font-semibold text-gray-700">排序方式</span>
            </div>
            <div class="flex flex-wrap gap-2">
              <button
                v-for="sort in sortOptions"
                :key="sort.value"
                @click="changeSort(sort.value)"
                :class="[
                  'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
                  searchParams.sortLogic === sort.value
                    ? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
                    : 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
                ]"
              >
                {{ sort.label }}
              </button>
            </div>
          </div>

          <!-- 部门筛选 (多选) -->
          <div class="mb-6">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"></div>
              <span class="text-sm font-semibold text-gray-700">部门分类</span>
              <span v-if="searchParams.deptIdList.length" class="text-xs text-gray-400">
                (已选 {{ searchParams.deptIdList.length }} 个)
              </span>
            </div>
            <div class="flex flex-wrap gap-2">
              <label
                v-for="item in firstDepList"
                :key="item.id"
                :class="[
                  'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
                  searchParams.deptIdList.includes(item.id)
                    ? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
                    : 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
                ]"
              >
                <input
                  type="checkbox"
                  :value="item.id"
                  v-model="searchParams.deptIdList"
                  @change="refresh"
                  class="hidden"
                />
                <span class="flex items-center gap-1.5">
                  <span v-if="searchParams.deptIdList.includes(item.id)" class="text-xs">✓</span>
                  {{ item.name }}
                </span>
              </label>
            </div>
          </div>

          <!-- 标签筛选 (多选) -->
          <div class="mb-6">
            <div class="flex items-center gap-2 mb-3">
              <div class="w-1 h-4 bg-gradient-to-b from-blue-400 to-blue-500 rounded-full"></div>
              <span class="text-sm font-semibold text-gray-700">标签分类</span>
              <span v-if="searchParams.tagIdList.length" class="text-xs text-gray-400">
                (已选 {{ searchParams.tagIdList.length }} 个)
              </span>
            </div>
            <div class="flex flex-wrap gap-2">
              <label
                v-for="item in tagList"
                :key="item.id"
                :class="[
                  'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
                  searchParams.tagIdList.includes(item.id)
                    ? 'bg-blue-50 text-blue-600 border-2 border-blue-400 shadow-sm'
                    : 'bg-gray-50 text-gray-600 border-2 border-transparent hover:border-gray-200 hover:bg-gray-100',
                ]"
              >
                <input
                  type="checkbox"
                  :value="item.id"
                  v-model="searchParams.tagIdList"
                  @change="refresh"
                  class="hidden"
                />
                <span class="flex items-center gap-1.5">
                  <span v-if="searchParams.tagIdList.includes(item.id)" class="text-xs">✓</span>
                  {{ item.title }}
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>

      <div v-show="list.length" v-loading="loading">
        <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 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.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="
                      async (e) => {
                        await goToPage(e)
                        handleBackTop()
                      }
                    "
                    @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 { ArticleTypeEnum, articleTypeListOptions } from '@/constants'
import { getPracticeList } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks'
import dayjs from 'dayjs'
import type { PracticeItemDto } from '@/api'
import { storeToRefs } from 'pinia'
import { useTagsStore } from '@/stores/tags'
const tagsStore = useTagsStore()
const { tagList } = storeToRefs(tagsStore)

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

const firstDepList = ref([
  { id: '1825', name: 'Amazon产品开发部' },
  { id: '76', name: 'Amazon销售部' },
  { id: '139', name: 'Amazon运营部' },
  { id: '5114', name: 'Temu销售部' },
  { id: '4491', name: 'Tiktok项目部' },
  { id: '39', name: '视觉设计部' },
  { id: '23', name: '知识产权部' },
  { id: '499', name: '供应链管理部' },
  { id: '20', name: 'IT技术部' },
  { id: '5', name: '财务部' },
  { id: '2357', name: '人力发展中心' },
  { id: '683', name: '副总经理' },
  { id: '6', name: '总经理' },
  { id: '3', name: '董事长' },
])
const sortOptions = [
  { label: '最新', value: 1 },
  { label: '最热', value: 0 },
]

const { total, goToPage, changePageSize, refresh, searchParams, list, loading } = usePageSearch(
  getPracticeList,
  {
    defaultParams: {
      type: ArticleTypeEnum.PRACTICE,
      sortLogic: 0,
      tagIdList: [],
      deptIdList: [],
    },
    immediate: false,
  },
)

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

const handleClick = (item: PracticeItemDto) => {
  window.open(`/articleDetail/${item.id}`)
}

onActivated(() => {
  searchParams.value.sortLogic = Number(route.query.sortLogic) || 0
  searchParams.value.tagIdList =
    (route.query.tagIdList as string)?.split(',').filter(Boolean).map(Number) || []
  searchParams.value.deptIdList =
    (route.query.deptIdList as string)?.split(',').filter(Boolean) || []
  console.log(searchParams.value)
  refresh()
})
</script>

<style scoped></style>
