<!--
 * @Author: chris
 * @Date: 2025-12-02 09:43:34
 * @LastEditors: chris
 * @LastEditTime: 2026-01-19 17:07:21
-->
<script setup lang="ts">
import type { IKnowledge, IKnowledgeListQuery } from '@/api/knowledge'
import { getKnowledgeList } from '@/api/knowledge'

// 状态管理
const searchQuery = ref<string>('')
const queryParams = ref<IKnowledgeListQuery>({
  deptId: 0,
  content: '',
  pageNum: 1,
  pageSize: 10,
})
const pestList = ref<IKnowledge[]>([])
const isLoading = ref(false)

// 加载数据
async function loadData() {
  isLoading.value = true
  try {
    const res = await getKnowledgeList(queryParams.value)
    pestList.value = res || []
  }
  finally {
    isLoading.value = false
  }
}

// 处理搜索
function handleSearch() {
  queryParams.value.content = searchQuery.value
  loadData()
}

// 跳转到详情页
function navigateToDetail(id: number) {
  uni.navigateTo({
    url: '/pages-sub/pest/detail',
    query: { id },
  })
}

// 页面加载时获取数据
onMounted(() => {
  loadData()
})
</script>

<template>
  <scroll-view scroll-y class="pest-knowledge-page">
    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <uni-icons name="search" size="20" color="#999" class="search-icon" />
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索虫害知识..."
          class="search-input"
          @input="handleSearch"
        >
      </view>
    </view>

    <!-- 知识列表 -->
    <view class="knowledge-list">
      <uni-load-more
        v-if="isLoading"
        status="loading"
        class="loading-indicator"
      />

      <!-- 列表为空提示 -->
      <view v-else-if="pestList.length === 0" class="empty-state">
        <uni-icons name="warning-empty" size="60" color="#ccc" />
        <text class="empty-text">暂无相关知识</text>
      </view>

      <!-- 列表项 -->
      <view
        v-for="item in pestList"
        v-else
        :key="item.id"
        class="knowledge-item"
        @click="navigateToDetail(item.id)"
      >
        <view class="item-image">
          <image :src="item.imageUrl" mode="aspectFill" />
        </view>
        <view class="item-content">
          <text class="item-title">{{ item.title }}</text>
          <text class="item-description">{{ item.content }}</text>
          <view class="item-meta">
            <text class="item-date">{{ item.createTime }}</text>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.pest-knowledge-page {
  height: calc(100vh - 50px - var(--safe-area-inset-bottom));
  background-color: #f8f8f8;
}

/* 搜索框 */
.search-container {
  padding: 12px 20px;
  background-color: #fff;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 0 16px;
}

.search-icon {
  margin-right: 8px;
}

.search-input {
  flex: 1;
  height: 40px;
  font-size: 15px;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

/* 知识列表 */
.knowledge-list {
  padding: 20px;
}

.loading-indicator {
  padding: 20px 0;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.empty-text {
  margin-top: 12px;
  font-size: 14px;
  color: #999;
}

/* 列表项 */
.knowledge-item {
  display: flex;
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition:
    transform 0.2s,
    box-shadow 0.2s;

  + .knowledge-item {
    margin-top: 12px;
  }
}

.knowledge-item:active {
  transform: scale(0.98);
}

.item-image {
  width: 100px;
  height: 100px;
  margin-right: 16px;
  flex-shrink: 0;
}

.item-image image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.item-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-description {
  font-size: 13px;
  color: #666;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.item-meta {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #999;
}

.item-date {
  margin-right: 10px;
}
</style>
