gxt_app/pages/score/index.uvue

<template>
  <uni-navbar-lite :showLeft="false" title="工分" />
  <view class="list-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box">
        <image class="search-icon" src="/static/images/workbench/list/1.png" mode="aspectFit"></image>
        <input
          class="search-input"
          placeholder="搜索工单编码、风机编号"
          v-model="searchKeyword"
          @confirm="handleSearch"
		  @blur="handleSearch"
        />
        <text v-if="searchKeyword.length > 0" class="clear-icon" @click="clearSearch">✕</text>
      </view>
    </view>

    <!-- 工单评分状态筛选 -->
    <view class="status-bar">
      <view class="status-box">
        <text
          class="status-txt"
          :class="{ 'stauts-sel': statusFilter === '' }"
          @click="filterByStatus('')"
        >
          全部
        </text>
        <text
          class="status-txt"
          :class="{ 'stauts-sel': statusFilter === 'to_self' }"
          @click="filterByStatus('to_self')"
        >
          待自评
        </text>
        <text
          class="status-txt"
          :class="{ 'stauts-sel': statusFilter === 'to_re' }"
          @click="filterByStatus('to_re')"
        >
          待复评
        </text>
		<text
		  class="status-txt"
		  :class="{ 'stauts-sel': statusFilter === 'appealing' }"
		  @click="filterByStatus('appealing')"
		>
		  申诉中
		</text>
        <!-- <text
          class="status-txt"
          :class="{ 'stauts-sel': statusFilter === 'to_confirm' }"
          @click="filterByStatus('to_confirm')"
        >
          待确认
        </text>
        <text
          class="status-txt"
          :class="{ 'stauts-sel': statusFilter === 'to_final' }"
          @click="filterByStatus('to_final')"
        >
          待终评
        </text> -->
      </view>
    </view>

    <view class="stats-section">
      <!-- 标签切换 -->
      <view class="stats-tabs">
        <text
          class="tab-item"
          :class="{ 'tab-active': activeTab === 'ranking' }"
          @click="switchTab('ranking')"
        >
          个人排名
        </text>
        <text
          class="tab-item"
          :class="{ 'tab-active': activeTab === 'score' }"
          @click="switchTab('score')"
        >
          月度工分
        </text>
      </view>
		<!-- 个人排名内容 -->
		<view v-if="activeTab === 'ranking'" class="ranking-content">
		  <!-- 排名模块 -->
		  <view v-if="rankingItems.length > 0">
		    <view class="ranking-item-wrapper" v-for="(item, index) in rankingItems" :key="index">
		      <view class="ranking-item" @click="goToRankingDetail(getRankingType(index))">
		        <view class="ranking-circle-wrapper">
		          <view class="ranking-number" :class="getRankingSizeClass(index)">
		            <text class="ranking-number-text">{{ item.rank }}/{{ item.total }}</text>
		          </view>
		        </view>
		        <text class="ranking-name">{{ item.name }}</text>
		        <text class="ranking-label">第{{ item.rank }}名</text>
		      </view>
		    </view>
		  </view>
		  <view v-else class="no-data">
		    <text class="no-data-text">无排名数据</text>
		  </view>
		</view>
		<!-- 月度工分内容 -->
		<view v-if="activeTab === 'score'" class="score-content">
			<view class="stats-header">
				<text class="stats-title">{{ monthTitle }}月度工分</text>
				<view class="month-filters">
					<view class="month-tab">
					  <text
						class="month-filter"
						:class="{ 'month-filter-sel': selectedMonth === 'prev' }"
						@click="changeMonth('prev')"
					  >
						上月
					  </text>
					</view>
					<view class="month-tab">
					  <text
						class="month-filter"
						:class="{ 'month-filter-sel': selectedMonth === 'current' }"
						@click="changeMonth('current')"
					  >
						本月
					  </text>
				  </view>
				  <view class="month-tab">
					  <text
						class="month-filter"
						:class="{ 'month-filter-sel': selectedMonth === 'custom' }"
						@click="showCustomDatePicker"
					  >
						自定义
					  </text>
				  </view>
				</view>
			</view>
			<!-- 统计数据 -->
			<view class="stats-content">
			  <view class="total-score">
				<text class="score-value">{{ totalScore }}分</text>
				<text class="score-label">{{ monthTitle }}总工分</text>
			  </view>

			  <view class="score-breakdown">
				<view class="breakdown-item">
				  <text class="breakdown-label">维保工分</text>
				  <text class="breakdown-value">{{ maintenanceScore }}分</text>
				</view>
				<view class="breakdown-item">
				  <text class="breakdown-label">维修工分</text>
				  <text class="breakdown-value">{{ repairScore }}分</text>
				</view>
				<!-- <view v-if="rank !== null && totalRankingUsers !== null" class="breakdown-item">
				  <text class="breakdown-label">排名</text>
				  <text class="breakdown-value">{{ rank }}/{{ totalRankingUsers }}</text>
				</view> -->
			  </view>
			</view>
		</view>
    </view>

    <!-- 工单评分列表 -->
    <common-list
      :dataList="orderList"
      :loading="loading"
      :refreshing="refreshing"
      :hasMore="hasMore"
      @refresh="handleRefresh"
      @loadMore="loadMore"
      @itemClick="handleItemClick"
      class="list-with-padding"
    >
      <template #default="{ item, index }">
        <view class="list-item">
          <view class="item-container">
            <view class="item-header">
              <text class="item-title">{{ getPropertyValue(item, 'pcsStationName') }}{{ getPropertyValue(item, 'pcsDeviceName') }}{{ getWorkOrderTypeText(getPropertyValue(item, 'orderType')) }}</text>
              <!-- <text class="info-value">{{ getScoringStatus(item) }}</text> -->
			  <text class="status-tag" :class="getStatusClass(item)">{{ getScoringStatus(item) }}</text>
            </view>
            <view class="info-row">
              <view class="info-label">
                <text class="text-gray">{{ getWorkOrderTypeInfo(item) }}</text>
              </view>
              <view class="info-value-row">
                <text v-if="getPropertyValue(item, 'myScore') !== ''" class="score-text">{{ formatNumber(parseFloat(getPropertyValue(item, 'myScore'))) }}</text>
                <!-- <text class="status-text">{{ getOrderStatusText(getPropertyValue(item, 'scoreStatus')) }}</text> -->
              </view>
			</view>
			<view class="info-row">
			  <view class="info-label">
			    <text class="text-gray">工作结束时间: {{ getPropertyValue(item, 'realEndTime') }}</text>
			  </view>
			</view>
          </view>
        </view>
      </template>
    </common-list>

    <!-- 自定义时间选择弹窗 -->
    <l-popup v-model="showDatePickerPopup" position="bottom">
      <view class="date-picker-popup">
        <view class="popup-header">
			<text class="popup-title">选择年月</text>
			<view class="popup-actions">
				<view class="popup-btn">
					<text class="cancel-btn" @click="closeDatePicker">取消</text>
				</view>
			</view>
        </view>

        <view class="date-picker-container">
          <view class="date-picker-item">
            <!-- <text class="date-label">选择年月</text> -->
            <view class="date-display" @click="openDatePicker">
              {{ customDate != null && customDate != '' ? customDate : '请选择年月' }}
            </view>
          </view>
        </view>
      </view>
    </l-popup>

    <!-- Date Picker -->
    <l-popup v-model="showDatePicker" position="bottom" :z-index="1000">
      <l-date-time-picker
        :mode="3"
        format="YYYY-MM"
        :modelValue="customDate"
        confirm-btn="确定"
        cancel-btn="取消"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false">
      </l-date-time-picker>
    </l-popup>

    <!-- 底部 TabBar -->
    <custom-tabbar :current="3" :hide0="tabbar[0]" :hide1="tabbar[1]" :hide2="tabbar[2]" :hide3="tabbar[3]"/>
  </view>
</template>

<script setup lang="uts">
    import { ref, computed, onMounted, onBeforeUnmount, reactive } from 'vue'
    import { listOrderScores, getOrderScoreStatistics, listMobileOrderScores } from '@/api/score/index'
    import { getDictDataByType } from '@/api/dict/index'
    import { selectHomePageData } from '@/api/index/index'
    import type { SysDictData } from '@/types/dict'
    import {checkPermi} from '../../utils/storage'

    // 数据状态
    const searchKeyword = ref<string>('')
    const statusFilter = ref<string>('')
    const selectedMonth = ref<string>('current')
    const loading = ref<boolean>(false)
    const refreshing = ref<boolean>(false)
    const hasMore = ref<boolean>(true)
    const orderList = ref<any[]>([])
    const currentPage = ref<number>(1)
    const totalScore = ref<number>(0)
    const maintenanceScore = ref<number>(0)
    const repairScore = ref<number>(0)
    const rank = ref<number | null>(null)
    const totalRankingUsers = ref<number | null>(null)
    const customDate = ref<string>('')

    // 新增：标签切换相关
    const activeTab = ref<string>('ranking') // 默认显示个人排名

    // 用户数据类型定义
    type RankingItem = {
      name: string;
      rank: number;
      total: number;
    }

    // 新增：个人排名相关数据
    const rankingItems = ref<RankingItem[]>([])

    // 防止重复请求的标志位
    const isSearching = ref<boolean>(false)
    // 添加防重复刷新的标志
    const isRefreshing = ref<boolean>(false)
    // 添加刷新时间戳，用于防抖
    const lastRefreshTime = ref<number>(0)

	const tabbar = reactive([1,1,1,1])

    // 添加防抖定时器
    let searchTimer: number | null = null

    // 弹窗显示状态
    const showDatePickerPopup = ref<boolean>(false)
    const showDatePicker = ref<boolean>(false)

    // 工单状态字典列表
    const statusDictList = ref<SysDictData[]>([])
    // 维保类型字典列表
    const inspectionTypeDictList = ref<SysDictData[]>([])
    // 检修类型字典列表
    const maintenanceTypeDictList = ref<SysDictData[]>([])
    const dictLoaded = ref<boolean>(false)

    // 计算属性
    const monthTitle = computed(() => {
      switch (selectedMonth.value) {
        case 'prev':
          return '上月'
        case 'current':
          return '本月'
        case 'custom':
          // 显示自定义选择的年月
          return (customDate.value != null && customDate.value != '') ? customDate.value : '自定义'
        default:
          return '本月'
      }
    })





    // 根据索引获取排名圆圈的大小类（复制并修改自开屏页）
    const getRankingSizeClass = (index: number): string => {
      // size-1 对应最小的圆圈，size-3 对应最大的圆圈
      const size = Math.min(index + 1, 3);
      return `size-${size}`;
    };

    // 获取个人排名数据（复制并修改自开屏页）
    const fetchRankingData = async (): Promise<void> => {
      try {
        // 调用后端API获取用户数据
        const response = await selectHomePageData();

        // 根据响应结果更新rankingItems
        if (response != null) {
          const respObj = response as UTSJSONObject;
          const data = respObj['data'] as UTSJSONObject;

          // 初始化默认值
          let deptName = '未知部门';
          let center = '未知中心';
          let companyName = '未知公司';

          // 从scoreDept中提取部门、中心和公司名称
          if (data.hasOwnProperty('scoreDept') && Array.isArray(data['scoreDept']) && (data['scoreDept'] as any[]).length > 0) {
            const scoreDept = data['scoreDept'] as UTSJSONObject[];
            const firstItem = scoreDept[0];
            if (firstItem.hasOwnProperty('deptName')) {
              deptName = firstItem['deptName'] as string;
            }
            if (firstItem.hasOwnProperty('center')) {
              center = firstItem['center'] as string;
            }
            if (firstItem.hasOwnProperty('companyName')) {
              companyName = firstItem['companyName'] as string;
            }
          }

          // 更新排名信息
          const items : RankingItem[] = [];

          // 部门排名（东山电场）
          if (data.hasOwnProperty('deptSort') && data.hasOwnProperty('scoreDept')) {
            const deptSort = typeof data['deptSort'] === 'number' ? data['deptSort'] as number : 0;
            const scoreDept = Array.isArray(data['scoreDept']) ? data['scoreDept'] as any[] : [];
            // 只有当部门排序大于0且scoreDept数组不为空时才添加
            if (deptSort > 0 && scoreDept.length > 0) {
              items.push({
                name: deptName,
                rank: deptSort,
                total: scoreDept.length
              });
            }
          }

          // 中心排名（陆上设备维护中心）
          if (data.hasOwnProperty('centerSort') && data.hasOwnProperty('scoreCenter')) {
            const centerSort = typeof data['centerSort'] === 'number' ? data['centerSort'] as number : 0;
            const scoreCenter = Array.isArray(data['scoreCenter']) ? data['scoreCenter'] as any[] : [];
            // 只有当中心排序大于0且scoreCenter数组不为空时才添加
            if (centerSort > 0 && scoreCenter.length > 0) {
              items.push({
                name: center,
                rank: centerSort,
                total: scoreCenter.length
              });
            }
          }

          // 公司排名
          if (data.hasOwnProperty('companySort') && data.hasOwnProperty('scoreCompany')) {
            const companySort = typeof data['companySort'] === 'number' ? data['companySort'] as number : 0;
            const scoreCompany = Array.isArray(data['scoreCompany']) ? data['scoreCompany'] as any[] : [];
            // 只有当公司排序大于0且scoreCompany数组不为空时才添加
            if (companySort > 0 && scoreCompany.length > 0) {
              items.push({
                name: companyName,
                rank: companySort,
                total: scoreCompany.length
              });
            }
          }

          // 更新rankingItems
          rankingItems.value = items;
        }
      } catch (error) {
        console.error('获取用户排名数据失败:', error);
      }
    };

    // 新增：切换标签
    function switchTab(tab: string) {
      activeTab.value = tab;

      // 当切换到个人排名标签时，获取排名数据
      if (tab === 'ranking') {
        fetchRankingData();
      }
    }

    // 打开自定义日期选择弹窗
    function showCustomDatePicker() {
      showDatePickerPopup.value = true
    }

    function closeDatePicker() {
      showDatePicker.value = false
      showDatePickerPopup.value = false
    }

    // 打开日期选择器
    function openDatePicker() {
      showDatePicker.value = true
    }

    // 获取工单评分状态字典列表
    const loadStatusDictList = async (): Promise<void> => {
        try {
            const result = await getDictDataByType('gxt_scoring_status')
            const resultObj = result as UTSJSONObject

            if (resultObj['code'] == 200) {
                const data = resultObj['data'] as any[]
                const dictData: SysDictData[] = []

                if (data != null && data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        const item = data[i] as UTSJSONObject
                        // 只提取需要的字段
                        const dictItem: SysDictData = {
                            dictValue: item['dictValue'] as string | null,
                            dictLabel: item['dictLabel'] as string | null,
                            dictCode: null,
                            dictSort: null,
                            dictType: null,
                            cssClass: null,
                            listClass: null,
                            isDefault: null,
                            status: null,
                            default: null,
                            createTime: null,
                            remark: null
                        }
                        dictData.push(dictItem)
                    }
                }

                statusDictList.value = dictData
            }
        } catch (e: any) {
            console.error('获取工单评分状态字典失败:', e.message)
        }
    }

    // 获取维保类型字典列表
    const loadInspectionTypeDictList = async (): Promise<void> => {
        try {
            const result = await getDictDataByType('gxt_inspection_type')
            const resultObj = result as UTSJSONObject

            if (resultObj['code'] == 200) {
                const data = resultObj['data'] as any[]
                const dictData: SysDictData[] = []

                if (data != null && data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        const item = data[i] as UTSJSONObject
                        // 只提取需要的字段
                        const dictItem: SysDictData = {
                            dictValue: item['dictValue'] as string | null,
                            dictLabel: item['dictLabel'] as string | null,
                            dictCode: null,
                            dictSort: null,
                            dictType: null,
                            cssClass: null,
                            listClass: null,
                            isDefault: null,
                            status: null,
                            default: null,
                            createTime: null,
                            remark: null
                        }
                        dictData.push(dictItem)
                    }
                }

                inspectionTypeDictList.value = dictData
            }
        } catch (e: any) {
            console.error('获取维保类型字典失败:', e.message)
        }
    }

    // 获取检修类型字典列表
    const loadMaintenanceTypeDictList = async (): Promise<void> => {
        try {
            const result = await getDictDataByType('gxt_maintenance_type')
            const resultObj = result as UTSJSONObject

            if (resultObj['code'] == 200) {
                const data = resultObj['data'] as any[]
                const dictData: SysDictData[] = []

                if (data != null && data.length > 0) {
                    for (let i = 0; i < data.length; i++) {
                        const item = data[i] as UTSJSONObject
                        // 只提取需要的字段
                        const dictItem: SysDictData = {
                            dictValue: item['dictValue'] as string | null,
                            dictLabel: item['dictLabel'] as string | null,
                            dictCode: null,
                            dictSort: null,
                            dictType: null,
                            cssClass: null,
                            listClass: null,
                            isDefault: null,
                            status: null,
                            default: null,
                            createTime: null,
                            remark: null
                        }
                        dictData.push(dictItem)
                    }
                }

                maintenanceTypeDictList.value = dictData
            }
        } catch (e: any) {
            console.error('获取检修类型字典失败:', e.message)
        }
    }

    // Helper function to safely extract properties from item
    function getPropertyValue(item: any | null, propertyName: string): string {
      if (item == null) return ''
      const itemObj = item as UTSJSONObject
      const value = itemObj[propertyName]
      return value != null ? '' + value : ''
    }

    // 获取工单类型文本
    function getWorkOrderTypeText(orderType: string | null): string {
      if (orderType != null) {
        if (orderType == "1") {
          return "维修工单"
        } else if (orderType == "2") {
          return "维保工单"
        }
      }
      return ""
    }

    // 获取工单类型相关信息（维保类型或检修类型）
    function getWorkOrderTypeInfo(item: any | null): string {
      if (item == null) return ''

      const orderType = getPropertyValue(item, 'orderType')

      // 维保工单显示维保类型
      if (orderType == "2") {
        const inspectionType = getPropertyValue(item, 'inspectionType')
        if (inspectionType != null && inspectionType != '') {
          // 如果字典尚未加载，返回原始值
          if (inspectionTypeDictList.value.length == 0) {
            return inspectionType
          }

            // 查找字典中对应的标签
            const dictItem = inspectionTypeDictList.value.find(dict => dict.dictValue == inspectionType)
            return (dictItem != null ? dictItem.dictLabel : inspectionType) as string
        }
      }
      // 维修工单显示检修类型
      else if (orderType == "1") {
        const maintenanceType = getPropertyValue(item, 'maintenanceType')
        if (maintenanceType != null && maintenanceType != '') {
          // 如果字典尚未加载，返回原始值
          if (maintenanceTypeDictList.value.length == 0) {
            return maintenanceType
          }

            // 查找字典中对应的标签
            const dictItem = maintenanceTypeDictList.value.find(dict => dict.dictValue == maintenanceType)
            return (dictItem != null ? dictItem.dictLabel : maintenanceType) as string
        }
      }

      return ""
    }

    // 获取工单状态文本
    function getScoringStatus(item: any | null): string | null {
        if (item == null) return ''
        const rawStatus = getPropertyValue(item, 'scoringStatus')

        if (rawStatus == null || rawStatus == '') return ''

        // 如果字典尚未加载，返回原始值
        if (!dictLoaded.value) {
            return rawStatus
        }

        // 查找字典中对应的标签
        const dictItem = statusDictList.value.find(dict => dict.dictValue == rawStatus)
        return dictItem != null ? dictItem.dictLabel : rawStatus
    }

    // 获取工单评分状态文本
    function getOrderStatusText(status: string | null): string {
      const statusMap: UTSJSONObject = {
        '1': '待自评',
        '2': '待复评',
        '3': '待确认',
        '4': '待终评'
      }

      if (status == null) return ''
      const result = statusMap[status]
      return result != null ? result as string : '未知状态'
    }

    // 获取统计数据
    function getStatistics() {
      // Convert 'current' and 'prev' values to actual date strings
      let monthValue = '';
      if (selectedMonth.value === 'custom') {
        monthValue = customDate.value;
      } else if (selectedMonth.value === 'current') {
          const now = new Date();
          monthValue = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}`;
      } else if (selectedMonth.value === 'prev') {
        const now = new Date();
          const prevMonth = now.getMonth(); // getMonth() returns 0-11
          const prevYear = prevMonth === 0 ? now.getFullYear() - 1 : now.getFullYear();
          const monthStr = prevMonth === 0 ? '12' : prevMonth.toString().padStart(2, '0');
        monthValue = `${prevYear}-${monthStr}`;
      }

      const params: UTSJSONObject = {
        //scoringStatus: statusFilter.value,
        month: monthValue
      }

      getOrderScoreStatistics(params).then((response: any) => {
        const resultObj = response as UTSJSONObject
        const responseData = resultObj['data'] as UTSJSONObject

        if (responseData != null) {
          totalScore.value = (responseData['totalScore'] != null) ? parseFloat((responseData['totalScore'] as number).toFixed(2)) : 0
          maintenanceScore.value = (responseData['maintenanceScore'] != null) ? parseFloat((responseData['maintenanceScore'] as number).toFixed(2)) : 0
          repairScore.value = (responseData['repairScore'] != null) ? parseFloat((responseData['repairScore'] as number).toFixed(2)) : 0
          rank.value = (responseData['rank'] != null) ? responseData['rank'] as number : null
          totalRankingUsers.value = (responseData['totalRankingUsers'] != null) ? responseData['totalRankingUsers'] as number : null
        } else {
          totalScore.value = 0
          maintenanceScore.value = 0
          repairScore.value = 0
          rank.value = null
          totalRankingUsers.value = null
        }
      })
    }

	function onDateConfirm(value: string) {
	  customDate.value = value
	  showDatePicker.value = false
	  showDatePickerPopup.value = false
	  selectedMonth.value = 'custom'

      // 添加防重复调用检查
      if (loading.value) {
        return;
      }

	  getStatistics()
	}

    // 方法
    function loadData(isRefresh: boolean, disablePullDown = false) {
      // 防止重复请求的核心机制 - 参考工单页面的简单有效方式
      if (loading.value) {
        // 确保刷新状态最终被重置，防止卡死
        if (!isRefresh) {
          refreshing.value = false;
        }
        return
      }

      const shouldRefresh = isRefresh !== false

      loading.value = true
      if (shouldRefresh && !disablePullDown) {
        currentPage.value = 1
        refreshing.value = true
      } else if (shouldRefresh && disablePullDown) {
        // 筛选条件变化时，重置页码但不触发下拉刷新
        currentPage.value = 1
        // 即使禁用下拉刷新，也要确保刷新状态最终被重置
        refreshing.value = false
      } else {
        // 对于加载更多操作，不需要显示下拉刷新状态
        refreshing.value = false;
      }

      // Convert 'current' and 'prev' values to actual date strings
      let monthValue = '';
      if (selectedMonth.value === 'custom') {
        monthValue = customDate.value;
      } else if (selectedMonth.value === 'current') {
        const now = new Date();
        const m = now.getMonth() + 1
        let mStr = m.toString()
        if (m < 10) {
          mStr = '0' + mStr
        }
        monthValue = `${now.getFullYear()}-${mStr}`;
      } else if (selectedMonth.value === 'prev') {
        const now = new Date();
        const prevMonth = now.getMonth(); // getMonth() returns 0-11
        const prevYear = prevMonth === 0 ? now.getFullYear() - 1 : now.getFullYear();
        let monthStr = prevMonth === 0 ? '12' : prevMonth.toString()
        if (prevMonth !== 0 && prevMonth < 10) {
          monthStr = '0' + monthStr
        }
        monthValue = `${prevYear}-${monthStr}`;
      }

      const params: UTSJSONObject = {
        pageNum: currentPage.value,
        pageSize: 5,
        keyword: searchKeyword.value,
        scoringStatus: statusFilter.value,
        month: monthValue
      }

      listMobileOrderScores(params).then((response: any) => {
        // 提取响应数据
        const resultObj = response as UTSJSONObject
        console.log('API响应数据:', resultObj)
        const responseData = resultObj['rows'] as any[]
        const responseTotal = resultObj['total'] as number

        if (shouldRefresh) {
          orderList.value = Array.isArray(responseData) ? responseData : []
        } else {
          const currentRows = Array.isArray(responseData) ? responseData : []
          orderList.value = [...orderList.value, ...currentRows]
        }

        hasMore.value = orderList.value.length < responseTotal
      }).catch((error) => {
        console.error('获取工单列表失败:', error);
        // 出错时也需要重置刷新状态
        if (shouldRefresh) {
          refreshing.value = false;
          isRefreshing.value = false;
        }
      }).finally(() => {
        // 无论成功还是失败，都重置所有加载状态
        loading.value = false;
        // 确保刷新状态最终被重置
        if (shouldRefresh) {
          refreshing.value = false;
          // 使用setTimeout确保状态彻底重置
          setTimeout(() => {
            isRefreshing.value = false;
          }, 50);
        }
      })
    }

    function handleSearch() {
      // 添加防重复调用检查
      if (loading.value) {
        return;
      }

      // 添加防抖和防止重复请求
      if (isSearching.value) {
        return
      }

      const timer = searchTimer
      if (timer != null) {
        clearTimeout(timer)
        searchTimer = null
      }

      searchTimer = setTimeout(() => {
        isSearching.value = true
        loadData(true, true); // 添加true参数表示这是筛选条件变化触发的加载，应禁用下拉刷新
        // 延迟重置标志位，确保请求发送后才允许下一次搜索
        setTimeout(() => {
          isSearching.value = false
        }, 100)
      }, 300)
    }

    function clearSearch() {
      // 添加防重复调用检查
      if (loading.value) {
        return;
      }

      // 添加防抖和防止重复请求
      if (isSearching.value) {
        return
      }

      const timer = searchTimer
      if (timer != null) {
        clearTimeout(timer)
        searchTimer = null
      }

      searchKeyword.value = ""
      searchTimer = setTimeout(() => {
        isSearching.value = true
        loadData(true, true); // 添加true参数表示这是筛选条件变化触发的加载，应禁用下拉刷新
        // 延迟重置标志位，确保请求发送后才允许下一次搜索
        setTimeout(() => {
          isSearching.value = false
        }, 100)
      }, 300)
    }

    function filterByStatus(status: string) {
      // 添加防重复调用检查
      if (loading.value) {
        return;
      }

      // 添加防止重复请求
      if (isSearching.value) {
        return
      }

      const timer = searchTimer
      if (timer != null) {
        clearTimeout(timer)
        searchTimer = null
      }

      statusFilter.value = status
      searchTimer = setTimeout(() => {
        isSearching.value = true
        loadData(true, true); // 添加true参数表示这是筛选条件变化触发的加载，应禁用下拉刷新
        getStatistics()
        // 延迟重置标志位，确保请求发送后才允许下一次搜索
        setTimeout(() => {
          isSearching.value = false
        }, 100)
      }, 300)
    }

	function changeMonth(month: string) {
	  // 添加防重复调用检查
      if (loading.value) {
        return;
      }

	  // 添加防止重复请求
	  if (isSearching.value) {
	    return
	  }

      const timer = searchTimer
      if (timer != null) {
        clearTimeout(timer)
        searchTimer = null
      }

      selectedMonth.value = month
      searchTimer = setTimeout(() => {
        getStatistics()
      }, 300)
	}

    function loadMore() {
      console.log("loadMore被触发")
      if (!hasMore.value || loading.value) return

      currentPage.value++
      loadData(false)
    }

    function handleRefresh() {
      console.log("handleRefresh被触发")
      console.log("loading.value===",loading.value)
      console.log("isRefreshing.value===",isRefreshing.value)

      // 防抖处理，避免频繁触发
      const now = Date.now();
      if (now - lastRefreshTime.value < 1000) {
        console.log("刷新操作过于频繁，忽略本次触发");
        refreshing.value = false;
        return;
      }
      lastRefreshTime.value = now;

      // 添加防重复调用检查
      if (loading.value || isRefreshing.value) {
        // 如果已经在加载或正在刷新，直接重置刷新状态
        refreshing.value = false;
        return;
      }
      console.log("loading.value1===",loading.value)
        console.log("isRefreshing.value1===",isRefreshing.value)
      // 设置刷新标志
      isRefreshing.value = true;

      loadData(true); // 使用默认的下拉刷新行为

      // 确保在一定时间后重置刷新标志，防止意外情况
      setTimeout(() => {
        isRefreshing.value = false
      }, 100) // 延迟重置，确保状态完全更新
    }

    // 点击列表项
    function handleItemClick(item: any | null, index: number): void {
      if (item == null) return
      const itemObj = item as UTSJSONObject
      const id = itemObj.get('id')
      const orderType = itemObj.get('orderType')
      if (id != null && orderType != null) {
        // 转换为字符串
        const idStr = '' + id
        const orderTypeStr = '' + orderType
        uni.navigateTo({
          url: `/pages/score/detail/index?id=${idStr}&orderType=${orderTypeStr}`
        })
      }
    }

    function formatNumber(value: number | null) {
      if (value === null) return '0.0'
      return value.toFixed(2)
    }

	// 获取工单评分状态样式类
	function getStatusClass(item: any | null): string {
	    if (item == null) return ''
	    const rawStatus = getPropertyValue(item, 'scoringStatus')
	    if (rawStatus == null || rawStatus == '') return ''
	    return `status-${rawStatus}`
	}

	function formatDate(dateString: string) {
	  if (dateString == '' || dateString == null) return ''
	  const date = new Date(dateString)
	  const year = date.getFullYear()
	  const month = (date.getMonth() + 1).toString().padStart(2, '0')
	  const day = date.getDate().toString().padStart(2, '0')
	  const hours = date.getHours().toString().padStart(2, '0')
	  const minutes = date.getMinutes().toString().padStart(2, '0')
	  return `${year}-${month}-${day} ${hours}:${minutes}`
	}

    // 生命周期
    //onMounted(() => {
    onLoad((options: any) => {
        // 检查权限设置tabbar
        tabbar[2] = checkPermi(['gxt:app:worktime']) ? 1 : 0
        tabbar[3] = checkPermi(['gxt:app:score']) ? 1 : 0

        loadStatusDictList()
        loadInspectionTypeDictList()
        loadMaintenanceTypeDictList()
        loadData(false)
        getStatistics()
        dictLoaded.value = true

        // 获取初始排名数据
        fetchRankingData();
    })

    // 组件销毁时清除定时器
    onBeforeUnmount(() => {
      const timer = searchTimer
      if (timer != null) {
        clearTimeout(timer)
        searchTimer = null
      }

      // 如果组件销毁前还有未完成的刷新操作，确保状态被重置
      loading.value = false;
      refreshing.value = false;
      isRefreshing.value = false;
    })

    // 获取排名类型(dept, center, company)
    function getRankingType(index: number): string {
      // 根据索引返回对应的排名类型
      if (index === 0) return 'dept';
      if (index === 1) return 'center';
      if (index === 2) return 'company';
      return 'dept'; // 默认返回部门排名
    }

    // 跳转到排名详情页面
    function goToRankingDetail(type: string) {
		console.log("type======",type)
      uni.navigateTo({
        url: `/pages/score/ranking?type=${type}`
      })
    }

</script>

<style lang="scss">
.list-page {
  flex: 1;
  background-color: #e8f0f9;
  padding-bottom: 150rpx; // 为底部 TabBar 留出空间
}

/* 搜索栏样式 */
.search-bar {
  padding: 20rpx 30rpx;
  background-color: #d7eafe;
}

.search-box {
  flex-direction: row;
  align-items: center;
  height: 72rpx;
  padding: 0 24rpx;
  background-color: #f5f5f5;
  border-radius: 36rpx;

  .search-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
  }

  .search-input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
  }

  .clear-icon {
    margin-left: 12rpx;
    font-size: 28rpx;
    color: #999999;
  }
}

/* 工单状态筛选 */
.status-bar {
  padding-bottom: 10px;
  padding-left: 30rpx;
  background-color: #d7eafe;
}

.status-box {
  flex-direction: row;
  align-items: center;
  height: 72rpx;
  flex: 1;

  .status-txt {
    padding: 8px 12px;
    text-align: center;
    margin-right: 12rpx;
    border-radius: 36rpx;
    background-color: #fff;
    font-size: 28rpx;
  }

  .stauts-sel {
    background-color: #007AFF;
    color: #fff;
  }
}

/* 工分统计 */
.stats-section {
  margin: 15rpx 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx;
}

/* 标签切换样式 */
.stats-tabs {
  display: flex;
  flex-direction: row;
  border-bottom: 2rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.tab-item {
  padding: 15rpx 30rpx;
  font-size: 30rpx;
  color: #666;
  position: relative;
}

.tab-active {
  color: #165dff;
  font-weight: bold;
}

.tab-active::after {
  content: '';
  position: absolute;
  bottom: -2rpx;
  left: 0;
  right: 0;
  height: 6rpx;
  background-color: #165dff;
  border-radius: 3rpx;
}

.stats-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.stats-title {
  font-size: 32rpx;
  font-weight: bold;
  flex: 1;
}

.month-filters {
  flex-direction: row;
  justify-content: flex-end;
  display: flex;
}

.month-tab {
	white-space: nowrap;
	margin: 0 8rpx;
	border-radius: 24rpx;
	background-color: #f2f3f5;
}

.month-filter {
  padding: 6rpx 12rpx;
  font-size: 24rpx;
  color: #666;
}

.month-filter-sel {
  background-color: #165dff;
  color: white;
}

.stats-content {
  margin-top: 20rpx;
  flex-direction: column;
}

.total-score {
  margin-bottom: 30rpx;
  flex-direction: column;
  align-items: center;
}

.score-label {
  font-size: 28rpx;
  color: #666;
  display: flex;
  margin-bottom: 8rpx;
}

.score-value {
  display: flex;
  font-size: 48rpx;
  font-weight: bold;
  color: #165dff;
  line-height: 1.2;
}

.score-breakdown {
  flex-direction: row;
  justify-content: space-between;
}

.breakdown-item {
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.breakdown-label {
  display: flex;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
}

.breakdown-value {
  font-size: 28rpx;
  color: #666;
  display: flex;
  margin-bottom: 8rpx;
}

/* 列表项样式 */
.list-item {
  margin: 12rpx 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}

.item-container {
  padding: 30rpx;
}

.item-header {
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 16rpx;

  .item-title {
    font-size: 30rpx;
    color: #333333;
    font-weight: bold;
    flex-wrap: wrap;
    flex: 0 1 70%;
    min-width: 0;
  }

  .info-value {
    font-size: 28rpx;
    color: #999999;
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.info-row {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .info-label {
    font-size: 26rpx;
    color: #666;
  }

  .info-value-row {
    flex-direction: row;
    align-items: center;
  }

  .score-text {
    font-size: 28rpx;
    color: #ff9900;
    font-weight: bold;
    margin-right: 20rpx;
  }

  .status-text {
    font-size: 24rpx;
    padding: 4rpx 10rpx;
    border-radius: 24rpx;
    background-color: #f2f3f5;
    color: #666;
  }
}

.text-gray{
  font-size: 26rpx;
  color: #666;
}

/* 日期选择弹窗 */
.date-picker-popup {
  background-color: white;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 40rpx;
  // padding-bottom: 40rpx;
  // margin-bottom: 150rpx; /* 提高弹窗，避免被底部导航栏遮挡 */
  min-height: 750rpx;
  box-sizing: border-box; // 确保padding不撑大容器
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  width: 100%;
}

.popup-title {
	font-size: 34rpx;
	font-weight: bold;
	flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup-actions {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  flex: 0 0 auto;
}

.popup-btn {
  white-space: nowrap;
  flex: 0 0 auto; // 不伸缩，保持原有宽度
}

.cancel-btn {
	color: #999;
	padding: 10rpx 20rpx;
	font-size: 30rpx;
	font-weight: bold;
	// 核心修复：强制文字不换行
	white-space: nowrap !important;
    // 可选：固定按钮最小宽度，避免极端情况挤压
    min-width: 120rpx; 
	text-align: center;
}

.confirm-btn {
  color: #165dff;
  padding: 10rpx 20rpx;
  font-weight: bold;
}

.date-picker-container {
  padding: 20rpx 0;
  padding-bottom: env(safe-area-inset-bottom); // 适配安全区域
}

.date-picker-item {
  margin-bottom: 40rpx;
}

.date-label {
  display: flex;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  color: #333;
}

.date-display {
  width: 100%;
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 32rpx;
  color: #333;
}

// 添加底部填充的类
.list-with-padding {
  padding-bottom: 40rpx;
}

/* 工单评分状态标签样式 */
.status-tag {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  white-space: nowrap;
  margin-left: 70rpx;
  border: 1rpx solid;
}

/* 待自评 */
.status-to_self {
  background-color: #fff7e6;
  color: #fa8c16;
  border-color: #ffd591;
}

/* 待复评 */
.status-to_re {
  background-color: #ebf5ff;
  color: #409eff;
  border-color: #d8ebff;
}

/* 待确认 */
.status-to_confirm {
  background-color: #f0f9eb;
  color: #5cb87a;
  border-color: #c2e7b0;
}


/* 待终评 */
.status-to_final {
  background-color: #ebf5ff;
  color: #409eff;
  border-color: #d8ebff;
}

/* 待归档 */
.status-to_archive {
  background-color: #f0f9eb;
  color: #5cb87a;
  border-color: #c2e7b0;
}

/* 已归档 */
.status-archived {
  background-color: #f0f9eb;
  color: #5cb87a;
  border-color: #c2e7b0;
}

/* 申诉中 */
.status-appealing {
  background-color: #ffcfc2;
  color: #ff0000;
  border-color: #ff7446;
}

/* 个人排名模块样式 */
.ranking-item-wrapper {
  padding: 5rpx 30rpx;
  margin-bottom: 5rpx;
  background: transparent;
}

.ranking-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 10rpx 0;
}

.module-title {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 0;
  text-align: center;
}

.ranking-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding-left: 0;
  margin-left: 0;
}



.ranking-name {
  color: #000000;
  font-size: 32rpx;
  font-weight: normal;
  flex: 1;
  margin-left: 20rpx;
}

.ranking-number {
  background: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ranking-circle-wrapper {
  width: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ranking-number.size-1 {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
}

.ranking-number.size-2 {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
}

.ranking-number.size-3 {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}

.ranking-number-text {
  color: #ffffff;
  font-weight: normal;
  text-align: center;
  font-size: 28rpx;
}

.ranking-number.size-1 .ranking-number-text {
  font-size: 18rpx;
}

.ranking-number.size-2 .ranking-number-text {
  font-size: 20rpx;
}

.ranking-number.size-3 .ranking-number-text {
  font-size: 22rpx;
}

.ranking-label {
  color: #ff0000;
  font-size: 32rpx;
  white-space: nowrap;
  margin-left: 20rpx;
}

.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
}

.no-data-text {
  font-size: 28rpx;
  color: #999;
}
</style>