<template>
  <div>
    <div v-loading="loading" v-if="list.length">
      <div class="w-full max-w-6xl mx-auto">
        <YaColumnSection
          v-for="(item, index) in list"
          :key="index"
          :item="item"
          :more-link="{
            path: `/columnSearchList/${item.id}`,
            query: { columnTitle: item.title },
          }"
        />
      </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="[15, 30, 45, 60]"
                  layout="prev, pager, next, jumper, total"
                  :total="total"
                  class="custom-pagination"
                  @current-change="
                    (e) => {
                      ;(handleBackTop(), goToPage(e))
                    }
                  "
                  @size-change="changePageSize"
                  :pager-count="5"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template v-else>
      <div class="flex items-center justify-center h-full">
        <el-empty description="暂无数据" />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { getColumnList } from '@/api'
import { usePageSearch, useScrollTop } from '@/hooks'
import { TABS_REF_KEY } from '@/constants'
import YaColumnSection from '@/components/common/YaColumnSection/index.vue'

const tabsRef = inject(TABS_REF_KEY)
const { handleBackTop, ScrollTopComp } = useScrollTop(tabsRef!)
const { list, total, searchParams, goToPage, changePageSize, loading, refresh } = usePageSearch(
  getColumnList,
  {
    defaultSize: 3,
    immediate: false,
  },
)
defineExpose({
  refresh: () => {
    refresh()
  },
})
</script>
