<template>
  <div
    class="bg-white rounded-xl shadow-sm mb-6 overflow-hidden border border-gray-100"
    :style="{ '--dynamic-color': item.color }"
  >
    <!-- 专栏标题栏 -->
    <div
      class="flex items-center justify-between px-5 py-3"
      :style="{ backgroundColor: item.color }"
    >
      <h3 class="text-base font-semibold text-gray-800 flex items-center gap-2">
        <span class="w-1 h-5 rounded-full bg-gray-700/60"></span>
        {{ item.title }}
      </h3>
      <div
        v-if="moreLink"
        class="flex items-center cursor-pointer text-13px text-gray-500 hover:text-indigo-500 transition-colors duration-200"
        @click="router.push(moreLink)"
      >
        查看更多 >>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="p-5">
      <div
        v-if="item.yaColumnVoList.length"
        class="grid grid-cols-1 grid-cols-3 xl:grid-cols-3 gap-5"
      >
        <template v-for="i in item.yaColumnVoList" :key="i.articleId">
          <!-- 默认渲染 YaArticleCard；调用方可用默认插槽自定义卡片内容 -->
          <slot :item="i">
            <YaArticleCard
              :item="i"
              @click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
            />
          </slot>
        </template>
      </div>
      <div v-else class="flex items-center justify-center h-48">
        <el-empty description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter, type RouteLocationRaw } from 'vue-router'
import { useNavigation } from '@/hooks'
import YaArticleCard from '@/components/common/YaArticleCard/index.vue'
import type { YaArticleCardVo } from '@/api/article/types'

defineProps<{
  /** 一个专栏/专访/视频分区的完整数据 */
  item: { title: string; color?: string; yaColumnVoList: YaArticleCardVo[] }
  /** 传入则展示「查看更多」并跳转该路由；不传则不展示 */
  moreLink?: RouteLocationRaw
}>()

const router = useRouter()
const { jumpToArticleDetailPage } = useNavigation()
</script>
