<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 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>
    </div>
    <!-- 内容区域 -->
    <div class="bg-white rounded-lg shadow-sm">
      <!-- 最新标题 -->
      <div class="flex items-center justify-between p-4 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="divide-y bg-#fff">
        <div
          @click="jumpToArticleDetailPage({ type: ArticleTypeEnum.PRACTICE, id: item.id })"
          v-for="item in list"
          :key="item.id"
          class="p-4 hover:bg-gray-50 transition-colors cursor-pointer pl-8"
        >
          <div class="flex gap-3 items-center h-100%" style="border-bottom: 1.5px solid #ddd">
            <!-- 左侧内容 -->
            <div class="flex-1">
              <h1 class="font-medium text-gray-900 mb-2 leading-relaxed line-clamp-1 text-lg">
                {{ item.title }}
              </h1>

              <!-- 带图片的内容 -->
              <div class="flex gap-3 mb-2 align-center">
                <img
                  v-if="item.faceUrl"
                  :src="item.faceUrl"
                  :alt="item.title"
                  class="w-40 h-25 object-cover rounded-lg flex-shrink-0"
                />
                <div class="flex-1 mr-4">
                  <div class="text-gray-600 text-base leading-relaxed line-clamp-3">
                    {{ item.content }}
                  </div>
                </div>
              </div>

              <!-- 互动数据 -->
              <div class="flex items-center gap-5 text-gray-400 text-sm mb-2">
                <div class="flex items-center gap-1">
                  <el-icon class="text-sm">
                    <IEpView />
                  </el-icon>
                  <span>{{ item.viewCount }}</span>
                </div>
                <div class="flex items-center gap-1">
                  <el-icon class="text-sm">
                    <IEpChatDotRound />
                  </el-icon>
                  <span>{{ item.replyCount }}</span>
                </div>
                <div class="flex items-center gap-1 mr-2">
                  <el-icon class="text-sm">
                    <IEpStar />
                  </el-icon>
                  <span>{{ item.praiseCount }}</span>
                </div>
                <div>{{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm') }}</div>
              </div>
            </div>
            <!-- 加一个el-divider -->

            <el-divider class="my-1! h-100%!" direction="vertical" />
            <!-- 右侧头像 -->
            <div class="flex flex-col items-center gap-1 flex-shrink-0 pr-8">
              <el-avatar :size="45" :src="item.showAvatar" />
              <div class="text-xs text-gray-600 mt-2">{{ item.showName }}</div>
            </div>
          </div>
        </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-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 { useTagsStore } from '@/stores/tags'
// import { storeToRefs } from 'pinia'
import PublishPractice from '@/components/common/PublishBox/index.vue'
import { ArticleTypeEnum } from '@/constants'
import { jumpToArticleDetailPage } from '@/utils'

// const tagsStore = useTagsStore()
// const { tagList } = storeToRefs(tagsStore)

const router = useRouter()

const tabsRef = inject(TABS_REF_KEY)

const filterOptions = ref([
  { title: '最新', id: 1 },
  { title: '最热', id: 0 },
])
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 { 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>
