

<template>
  <view class="app-container pb-20">
    <TopBar title="行业知识" show-back />

    <view class="px-4 py-4">
      <view
        v-for="(item, index) in knowledges"
        :key="item.id"
        class="knowledge-card flex"
        @click="goToDetail(item)"
      >
        <view
          class="w-24 h-24 rounded-xl flex items-center justify-center mr-3 flex-shrink-0 bg-primary-light"
        >
          <text class="text-primary text-2xl">{{ getIcon(index) }}</text>
        </view>
        <view class="flex-1 flex flex-col justify-center">
          <text class="font-medium text-gray-800 mb-1 text-sm">{{ item.title }}</text>
          <text class="text-gray-500 text-xs line-clamp-2 mb-1">{{ item.summary }}</text>
          <text class="text-gray-400 text-xs">{{ formatDate(item.createTime, 'YYYY-MM-DD') }}</text>
        </view>
      </view>
    </view>

    <view v-if="knowledges.length === 0" class="px-4 mt-3">
      <EmptyState message="暂无知识内容" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import TopBar from '@/components/common/TopBar.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import { useCommonStore } from '@/stores/common'
import { formatDate, navigateTo } from '@/utils'
import type { Knowledge } from '@/types'

const commonStore = useCommonStore()
const knowledges = computed(() => commonStore.knowledges)

const icons = ['', '', '', '', '']

function getIcon(index: number): string {
  return icons[index % icons.length]
}

function goToDetail(item: Knowledge) {
  commonStore.setCurrentKnowledge(item.id)
  uni.setStorageSync('current_knowledge', item)
  navigateTo('/subPackages/pages-common/knowledgeDetail')
}
</script>

<style scoped>
.knowledge-card {
  background: white;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid #e5e7eb;
}

.knowledge-card:active {
  opacity: 0.95;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
