gxt_app/pages/worktime/index.uvue

<template>
  <uni-navbar-lite :showLeft=false title="工时"></uni-navbar-lite>
  <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="handleSearchWithPrevent"
        />
        <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': orderTypeFilter === '' }"
          @click="filterByOrderTypeWithCheck('')"
        >
          全部
        </text>
        <text
          class="status-txt"
          :class="{ 'stauts-sel': orderTypeFilter === '1' }"
          @click="filterByOrderTypeWithCheck('1')"
        >
          维修工单
        </text>
        <text
          class="status-txt"
          :class="{ 'stauts-sel': orderTypeFilter === '2' }"
          @click="filterByOrderTypeWithCheck('2')"
        >
          维保工单
        </text>
      </view>
    </view>

    <!-- 工时统计 -->
    <view class="stats-section">
      <view class="stats-header">
        <text class="stats-title">{{ timeRangeTitle }}工时统计</text>
        <view class="time-filters">
          <text
            class="time-filter"
            :class="{ 'time-filter-sel': timeRange === 'week' }"
            @click="changeTimeRangeWithCheck('week')"
          >
            本周
          </text>
          <text
            class="time-filter"
            :class="{ 'time-filter-sel': timeRange === 'month' }"
            @click="changeTimeRangeWithCheck('month')"
          >
            本月
          </text>
          <text
            class="time-filter"
            :class="{ 'time-filter-sel': timeRange === 'custom' }"
            @click="showCustomDatePickerWithCheck"
          >
            自定义
          </text>
        </view>
      </view>

      <!-- 统计数据 -->
      <view class="stats-content">
        <view class="total-hours">
          <text class="hours-value">{{ totalHours }}小时</text>
          <text class="hours-label">{{ timeRangeTitle }}总工时</text>
        </view>

        <view class="hours-breakdown">
          <view v-if="orderTypeFilter !== '1'" class="breakdown-item">
            <text class="breakdown-label">维保工时</text>
            <text class="breakdown-value">{{ maintenanceHours }}小时</text>
          </view>
          <view v-if="orderTypeFilter !== '2'" class="breakdown-item">
            <text class="breakdown-label">维修工时</text>
            <text class="breakdown-value">{{ repairHours }}小时</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>

    <!-- 工单列表 -->
    <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, 'workOrderProjectNo') }}-风机编号{{ getPropertyValue(item, 'pcsDeviceName') }}的{{ getWorkOrderTypeText(getPropertyValue(item, 'orderType')) }}</text>
              <text class="status-tag" :class="getStatusClass(item)">{{ getWorkOrderStatus(item) }}</text>
            </view>
			<view class="info-row">
			  <view class="info-label">
			    <text class="text-gray">{{ getWorkOrderTypeInfo(item) }}</text>
			  </view>
			</view>
            <view class="info-row">
              <view class="info-label">
                <text class="text-gray">下发时间: {{ getPropertyValue(item, 'assignTime') }}</text>
              </view>
              <view class="info-value">
                <text class="text-gray">处理时长: {{ formatNumber(parseFloat(getPropertyValue(item, 'handleHour'))) }}小时</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">
            <text class="confirm-btn" @click="confirmCustomDate">确定</text>
            <text class="cancel-btn" @click="closeDatePicker">取消</text>
          </view>
        </view>

        <view class="date-picker-container">
          <view class="date-picker-item">
            <text class="date-label">开始时间</text>
            <view class="date-display" @click="openStartDatePicker">
              {{ startDate != null && startDate != '' ? startDate : '请选择开始时间' }}
            </view>
          </view>

          <view class="date-picker-item">
            <text class="date-label">结束时间</text>
            <view class="date-display" @click="openEndDatePicker">
              {{ endDate != null && endDate != '' ? endDate : '请选择结束时间' }}
            </view>
          </view>
        </view>
      </view>
    </l-popup>

    <!-- Start Date Picker -->
    <l-popup v-model="showStartDatePicker" position="bottom">
      <l-date-time-picker
        :mode="7"
        format="YYYY-MM-DD"
        :modelValue="startDate"
        confirm-btn="确定"
        cancel-btn="取消"
        @confirm="onStartDateConfirm"
        @cancel="showStartDatePicker = false">
      </l-date-time-picker>
    </l-popup>

    <!-- End Date Picker -->
    <l-popup v-model="showEndDatePicker" position="bottom">
      <l-date-time-picker
        :mode="7"
        format="YYYY-MM-DD"
        :modelValue="endDate"
        confirm-btn="确定"
        cancel-btn="取消"
        @confirm="onEndDateConfirm"
        @cancel="showEndDatePicker = false">
      </l-date-time-picker>
    </l-popup>

    <!-- 底部 TabBar -->
    <custom-tabbar :current="2" />
  </view>
</template>

<script setup lang="uts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { listOrderHours, getOrderHourStatistics } from '@/api/worktime/index'
import { getDictDataByType } from '@/api/dict/index'
import type { SysDictData } from '@/types/dict'

// 数据状态
const searchKeyword = ref<string>('')
const orderTypeFilter = ref<string>('')
const timeRange = ref<string>('month')
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 totalHours = ref<number>(0)
const maintenanceHours = ref<number>(0)
const repairHours = ref<number>(0)
const rank = ref<number | null>(null)
const totalRankingUsers = ref<number | null>(null)

// 防止重复请求的标志位
const isSearching = ref<boolean>(false)
const isRequestPending = ref<boolean>(false)

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

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

// 自定义日期表单
const startDate = ref<string>('')
const endDate = ref<string>('')

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

// 计算属性
const timeRangeTitle = computed(() => {
  switch (timeRange.value) {
    case 'week':
      return '本周'
    case 'month':
      return '本月'
    case 'custom':
      return '自定义'
    default:
      return '本月'
  }
})

// 获取工单状态字典列表
const loadStatusDictList = async (): Promise<void> => {
    try {
        const result = await getDictDataByType('gxt_work_order_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
            dictLoaded.value = true
        }
    } catch (e: any) {
        console.error('获取工单状态字典失败:', e.message)
        dictLoaded.value = true
    }
}

// 获取维保类型字典列表
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 getWorkOrderStatus(item: any | null): string | null {
    if (item == null) return ''
    const rawStatus = getPropertyValue(item, 'workOrderStatus')

    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 getStatusClass(item: any | null): string {
    if (item == null) return ''
    const rawStatus = getPropertyValue(item, 'workOrderStatus')
    if (rawStatus == null || rawStatus == '') return ''
    return `status-${rawStatus}`
}

// 获取统计数据
function getStatistics() {
  const params: UTSJSONObject = {
    //keyword: searchKeyword.value,
    orderType: orderTypeFilter.value,
    timeRange: timeRange.value
  }

  if (timeRange.value === 'custom') {
    params.beginDate = startDate.value
    params.endDate = endDate.value
  }

  // 添加 finally 块确保状态始终会被重置
  getOrderHourStatistics(params).then((response: any) => {
    const resultObj = response as UTSJSONObject
    const responseData = resultObj['data'] as UTSJSONObject

    if (responseData != null) {
      totalHours.value = (responseData['totalHours'] != null) ? parseFloat((responseData['totalHours'] as number).toFixed(1)) : 0
      maintenanceHours.value = (responseData['maintenanceHours'] != null) ? parseFloat((responseData['maintenanceHours'] as number).toFixed(1)) : 0
      repairHours.value = (responseData['repairHours'] != null) ? parseFloat((responseData['repairHours'] as number).toFixed(1)) : 0
      rank.value = (responseData['rank'] != null) ? responseData['rank'] as number : null
      totalRankingUsers.value = (responseData['totalRankingUsers'] != null) ? responseData['totalRankingUsers'] as number : null
    } else {
      totalHours.value = 0
      maintenanceHours.value = 0
      repairHours.value = 0
      rank.value = null
      totalRankingUsers.value = null
    }
  }).catch((error) => {
    console.error('获取工时统计数据失败:', error);
    // 发生错误时也要重置数据
    totalHours.value = 0
    maintenanceHours.value = 0
    repairHours.value = 0
    rank.value = null
    totalRankingUsers.value = null;
  }).finally(() => {
    // 统计数据获取完成，无特定加载状态需要重置
  })
}

// 方法
function loadData(isRefresh: boolean) {
  // 防止重复请求的核心机制
  if (loading.value || isRequestPending.value) {
    return
  }
  
  // iOS防抖处理，避免短时间内重复请求
  const currentTime = new Date().getTime();
  if (currentTime - lastRequestTime < 300) { // 300ms内不重复请求
    return;
  }
  lastRequestTime = currentTime;
  
  isRequestPending.value = true;
  const shouldRefresh = isRefresh !== false

  loading.value = true
  if (shouldRefresh) {
    currentPage.value = 1
    refreshing.value = true
  } else {
    // 对于加载更多操作，不需要显示下拉刷新状态
    refreshing.value = false;
  }

  const params: UTSJSONObject = {
    pageNum: currentPage.value,
    pageSize: 5,
    keyword: searchKeyword.value,
    orderType: orderTypeFilter.value,
    timeRange: timeRange.value
  }

  if (timeRange.value === 'custom') {
    params.beginDate = startDate.value
    params.endDate = endDate.value
  }

  // 添加 finally 块确保状态始终会被重置
  listOrderHours(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);
  }).finally(() => {
    // 无论成功还是失败，都重置所有加载状态
    loading.value = false;
    refreshing.value = false;
    isRequestPending.value = false;
  })
}

function handleSearch() {
  const timer = searchTimer
  if (timer != null) {
    clearTimeout(timer)
  }
  searchTimer = setTimeout(() => {
    loadData(true)
    getStatistics()
  }, 500)
}

// 防止iOS中input事件多次触发
const handleSearchWithPrevent = (() => {
  let lastCall = 0;
  return () => {
    const now = new Date().getTime();
    if (now - lastCall < 500) { // 500ms内最多执行一次
      return;
    }
    lastCall = now;
    handleSearch();
  };
})();

function clearSearch() {
  const timer = searchTimer
  if (timer != null) {
    clearTimeout(timer)
  }
  searchKeyword.value = ""
  searchTimer = setTimeout(() => {
    loadData(true)
    getStatistics()
  }, 500)
}

function filterByOrderType(type: string) {
  const timer = searchTimer
  if (timer != null) {
    clearTimeout(timer)
  }
  orderTypeFilter.value = type
  searchTimer = setTimeout(() => {
    loadData(true)
    getStatistics()
  }, 500)
}

function changeTimeRange(range: string) {
  const timer = searchTimer
  if (timer != null) {
    clearTimeout(timer)
  }
  timeRange.value = range
  searchTimer = setTimeout(() => {
    loadData(true)
    getStatistics()
  }, 500)
}

function filterByOrderTypeWithCheck(type: string) {
  // 防止重复点击触发多次请求
  if (orderTypeFilter.value === type) {
    return;
  }
  filterByOrderType(type);
}

function changeTimeRangeWithCheck(range: string) {
  // 防止重复点击触发多次请求
  if (timeRange.value === range) {
    return;
  }
  changeTimeRange(range);
} 

function loadMore() {
  if (!hasMore.value || loading.value) return

  currentPage.value++
  loadData(false)
}

function handleRefresh() {
  loadData(true)
}

function showCustomDatePicker() {
  // 初始化日期值
  if (startDate.value == '' || endDate.value == '') {
    const now = new Date()
    const year = now.getFullYear()
    const month = (now.getMonth() + 1).toString().padStart(2, '0')
    const day = now.getDate().toString().padStart(2, '0')
    endDate.value = `${year}-${month}-${day}`

    // 默认开始日期为7天前
    const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
    const weekAgoYear = weekAgo.getFullYear()
    const weekAgoMonth = (weekAgo.getMonth() + 1).toString().padStart(2, '0')
    const weekAgoDay = weekAgo.getDate().toString().padStart(2, '0')
    startDate.value = `${weekAgoYear}-${weekAgoMonth}-${weekAgoDay}`
  }

  showDatePickerPopup.value = true
}

function closeDatePicker() {
  showStartDatePicker.value = false
  showEndDatePicker.value = false
  showDatePickerPopup.value = false
}

function confirmCustomDate() {
  if (startDate.value == null || startDate.value == '' || endDate.value == null || endDate.value == '') {
    uni.showToast({ title: '请选择开始时间和结束时间', icon: 'none' })
    return
  }

  if (startDate.value != null && endDate.value != null && new Date(startDate.value as string) > new Date(endDate.value as string)) {
    uni.showToast({ title: '开始时间不能大于结束时间', icon: 'none' })
    return
  }

  closeDatePicker()
  timeRange.value = 'custom'
  
  const timer = searchTimer
  if (timer != null) {
    clearTimeout(timer)
  }
  searchTimer = setTimeout(() => {
    loadData(true)
    getStatistics()
  }, 500)
}

function showCustomDatePickerWithCheck() {
  // 防止重复点击触发多次请求
  if (timeRange.value === 'custom') {
    // 重新选择日期
    showCustomDatePicker();
    return;
  }
  showCustomDatePicker();
}

// 打开开始日期选择器
function openStartDatePicker() {
  showStartDatePicker.value = true
}

// 打开结束日期选择器
function openEndDatePicker() {
  showEndDatePicker.value = true
}

function onStartDateConfirm(value: string) {
  // 检查结束时间是否小于新的开始时间
  if (endDate.value != null && endDate.value != '' && new Date(value) > new Date(endDate.value as string)) {
    uni.showToast({ title: '开始时间不能大于结束时间', icon: 'none' })
    return
  }

  startDate.value = value
  showStartDatePicker.value = false
}

function onEndDateConfirm(value: string) {
  // 检查新的结束时间是否小于开始时间
  if (startDate.value != null && startDate.value != '' && new Date(startDate.value as string) > new Date(value)) {
    uni.showToast({ title: '结束时间不能小于开始时间', icon: 'none' })
    return
  }

  endDate.value = value
  showEndDatePicker.value = false
}

// 点击列表项
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/worktime/detail/index?id=${idStr}&orderType=${orderTypeStr}`
    })
  }
}

function getOrderStatusText(status: string): string {
  const statusMap: UTSJSONObject = {
    '1': '待接单',
    '2': '进行中',
    '3': '已完成',
    '4': '已关闭'
  }
  const result = statusMap[status]
  return result != null ? result as string : '未知状态'
}

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}`
}

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

// 获取工单类型相关信息（维保类型或检修类型）
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 ""
}

// 生命周期
onMounted(() => {
  loadStatusDictList()
  loadInspectionTypeDictList()
  loadMaintenanceTypeDictList()
  loadData(false)
  getStatistics()
  dictLoaded.value = true
})

// 组件销毁时清除定时器
onBeforeUnmount(() => {
  const timer = searchTimer
  if (timer != null) {
    clearTimeout(timer)
  }
  searchTimer = null
})
</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-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

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

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

.time-filter {
  padding: 6rpx 16rpx;
  margin-left: 12rpx;
  font-size: 24rpx;
  border-radius: 24rpx;
  background-color: #f2f3f5;
  color: #666;
  white-space: nowrap;
}

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

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

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

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

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

.hours-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 {
    font-size: 26rpx;
    color: #666;
  }
}

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

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

/* 待接单 */
.status-assigned {
  background-color: #ebf5ff;
  color: #409eff;
  border-color: #d8ebff;
}

/* 待结单 */
.status-to_finish {
  background-color: #fff7e6;
  color: #fa8c16;
  border-color: #ffd591;
}

/* 待审批 */
.status-to_approve {
  background-color: #fff7e6;
  color: #fa8c16;
  border-color: #ffd591;
}

/* 已挂起 */
.status-suspended {
  background-color: #fff2f0;
  color: #ff4d4f;
  border-color: #ffccc7;
}

/* 已完成 */
.status-completed {
  background-color: #f0f9eb;
  color: #5cb87a;
  border-color: #c2e7b0;
}

/* 待下发 */
.status-to_issue {
  background-color: #f4f4f5;
  color: #909399;
  border-color: #e9e9eb;
}

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

/* 日期选择弹窗 */
.date-picker-popup {
  background-color: white;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  padding: 40rpx;
  padding-bottom: 40rpx;
  margin-bottom: 150rpx;
}

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

  .popup-title {
    font-size: 34rpx;
    font-weight: bold;
  }

.popup-actions {
  display: flex;
  flex-direction: row;
}

.cancel-btn {
  color: #999;
  padding: 10rpx 20rpx;
}

  .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;
}
</style>