<template>
  <view class="app-container pb-20">
    <TopBar title="行业知识" show-back />
    
    <!-- 搜索栏 -->
    <view class="px-4 py-3">
      <view class="relative">
        <text class="uni-icons uniui-search absolute left-3 text-gray-400" style="top: 50%; transform: translateY(-50%);"></text>
        <input 
          v-model="searchText"
          class="w-full pl-10 pr-4 py-2 bg-gray-100 rounded-xl text-sm text-gray-800"
          placeholder="搜索知识标题或关键词"
        />
      </view>
    </view>

    <!-- 分类筛选 -->
    <view class="px-4 pb-2">
      <view class="flex gap-2 overflow-x-auto">
        <view 
          v-for="(cat, index) in categories" 
          :key="index"
          class="px-3 py-1 rounded-full text-sm whitespace-nowrap"
          :class="currentCategory === cat.value ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'"
          @click="currentCategory = cat.value"
        >
          {{ cat.label }}
        </view>
      </view>
    </view>

    <!-- 知识列表 -->
    <view class="px-4 mt-2">
      <view v-if="loading" class="py-10 text-center">
        <text class="text-gray-400">加载中...</text>
      </view>
      
      <view v-else-if="filteredKnowledges.length === 0">
        <EmptyState message="暂无知识内容" />
      </view>
      
      <view v-else class="gap-y-3">
        <uni-card 
          v-for="item in filteredKnowledges" 
          :key="item.id"
          :title="item.title"
          :extra="item.category"
          icon="uniui-folder-add-filled"
          :is-shadow="true"
          @click="goToDetail(item.id)"
        >
          <text class="text-sm text-gray-500 line-clamp-2">{{ item.summary }}</text>
          <template #footer>
            <view class="flex justify-between items-center">
              <view class="flex items-center text-xs text-gray-400">
                <text class="uni-icons uniui-calendar-filled mr-1"></text>
                {{ formatDate(item.createTime) }}
              </view>
              <view class="flex items-center text-xs text-gray-400">
                <text class="uni-icons uniui-eye-filled mr-1"></text>
                {{ item.viewCount }}
              </view>
            </view>
          </template>
        </uni-card>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, 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 { formatDate } from '../../utils'

const loading = ref(false)
const searchText = ref('')
const currentCategory = ref('all')

const categories = [
  { value: 'all', label: '全部' },
  { value: 'operation', label: '操作规范' },
  { value: 'safety', label: '安全知识' },
  { value: 'equipment', label: '设备维护' },
  { value: 'technology', label: '技术文档' },
]

const knowledges = ref([
  { id: '1', title: '化粪池清掏操作规范', category: '操作规范', summary: '详细介绍了化粪池清掏的标准操作流程、安全注意事项及应急处理方案...', createTime: '2026-06-20', viewCount: 128 },
  { id: '2', title: '管道疏通技术要点', category: '技术文档', summary: '管道疏通的常用方法、设备选型及常见问题解决方案...', createTime: '2026-06-18', viewCount: 95 },
  { id: '3', title: '施工现场安全守则', category: '安全知识', summary: '施工现场的安全防护要求、危险源识别及个人防护措施...', createTime: '2026-06-15', viewCount: 210 },
  { id: '4', title: '高压清洗车维护指南', category: '设备维护', summary: '高压清洗车的日常保养、常见故障排查及维修方法...', createTime: '2026-06-10', viewCount: 76 },
])

const filteredKnowledges = computed(() => {
  let result = knowledges.value
  if (currentCategory.value !== 'all') {
    result = result.filter(k => k.category === categories.find(c => c.value === currentCategory.value)?.label)
  }
  if (searchText.value) {
    const keyword = searchText.value.toLowerCase()
    result = result.filter(k => k.title.toLowerCase().includes(keyword) || k.summary.toLowerCase().includes(keyword))
  }
  return result
})

function goToDetail(id: string) {
  uni.navigateTo({ url: `/subPackages/pages-sales/knowledgeDetail?id=${id}` })
}

onMounted(() => {
  loading.value = false
})
</script>
