<template>
  <home-container>

    <view class="container">
      <!-- 搜索栏 -->
      <view class="search-bar-wrapper">

        <uni-search-bar v-model="searchText" placeholder="输入任务名称搜索" @confirm="onSearch" @clear="onSearch"
          @input="onSearch" />
      </view>

      <!-- 列表区域 -->
      <scroll-view scroll-y class="list-container" @scrolltolower="loadMore">
        <view class="task-item" v-for="(task, index) in inspectionList" :key="index" @click="navigateToDetail(task.id)">
          <view class="item-header">
            <text class="task-name">{{ task.documentName || '未命名任务' }}</text>
            <!-- <text class="task-status" :style="{ color: getStatusColor(task.correctionStatus) }">
              {{ task.correctionStatusDesc || '未知状态' }}
            </text> -->

            <text class="task-status" :style="{ color: task.statusColor }">
              {{ task.correctionStatusDesc }}
            </text>
          </view>

          <view class="item-content">
            <view class="info-row">
              <uni-icons type="person" size="16" color="#666"></uni-icons>
              <text class="info-text">检查人: {{ task.checkerName || '未知' }}</text>
            </view>

            <view class="info-row">
              <uni-icons type="calendar" size="16" color="#666"></uni-icons>
              <text class="info-text">截至日期: {{ formatDate(task.checkTime) }}</text>
            </view>

            <view class="info-row">
              <uni-icons type="paperclip" size="16" color="#666"></uni-icons>
              <text class="info-text">任务编号: {{ task.id || '未分配' }}</text>
            </view>

            <view class="info-row">
              <uni-icons type="calendar" size="16" color="#666"></uni-icons>
              <text class="info-text">发布时间: {{ formatDate(task.checkTime) }}</text>
            </view>
          </view>
        </view>

        <uni-load-more :status="loadingStatus" :content-text="{
          contentdown: '上拉加载更多',
          contentrefresh: '正在加载...',
          contentnomore: '没有更多数据了'
        }" />
      </scroll-view>
    </view>
  </home-container>
</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";
import { getInspectionList } from '@/api/check/checkReward.js'
export default {
  components: { HomeContainer },

  data() {
    return {
      inspectionList: [],
      loadingStatus: 'more',
      pageNum: 1,
      pageSize: 10,
      searchText: '',
      total: 0
    }
  },
  onLoad() {
    this.loadData()
  },
  methods: {
    async loadData(refresh = false) {
      if (this.loadingStatus === 'loading') return;
      this.loadingStatus = 'loading';

      try {
        // 组装参数
        const res = await getInspectionList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          checkerId: this.$store.state.user.id,
          // 后端如果支持关键词字段，可改为 keyword / searchValue / documentName 等
          documentName: this.searchText || ''
        });
        console.log("res=======", res)

        res.rows.forEach(row => {
          const { desc, color } = this.mapScoreToStatus(row.scoreTotal);
          row.correctionStatusDesc = desc;
          row.statusColor = color;
        });

        this.total = res.total;
        if (refresh) {
          this.inspectionList = res.rows;
        } else {
          this.inspectionList = [...this.inspectionList, ...res.rows];
        }
        this.loadingStatus =
          res.rows.length < this.pageSize ? 'noMore' : 'more';
        // console.log("loadingStatus",this.loadingStatus)
      } catch (e) {
        // uni.showToast({ title: '加载失败', icon: 'none' });
        this.loadingStatus = 'more';
      } finally {
        this.triggered = false;
      }
    },

    mapScoreToStatus(score) {
      if (score >= 0 && score <= 2) return { desc: '不合格', color: '#ff4d4f' };
      if (score >= 3 && score <= 4) return { desc: '合格', color: '#52c41a' };
      if (score === 5) return { desc: '优秀', color: '#1890ff' };
      return { desc: '未知', color: '#666' };
    },

    /* 搜索（支持回车、清空、实时） */
    onSearch(e) {
      this.searchText = e.value.trim();
      this.pageNum = 1;
      this.loadData(true);
    },
    /* 下拉刷新 */
    onRefresh() {
      this.pageNum = 1;
      this.loadData(true);
    },
    /* 上拉加载更多 */
    loadMore() {
      // console.log("上拉")
      if (this.loadingStatus === 'noMore') return;
      // console.log("又进去了")
      this.pageNum += 1;
      this.loadData();
    },



    handleSearch() {
      console.log("搜索")
      this.pageNum = 1
      this.loadData()
    },

    handleInput(e) {
      this.searchText = e.value
    },

    navigateToDetail(id) {
      uni.navigateTo({
        url: '/pages/inspectionRecord/detail?id=' + id
      })
    },

    formatDate(date) {
      if (!date) return '未知'
      return new Date(date).toISOString().slice(0, 10);
    },

    getStatusColor(status) {
      const map = {
        QUALIFIED: '#52c41a',
        UNQUALIFIED: '#ff4d4f',
        PENDING: '#faad14'
      }
      return map[status] || '#666'
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 搜索栏容器 */
.search-bar-wrapper {
  margin-top: 140rpx;
  /* 控制搜索框离顶部的距离 */
  // padding: 0 20rpx;
}

.search-bar {
  padding: 20rpx;
  background-color: #fff;
}

.list-container {
  flex: 1;
  padding: 0 20rpx;
  height: calc(100vh - 120rpx);
  border: 2px solid transparent;
  // width: 100%;
}

.task-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid #ddd;

}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.task-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.task-status {
  font-size: 26rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  background-color: #f5f5f5;
}

.item-content {
  padding-left: 10rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.info-text {
  font-size: 26rpx;
  color: #666;
  margin-left: 10rpx;
}
</style>
