<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<view class="page">
		<!-- 自定义导航栏 -->
		<view class="nav" :style="{ paddingTop: headerPaddingTop + 'px', height: headerTotalHeight + 'px' }">
			<view class="nav-back" @tap="goBack">
				<view class="nav-back-icon"></view>
			</view>
			<text class="nav-title">我的工单</text>
			<view class="nav-capsule"></view>
		</view>

		<!-- Tab切换 -->
		<view class="tabs" :style="{ marginTop: headerTotalHeight + 'px' }">
			<view class="tab-item" :class="{ active: activeTab === 'all' }" @tap="changeTab('all')">
				<text class="tab-text">全部</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'pending' }" @tap="changeTab('pending')">
				<text class="tab-text">待处理</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'processing' }" @tap="changeTab('processing')">
				<text class="tab-text">处理中</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'done' }" @tap="changeTab('done')">
				<text class="tab-text">已完成</text>
			</view>
		</view>

		<!-- 工单列表 -->
		<scroll-view class="list" scroll-y="true">
			<view class="card" v-for="(item, index) in filteredOrders" :key="index">
				<view class="card-header">
					<view class="card-title">
						<view class="title-bar"></view>
						<text class="title-text">工单号：{{ item.workcaseId }}</text>
					</view>
					<view class="status-tag" :class="getStatusClass(item.status)">
						<text class="tag-text">{{ getStatusText(item.status) }}</text>
					</view>
				</view>

				<view class="card-body">
					<view class="fault-row">
						<text class="fault-title">{{ item.type || '故障报修' }}</text>
						<view class="level-tag" :class="item.emergency === 'emergency' ? 'urgent' : 'normal'">
							<text class="level-text">{{ item.emergency === 'emergency' ? '紧急' : '普通' }}</text>
						</view>
					</view>
					<view class="info-row">
						<text class="info-label">设备型号</text>
						<text class="info-value">{{ item.device || '-' }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">联系人</text>
						<text class="info-value">{{ item.username || '-' }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">联系电话</text>
						<text class="info-value">{{ item.phone || '-' }}</text>
					</view>
				</view>

				<view class="card-footer">
					<text class="create-time">{{ item.createTime || '' }}</text>
					<view class="detail-btn" @tap="goDetail(item.workcaseId)">
						<text class="detail-text">查看详情</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredOrders.length === 0">
				<text class="empty-text">暂无工单数据</text>
			</view>
		</scroll-view>
	</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { TbWorkcaseDTO } from '@/types/workcase'
import { workcaseAPI } from '@/api/workcase/workcase'

// 响应式数据
const headerPaddingTop = ref<number>(44)
const headerTotalHeight = ref<number>(88)
const activeTab = ref<string>('all')
const orders = ref<TbWorkcaseDTO[]>([])
const loading = ref<boolean>(false)
const error = ref<string>('')

// 计算属性：根据tab筛选工单
const filteredOrders = computed(() => {
	if (activeTab.value === 'all') {
		return orders.value
	}
	return orders.value.filter(o => o.status === activeTab.value)
})

// 生命周期
onMounted(() => {
	const windowInfo = uni.getWindowInfo()
	const statusBarHeight = windowInfo.statusBarHeight || 44
	
	// #ifdef MP-WEIXIN
	try {
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		headerPaddingTop.value = menuButtonInfo.top
		headerTotalHeight.value = menuButtonInfo.bottom + 8
	} catch (e) {
		headerPaddingTop.value = statusBarHeight
		headerTotalHeight.value = statusBarHeight + 44
	}
	// #endif
	// #ifndef MP-WEIXIN
	headerPaddingTop.value = statusBarHeight
	headerTotalHeight.value = statusBarHeight + 44
	// #endif
	
	// 调用API获取工单列表
	loadWorkcaseList()
})

// 加载工单列表
async function loadWorkcaseList() {
	loading.value = true
	error.value = ''
	try {
		const filter: TbWorkcaseDTO = {}
		if (activeTab.value !== 'all') {
			filter.status = activeTab.value as TbWorkcaseDTO['status']
		}
		const res = await workcaseAPI.getWorkcaseList(filter)
		if (res.success && res.dataList) {
			orders.value = res.dataList || []
		} else {
			error.value = res.message || '加载失败'
			uni.showToast({
				title: res.message || '加载失败',
				icon: 'error'
			})
		}
	} catch (e) {
		error.value = '网络错误，请稍后重试'
		uni.showToast({
			title: '网络错误，请稍后重试',
			icon: 'error'
		})
	} finally {
		loading.value = false
	}
}

// 切换Tab
function changeTab(tab: string) {
	activeTab.value = tab
	loadWorkcaseList()
}

// 获取状态样式类
function getStatusClass(status?: string): string {
	switch (status) {
		case 'pending': return 'status-pending'
		case 'processing': return 'status-processing'
		case 'done': return 'status-done'
		default: return 'status-pending'
	}
}

// 获取状态文本
function getStatusText(status?: string): string {
	switch (status) {
		case 'pending': return '待处理'
		case 'processing': return '处理中'
		case 'done': return '已完成'
		default: return '未知'
	}
}

// 返回上一页
function goBack() {
	uni.navigateBack()
}

// 跳转到工单详情
function goDetail(workcaseId?: string) {
	if (!workcaseId) return
	uni.navigateTo({
		url: `/pages/workcase/workcaseDetail/workcaseDetail?workcaseId=${workcaseId}`
	})
}
</script>

<style lang="scss" scoped>
@import "./workcaseList.scss";
</style>