<template>
  <div>
    <!-- 发布区域 -->
    <PublishPractice :type="ArticleTypeEnum.PRACTICE" :maxLength="2000" />
    <!-- 筛选面板 -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100/50 overflow-hidden mb-6">
      <div class="p-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="tag in filterOptions"
              :key="tag.id"
              @click="toggleFilter(tag.id)"
              :class="[
                'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
                tag.id === searchParams.sortLogic
                  ? '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',
              ]"
            >
              {{ tag.title }}
            </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.tagIdList.length" class="text-xs text-gray-400">
              (已选 {{ searchParams.tagIdList.length }} 个)
            </span>
          </div>
          <div class="flex flex-wrap gap-2">
            <label
              v-for="tag in tagList"
              :key="tag.id"
              :class="[
                'px-4 py-2 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200',
                searchParams.tagIdList.includes(tag.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="tag.id"
                v-model="searchParams.tagIdList"
                @change="refresh"
                class="hidden"
              />
              <span class="flex items-center gap-1.5">
                <span v-if="searchParams.tagIdList.includes(tag.id)" class="text-xs">✓</span>
                {{ tag.title }}
              </span>
            </label>
          </div>
        </div> -->

        <!-- 部门筛选 (多选) -->
        <div>
          <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 firstDepListOptions"
              :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>
    </div>
    <!-- 内容区域 -->
    <div class="bg-gray-50/80 rounded-lg shadow-sm border border-gray-100">
      <!-- 最新标题 -->
      <div
        class="flex items-center justify-between p-4 bg-white rounded-t-lg border-b border-gray-100"
      >
        <div class="flex items-center gap-2">
          <div class="w-1 h-6 bg-red-500 rounded"></div>
          <h2 class="text-lg font-medium">
            {{ filterText }}
          </h2>
        </div>
        <div
          class="text-#999 cursor-pointer text-sm"
          @click="
            router.push({
              path: '/practiceSearchList',
              query: {
                sortLogic: searchParams.sortLogic,
                tagIdList: searchParams.tagIdList.join(','),
                deptIdList: searchParams.deptIdList.join(','),
              },
            })
          "
        >
          查看更多 >>
        </div>
      </div>
      <div class="space-y-3 p-4">
        <div
          v-for="item in list"
          :key="item.id"
          class="group bg-white rounded-lg p-5 cursor-pointer transition-all duration-300 shadow-sm hover:shadow-lg hover:shadow-gray-100 hover:-translate-y-1 border border-gray-100 hover:border-gray-200"
          @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.PRACTICE, id: item.id })"
        >
          <div class="flex gap-4 justify-between">
            <div class="flex-1 min-w-0">
              <h2
                class="text-lg font-semibold text-gray-900 line-clamp-1 group-hover:text-blue-600 transition-colors duration-200 mb-2"
              >
                {{ item.title }}
              </h2>

              <div class="flex gap-3 mb-3">
                <el-image
                  v-if="item.faceUrl"
                  :src="item.faceUrl"
                  :alt="item.title"
                  fit="cover"
                  :lazy="true"
                  class="w-36 h-22 rounded-lg flex-shrink-0 object-cover group-hover:scale-105 transition-transform duration-300 overflow-hidden"
                  loading="lazy"
                />
                <p class="text-gray-500 text-sm leading-relaxed line-clamp-3 flex-1">
                  {{ item.content }}
                </p>
              </div>

              <div class="flex items-center gap-2 xl:gap-4 text-gray-500 text-xs lg:text-sm">
                <div class="flex items-center gap-2">
                  <el-avatar :size="22" :src="item.showAvatar" />
                  <span class="text-sm text-gray-500">{{ item.showName }}</span>
                </div>
                <span class="hidden sm:inline text-gray-400">
                  {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}
                </span>
                <div class="hidden sm:block w-1 h-1 bg-gray-300 rounded-full"></div>
                <div class="flex items-center gap-1 hover:text-blue-500 transition-colors">
                  <el-icon class="text-sm"><IEpView /></el-icon>
                  <span class="font-medium">{{ item.viewCount }}</span>
                </div>
                <div class="flex items-center gap-1 hover:text-red-500 transition-colors">
                  <el-icon class="text-sm"><IEpChatDotRound /></el-icon>
                  <span class="font-medium">{{ item.replyCount }}</span>
                </div>
                <div class="flex items-center gap-1 hover:text-yellow-500 transition-colors">
                  <el-icon class="text-sm"><IEpStar /></el-icon>
                  <span class="font-medium">{{ item.collectionCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </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="[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"
                :pager-count="5"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getPracticeList } from '@/api/practice'
import { usePageSearch, useScrollTop } from '@/hooks'
import dayjs from 'dayjs'
import { TABS_REF_KEY } from '@/constants'
import PublishPractice from '@/components/common/PublishBox/index.vue'
import { ArticleTypeEnum, firstDepListOptions } from '@/constants'
import { useNavigation } from '@/hooks'

const router = useRouter()
const { jumpToArticleDetailPage } = useNavigation()
const tabsRef = inject(TABS_REF_KEY)

const filterOptions = ref([
  { title: '最新', id: 1 },
  { title: '最热', id: 0 },
])
const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
const { list, total, searchParams, goToPage, changePageSize, refresh } = usePageSearch(
  getPracticeList,
  {
    defaultParams: { sortLogic: filterOptions.value[0]?.id, tagIdList: [], deptIdList: [] },
    defaultCurrent: 1,
    defaultSize: 8,
    immediate: false,
  },
)
const filterText = computed(() => {
  return filterOptions.value.find((item) => item.id === searchParams.value.sortLogic)?.title
  // +
  // (searchParams.value.tagIdList?.length ? '——' : '')
  // +
  // (searchParams.value.tagIdList?.length
  //   ? tagList.value.find((item) => searchParams.value.tagIdList?.includes(item.id))?.title
  //   : '')
})

const toggleFilter = (id: number) => {
  searchParams.value.sortLogic = id
  refresh()
}

defineExpose({
  refresh: () => {
    refresh()
  },
})
</script>

<style scoped></style>
