<script setup lang="ts">
import { ref } from 'vue'

// 定义组件参数
interface Props {
  /** 列表数据 */
  data: {
    id: string
    title: string
    statusName: string
    orderNo: string
    userName: string
    createTime: string
  }[]
}

const props = defineProps<Props>()

// 定义事件
const emit = defineEmits<{
  /** 刷新事件 */
  (e: 'refresh'): void
  /** 筛选事件 */
  (e: 'filter'): void
  /** 筛选确定事件 */
  (e: 'filter-confirm'): void
  /** 筛选取消事件 */
  (e: 'filter-cancel'): void
  /** 重置事件 */
  (e: 'reset'): void
  /** 滚动到底部事件 */
  (e: 'load-more'): void
}>()

// 筛选框显示状态
const showFilter = ref(false)
// 下拉刷新状态
const refresherTriggered = ref(false)

// 处理刷新点击
function handleRefresh() {
  refresherTriggered.value = true
  emit('refresh')
  setTimeout(() => {
    refresherTriggered.value = false
  }, 1000)
}

// 处理筛选点击
function handleFilter() {
  showFilter.value = !showFilter.value
  emit('filter')
}

// 处理筛选确定
function handleFilterConfirm() {
  showFilter.value = false
  emit('filter-confirm')
}

// 处理筛选取消
function handleFilterCancel() {
  showFilter.value = false
  emit('filter-cancel')
}

// 处理重置
function handleReset() {
  emit('reset')
}

// 跳转到工单详情页面
function navigateToDetail(item) {
  let urlParams = `?id=${item.id}&button=${item.button}&taskId=${item.taskId}`
  if (item.delayId) {
    urlParams += `&delayId=${item.delayId}`
  }
  if (item.detailType === 'task') {
    if(item.taskId){
      uni.navigateTo({
        url: `/pages/schedule/details/index?id=${item.taskId}`
      })
    } else {
      uni.showToast({
        title: '任务ID不存在',
        icon: 'none',
      })
    }
  } else {
    uni.navigateTo({
      url: `/pages/archive/order/detail${urlParams}`
    })
  }
  
 
}

// 获取状态对应的样式
function getStatusStyle(statusName: string) {
  // 状态样式映射
  const statusStyles: Record<string, { color: string, backgroundColor: string }> = {
    '新工单': { color: '#4CAF50', backgroundColor: '#E8F5E9' },
    '待处理': { color: '#FF9500', backgroundColor: '#FEF4EB' },
    '已完结': { color: '#3498DB', backgroundColor: '#F0F7FF' },
    '未审批': { color: '#FF4D4F', backgroundColor: '#FFF2F0' },
    '已同意': { color: '#2ECC41', backgroundColor: '#E6F5E6' },
    '已拒绝': { color: '#FF9800', backgroundColor: '#FFF5E6' },
    '已废除': { color: '#9E9E9E', backgroundColor: '#F5F5F5' },
    '待完成': { color: '#FF9800', backgroundColor: '#FFF5E6' },
    '逾期完成': { color: '#FF9800', backgroundColor: '#FFF5E6' },
    '按时完成': { color: '#178AE8', backgroundColor: '#F0F7FF' },
    // 可以根据实际需求添加更多状态样式
  }
  
  // 如果状态存在于映射中，返回对应的样式，否则返回默认样式
  return statusStyles[statusName] || { color: '#666', backgroundColor: '#F5F5F5' }
}
</script>

<template>
  <view class="jiayi-list">
    <!-- 列表卡片 -->
    <scroll-view
      scroll-y
      class="scroll-container"
      :refresher-enabled="true"
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="handleRefresh"
      @scrolltolower="emit('load-more')"
    >
      <!-- 空状态提示 -->
      <view v-if="data.length === 0" class="empty-state">
        <wd-icon name="a-controlplatform" size="80rpx" color="#CCCCCC"></wd-icon>
        <text class="text-gray-500 text-lg mt-4">暂无数据</text>
        <text class="text-gray-400 text-sm mt-2">请尝试刷新或调整筛选条件</text>
      </view>
      
      <!-- 列表数据 -->
      <wd-card
        v-else
        v-for="item in data"
        :key="item.id"
        :border="true"
        :shadow="false"
        style="margin: 16rpx 0;"
        :style="{ backgroundColor: getStatusStyle(item.statusName).backgroundColor }"
        @click="navigateToDetail(item)">
        <view class="card-content">
          <!-- 第一行：标题和状态 -->
          <view class="flex justify-between items-center mb-3" style="height: 40rpx;">
            <text class="font-bold text-lg text-black">{{ item.title }}</text>
            <text :style="{ color: getStatusStyle(item.statusName).color }" class="text-sm">{{ item.statusName }}</text>
          </view>
          
          <!-- 第二行：工单编号 -->
          <view class="flex justify-between items-center mb-3">
            <text class="text-sm text-gray-400">{{ item.orderNo }}</text>
          </view>
          
          <!-- 第三行：用户名和创建时间 -->
          <view class="flex items-center">
            <text class="text-sm text-gray-600 flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap pr-2">{{ item.userName }}</text>
            <text class="text-sm text-gray-600 w-20 text-right">{{ item.createTime.split(' ')[0] }}</text>
          </view>
        </view>
      </wd-card>
      
      <!-- 加载更多提示 -->
      <view v-if="data.length > 0 && $parent.loadingMore" class="load-more">
        <wd-loading size="small" type="ring" />
        <text class="ml-2 text-sm text-gray-600">加载中...</text>
      </view>
      <view v-if="data.length > 0 && !$parent.hasMore && ($parent.listData && $parent.listData.length > 0)" class="load-more">
        <text class="text-sm text-gray-600">没有更多数据了</text>
      </view>
    </scroll-view>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="refresh-btn" @click="handleRefresh">
        <wd-button type="icon" icon="refresh"  style="color: #fff;"></wd-button>
      </view>
      <view class="filter-btn" @click="handleFilter">
        <wd-button type="icon" icon="filter" style="color: #fff;"></wd-button>
      </view>
    </view>
    
    <!-- 筛选框 -->
     
    <wd-popup
      v-model="showFilter"
      position="bottom"
      round
      :overlay="true"
      :close-on-click-overlay="true"
      overlay-class="popup-overlay"
      class="filter-popup-container">
      <view class="filter-popup" style="min-height: 400rpx;">
        <slot name="filter-content" class="p-4">
          <view class="text-lg font-medium mb-4">筛选条件</view>
          <!-- 这里可以根据实际需求添加筛选条件 -->
        </slot>
        <view class="flex justify-end m-3">
          <!-- <wd-button size="large" @click="handleFilterCancel" style="margin-right: 16rpx;">取消</wd-button> -->
          <wd-button size="large" type="info" @click="handleReset" style="margin-right: 16rpx;">重置</wd-button>
          <wd-button size="large" type="primary" @click="handleFilterConfirm">确定</wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style scoped>
.jiayi-list {
  padding: 16rpx;
  position: relative;
  min-height: 100vh;
  background-color: #ffffff;
}

.scroll-container {
  height: 100vh;
  padding-bottom: 200rpx;
}

.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
  padding: 0 40rpx;
}

.card-content {
  padding: 30rpx;
}

.action-buttons {
  position: fixed;
  bottom:150rpx;
  right: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  z-index: 9;
}

.refresh-btn,
.filter-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #3194F2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.filter-popup {
  width: 100%;
  max-height: 80vh;
}
</style>