

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

    <view class="px-4 py-4">
      <view class="card overflow-hidden">
        <!-- 封面图 -->
        <view class="h-48 bg-primary-light flex items-center justify-center">
          <text class="text-primary text-5xl">{{ icon }}</text>
        </view>

        <view class="p-4">
          <text class="text-lg font-bold text-gray-800 mb-2 block">{{ knowledge?.title || '知识详情' }}</text>
          <view class="flex items-center text-gray-500 text-sm mb-4">
            <text class="mr-1"></text>
            <text>{{ knowledge?.createTime ? formatDate(knowledge.createTime, 'YYYY-MM-DD') : '' }}</text>
          </view>

          <view class="border-t border-gray-200 pt-4 gap-y-4">
            <view class="bg-primary-light rounded-xl p-4">
              <text class="font-medium text-primary mb-2 block text-sm"> 摘要</text>
              <text class="text-gray-500 text-sm block">{{ knowledge?.summary || '暂无摘要' }}</text>
            </view>

            <view class="bg-success-light rounded-xl p-4">
              <text class="font-medium text-success mb-2 block text-sm"> 内容</text>
              <text class="text-gray-500 text-sm block whitespace-pre-wrap">{{ knowledge?.content || '暂无内容' }}</text>
            </view>

            <view class="bg-surface rounded-xl p-4">
              <text class="font-medium text-gray-800 mb-2 block text-sm">️ 分类</text>
              <text class="text-gray-500 text-sm block">{{ knowledge?.category || '-' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const knowledge = ref<Knowledge | null>(null)

const icon = computed(() => {
  const category = knowledge.value?.category || ''
  const iconMap: Record<string, string> = {
    '安全规范': '️',
    '操作指南': '',
    '设备维护': '',
  }
  return iconMap[category] || ''
})

onMounted(() => {
  const data = uni.getStorageSync('current_knowledge')
  if (data) {
    knowledge.value = data
  }
})
</script>

<style scoped>
</style>
