<template>
	<view>
		<!-- 导航栏 -->
		<view class="li-work-nav">
			<SafeAreaTop />
			<view class="li-ml-15 li-mt-10 li-flex li-items-center">
				<text class="ri-arrow-left-s-line li-text-70" @click="toPages({type:'nav'})"></text>
				<text class="li-text-42">我的工单</text>
			</view>
			<!-- 搜索框 -->
			<view class="li-w-90% li-mx-auto li-mt-15 li-mb-25">
				<wd-search placeholderStyle="color:#d9d9d9" v-model="keyword" placeholder="工单编号/业主姓名" hide-cancel
					placeholder-left></wd-search>
			</view>
			<!-- 工单类型tabs -->
			<view class="li-flex li-items-center">
				<wd-tabs v-model="activeTab" slidable="auto" :slidable-num="4" :map-num='4'>
					<block v-for="(item, index) in tabList" :key="index">
						<wd-tab :title="item.name" :badge-props="item.badgeProps"></wd-tab>
					</block>
				</wd-tabs>
				<!-- <view class="border-red li-flex li-items-center li-justify-center li-w-130">
					<text class="ri-filter-line li-text-20"></text>
					<text class="li-text-28">筛选</text>
				</view> -->
			</view>
		</view>
		<view class="li-flex li-items-center  li-mx-auto li-w-92% li-mt-check-costom">
			<text v-for="(item,index) in orderStatusList" :key="index"
				:class="item.id==currentStatus?'space-check':'space-checkOut'" @click="handleStatusChange(item.id)">
				{{item.title}}
			</text>
		</view>

		<!-- 工单列表 -->
		<view class="li-w-92% li-mx-auto li-mt-list-costom">
			<!-- 商城待配送工单 -->
			<template v-if="activeTab === 0">
				<view v-for="(item, index) in deliveryList" :key="index" @click="toPages({type:'detail',value:item})"
					class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30">
					<view class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15">
						<view class="li-text-28 li-flex li-items-center li-justify-between li-text-#999">
							<text class="ri-todo-line sli-mr-3"></text>
							{{item.number}}
							<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
						</view>
						<wd-tag custom-class="space" :color="getStatusColor(item.status)"
							:bg-color="getStatusBgColor(item.status)">
							{{getStatusText(item.status)}}
						</wd-tag>
					</view>
					<view>
						<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
							<text class="li-text-#9a9a9a">配送地址</text>
							<text>{{item.address}}</text>
						</view>
						<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
							<text class="li-text-#9a9a9a">收货人</text>
							<text>{{item.name}}</text>
						</view>
						<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
							<text class="li-text-#9a9a9a">联系方式</text>
							<text>{{item.phone}}</text>
						</view>
						<view class="li-mt-20 bg-#f9f9f9 li-rd-10 li-p-15 li-text-24">
							<text>{{item.remarks}}</text>
						</view>
					</view>
					<view class="li-flex li-items-center li-justify-between li-mt-20">
						<text class="li-text-24 li-text-#999">{{item.time}}</text>
						<wd-button custom-class="custom-shadow" size="small" v-if="item.status === 1">开始配送</wd-button>
					</view>
				</view>
			</template>

			<!-- 维修工单 -->
			<template v-if="activeTab === 1">
				<view v-for="(item, index) in repairList" :key="index"
					class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30">
					<!-- 维修工单内容结构类似，根据需要调整显示字段 -->
				</view>
			</template>

			<!-- 其他类型工单... -->
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import SafeAreaTop from '@/components/SafeAreaTop/index.vue'

	const keyword = ref('')
	const activeTab = ref(0)
	const status = ref('0')
	const currentStatus = ref(0) // 默认选中"未完成"

	// tab列表
	const tabList = ref([
		{
			name: '全部',
			value: 0,
			badgeProps: {
				modelValue: 11,
				right: '-8px'
			}
		},
		{
			name: '商品配送',
			value: 0,
			badgeProps: {
				modelValue: 1,
				right: '-8px'
			}
		},
		{
			name: '维修工单',
			value: 1,
			badgeProps: {
				modelValue: 0,
				right: '-8px'
			}
		},
		{
			name: '量房工单',
			value: 2,
			badgeProps: {
				modelValue: 0,
				right: '-8px'
			}
		},
		// {
		// 	name: '待入库',
		// 	value: 3,
		// 	badgeProps: {
		// 		modelValue: 0,
		// 		right: '-8px'
		// 	}
		// }
	])


	const orderStatusList = ref([
		{
			title: '全部',
			id: 0
		},
		{
			title: '未完成',
			id: 1
		},
		{
			title: '已完成',
			id: 2
		}
	])

	// 商城待配送工单列表
	const deliveryList = ref([
		{
			number: 'JD1232122932919',
			status: 1, // 1待配送 2已完成
			address: '中金北区17号楼一单元201室',
			name: '王先生',
			phone: '177****4485',
			remarks: '请在下午6点前送达，谢谢。',
			time: '2024-03-01 10:30'
		},
		{
			number: 'JD1232122932919',
			status: 2,
			address: '中金北区2号楼二单元502室',
			name: '李先生',
			phone: '138****6678',
			remarks: '放在门口即可。',
			time: '2024-03-01 09:15'
		}
	])

	// 维修工单列表
	const repairList = ref([
		// 维修工单数据结构
	])

	const toPages = (item : any) => {
		console.log(item);
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'detail':
				uni.navigateTo({
					url: '/pagesA/my_order/detail'
				})
				break;
			default:
				break;
		}
	}

	// 状态颜色配置
	const getStatusColor = (status : number) => {
		const colorMap = {
			1: '#ff9d00', // 待配送
			2: '#00b42a', // 已完成
			3: '#37A5FF', // 未入库
			4: '#F42429'  // 已取消
		}
		return colorMap[status] || '#666666'
	}

	// 状态背景色配置
	const getStatusBgColor = (status : number) => {
		const bgColorMap = {
			1: '#fff6e9', // 待配送
			2: '#e8ffea', // 已完成
			3: '#e8f4ff', // 未入库
			4: '#ffe8e8'  // 已取消
		}
		return bgColorMap[status] || '#f5f5f5'
	}

	// 状态文字配置
	const getStatusText = (status : number) => {
		const textMap = {
			1: '待配送',
			2: '已完成',
			3: '未入库',
			4: '已取消'
		}
		return textMap[status] || '未知状态'
	}

	const handleStatusChange = (id : number) => {
		currentStatus.value = id
		// 这里可以处理状态切换后的逻辑
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.li-work-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: linear-gradient(135deg,
				rgba(200, 228, 255, 0.95) 0%,
				rgba(220, 238, 255, 0.95) 45%,
				rgba(235, 245, 255, 0.95) 100%);

	}

	::v-deep .wd-search {
		background-color: transparent !important;
		padding: 0 !important;
		border-radius: 10rpx !important;
	}

	::v-deep .wd-search__block {
		background-color: rgba(255, 255, 255, 0.8) !important;
		width: 480rpx !important;
		padding: 4rpx !important;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.015);
	}

	::v-deep .uni-input-placeholder,
	.uni-input-input {
		width: auto !important;
	}

	::v-deep .wd-tabs {
		background-color: transparent !important;
	}

	::v-deep .wd-badge__content {
		border: none !important;
	}

	::v-deep .wd-tabs__map-btn {
		background-color: transparent !important;
	}

	::v-deep .wd-tabs__map-nav-btn.is-active {
		color: #009aff !important;
		border: solid 1px #009aff !important;
	}

	.li-mt-check-costom {
		/* #ifdef APP*/
		padding-top: 380rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-top: 400rpx;
		/* #endif */
		/* #ifdef H5 */
		padding-top: 350rpx;
		/* #endif */
	}

	.li-mt-list-costom {
		/* #ifdef APP*/
		margin-top: 40rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		margin-top: 40rpx;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 40rpx;
		/* #endif */
	}


	.li-task-card {
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.custom-shadow {
		color: #ffffff !important;
		background: linear-gradient(to right, #7bbfff, #009aff) !important;
	}

	::v-deep .space {
		padding: 2rpx 20rpx !important;
		border-radius: 15rpx !important;
		font-size: 22rpx !important;
		transition: all 0.3s ease;
		border: none !important;
	}


	::v-deep .space-check {
		padding: 10rpx 40rpx !important;
		margin-right: 20rpx !important;
		border-radius: 10rpx !important;
		font-size: 24rpx !important;
		transition: all 0.3s ease;
		color: #ffffff !important;
		background: linear-gradient(to right, #7bbfff, #009aff) !important;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	::v-deep .space-checkOut {
		padding: 10rpx 40rpx !important;
		margin-right: 20rpx !important;
		border-radius: 10rpx !important;
		font-size: 24rpx !important;
		transition: all 0.3s ease;
		color: #4c4c4c !important;
		background: linear-gradient(to right, #FFFFFF, #FFFFFF) !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	::v-deep .wd-tabs__nav {
		background-color: transparent !important;
	}

	::v-deep .wd-tabs__line {
		background: #009aff !important;
	}

	::v-deep .wd-radio__label {
		font-size: 26rpx !important;
	}
</style>