<template>
  <view class="app-container pb-20">
    <TopBar title="知识详情" show-back />
    
    <view v-if="knowledge" class="px-4 py-4 gap-y-4">
      <!-- 知识标题 -->
      <uni-card :is-shadow="true">
        <view class="mb-3">
          <text class="text-lg font-semibold text-gray-800 block">{{ knowledge.title }}</text>
          <view class="flex items-center mt-2 gap-4">
            <view class="px-2 py-1 bg-blue-50 rounded-md">
              <text class="text-xs text-blue-500">{{ knowledge.category }}</text>
            </view>
            <view class="flex items-center text-xs text-gray-400">
              <text class="uni-icons uniui-calendar-filled mr-1"></text>
              {{ formatDate(knowledge.createTime) }}
            </view>
            <view class="flex items-center text-xs text-gray-400">
              <text class="uni-icons uniui-eye-filled mr-1"></text>
              {{ knowledge.viewCount }}
            </view>
          </view>
        </view>
      </uni-card>

      <!-- 知识内容 -->
      <uni-card title="正文内容" icon="uniui-compose" :is-shadow="true">
        <view class="text-gray-700 text-sm leading-relaxed gap-y-3">
          <text class="block">{{ knowledge.content }}</text>
        </view>
      </uni-card>

      <!-- 附件列表 -->
      <uni-card v-if="knowledge.attachments?.length" title="相关附件" icon="uniui-folder-add-filled" :is-shadow="true">
        <uni-list border>
          <uni-list-item 
            v-for="(file, index) in knowledge.attachments" 
            :key="index"
            :title="file.name"
            :note="file.size"
            show-arrow
            @click="downloadFile(file.url)"
          >
            <template #header>
              <view class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center mr-3">
                <text class="uni-icons uniui-download-filled text-blue-500"></text>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
      </uni-card>
    </view>

    <view v-else class="py-20 text-center">
      <EmptyState message="知识内容不存在" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import UniCard from '../../components/uni-card/uni-card.vue'
import UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import { formatDate } from '../../utils'

const knowledge = ref<any>(null)

function downloadFile(url: string) {
  uni.showToast({ title: '开始下载...', icon: 'none' })
}

onMounted(() => {
  // 模拟数据
  knowledge.value = {
    id: '1',
    title: '化粪池清掏操作规范',
    category: '操作规范',
    content: '一、作业前准备\n1. 检查作业人员安全防护装备是否齐全\n2. 确认作业区域通风良好\n3. 设置安全警示标识，禁止无关人员进入\n4. 检查作业设备是否正常\n\n二、作业流程\n1. 打开井盖，进行通风换气\n2. 使用气体检测仪检测有害气体浓度\n3. 确认安全后，使用专业设备进行清掏\n4. 清掏完成后，对井内进行冲洗\n5. 恢复井盖，清理作业现场\n\n三、安全注意事项\n1. 作业人员必须佩戴防毒面具和安全绳\n2. 井下作业时间不得超过30分钟\n3. 必须配备监护人员在井上监护\n4. 发现异常情况立即停止作业并撤离',
    createTime: '2026-06-20',
    viewCount: 128,
    attachments: [
      { name: '操作规范V2.0.pdf', size: '2.3MB', url: '#' },
      { name: '安全流程图.png', size: '1.1MB', url: '#' },
    ],
  }
})
</script>
