<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"
      >
        <YaArticleCard
          v-for="i in item.yaColumnVoList"
          :key="i.articleId"
          :item="i"
          @click="jumpToArticleDetailPage({ type: i.type, id: i.articleId })"
        />
      </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 { ColumnItemDto, InterviewItemDto } from '@/api/article/types'

defineProps<{
  /** 一个专栏/专访分区的完整数据 */
  item: ColumnItemDto | InterviewItemDto
  /** 传入则展示「查看更多」并跳转该路由；不传则不展示 */
  moreLink?: RouteLocationRaw
}>()

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