<template>
	<view class="li-message-page">
		<view class="li-task-nav">
			<SafeAreaTop />
			<view @click="toPages({type:'nav'})" class="li-ml-15 li-mt-10 li-flex li-items-center">
				<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"></text>
				<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mr-6 li-mb-8"
					@click="toPages({type:'home'})"></text>
				<text class="li-text-42">工单大厅</text>
			</view>
			<wd-drop-menu class="li-w-100%">
				<wd-drop-menu-item v-model="query.type" :options="option1" @change="refresh" />
				<wd-drop-menu-item v-model="query.timeRange" :options="option2" @change="refresh1" />
			</wd-drop-menu>
		</view>
		<!-- list -->
		<view class="li-w-92% li-mx-auto li-pb-30">
			<view v-for="(item, index) in taskList" :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">
						<text class="ri-file-list-line li-mr-10 li-text-#009aff"></text>
						<text>{{item.ticket_no}}</text>
					</view>
					<view class="task-type-tag li-flex li-items-center">
						<view :class="['type-badge', `type-${item.type.toLowerCase()}`]">
							<text :class="taskTypes[item.type].icon" class="li-text-32"></text>
							<text class="li-text-24 li-ml-6">{{getTaskTypeName(item.type)}}</text>
						</view>
					</view>
				</view>
				<view>
					<view v-if="item.type == 'F4'"
						class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
						<text class="li-text-#9a9a9a">预约时间</text>
						<text>{{item.order.appoint_date}} {{item.order.appoint_time}}</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.order.region_name}}{{item.order.cell_name}}{{item.order.house_name}}{{item.order.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.order.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.order.mobile}}</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.create_time}}</text>
					</view>
					<view v-if="item.type==2" class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
						<text class="li-text-#9a9a9a">维修类型</text>
						<wd-tag custom-class="space" v-if="item.RepairType==1" color="#0083ff"
							bg-color="#d0e8ff">公共维修</wd-tag>
						<wd-tag custom-class="space" v-if="item.RepairType==2" color="#0083ff"
							bg-color="#d0e8ff">房屋维修</wd-tag>
					</view>
					<view class="li-mt-20 bg-#f9f9f9 li-rd-10 li-p-15 li-text-24" v-if="item.order.remark">
						<text>{{item.order.remark}}</text>
					</view>
				</view>
				<view class="li-flex li-items-center li-justify-between li-mt-30">
					<view
						:style="{ visibility: (item.type==1 && item.commission && item.commission > 0) ? 'visible' : 'hidden' }"
						class="li-flex li-items-center">
						<text class="li-text-36 li-font-bold li-text-#ff0000 li-mr-6">{{item.commission}}</text>
						<text class="li-text-24 li-text-#333333 li-pt-4">元/可得佣金</text>
					</view>
					<view class="li-flex li-items-center">
						<wd-button custom-class="custom-shadow" size="small">&emsp;详情&emsp;</wd-button>
						<wd-button @click.stop="sumbit(item.ticket_id)" custom-class="custom-shadow1"
							size="small">&emsp;接单&emsp;</wd-button>
					</view>
				</view>
			</view>
		</view>
		<view v-if="taskList.length==0" class="!li-mt-300">
			<wd-status-tip image="search" tip="暂无待处理工单" />
		</view>
		<wd-toast />
		<zero-loading type="wobble" v-if="loading"></zero-loading>
	</view>
</template>

<script setup lang="ts">
	import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
	import { ref } from 'vue'
	import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
	import { useNavigation } from '@/hooks/useNavigation'
	import { ticketPoolList, ticketAccept } from '@/api/ticket'
	import { useToast } from '@/uni_modules/wot-design-uni'
	import { throttle } from '@/utils/common'
	const Toast = useToast()
	// 使用导航 composable
	const {
		hasMultiplePages,   // 是否有多个页面在路由栈中
		isTabBarPage,       // 当前页面是否为 tabBar 页面
		checkRouteStack     // 检查当前路由栈状态的方法
	} = useNavigation()

	const loading = ref<boolean>(false)

	onLoad(() => {
		checkRouteStack()
	})

	onShow(() => {
		query.value.page = 1
		taskList.value = []
		poolList()
	})


	onPullDownRefresh(() => {
		query.value.page = 1
		taskList.value = []
		poolList()
		setTimeout(() => {
			uni.stopPullDownRefresh()
		}, 300)
	})

	onReachBottom(() => {
		if (finish.value) return
		query.value.page++
		poolList()
	})

	const query = ref({
		page: 1,
		limit: 10,
		type: 'ALL',
		timeRange: 0
	})

	const finish = ref<boolean>(false)

	const option1 = ref([
		{ label: '全部类型', value: 'ALL' },
		{ label: '商品工单', value: 'F2' },
		{ label: '维修工单', value: 'F6' },
		{ label: '量房工单', value: 'F4' }
	])
	const option2 = ref([
		{ label: '全部时间', value: 0 },
		{ label: '今天', value: 1 },
		{ label: '最近7天', value: 2 },
		{ label: '最近30天', value: 3 },
	])

	const taskList = ref([])

	const toPages = (item : any) => {
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'home':
				uni.switchTab({
					url: '/pages/index/index'
				})
				break;
			case 'detail':
				uni.navigateTo({
					url: '/pagesA/task_hall/detail?ticket_id=' + item.value.ticket_id
				})
				break;
			default:
				break;
		}
	}

	const refresh = (value : any) => {
		query.value.type = value.value
		query.value.page = 1
		taskList.value = []
		poolList()
	}
	const refresh1 = (value : any) => {
		query.value.timeRange = value.value
		query.value.page = 1
		taskList.value = []
		poolList()
	}

	const sumbit = throttle(async (ticket_id : number) => {
		loading.value = true
		var res = await ticketAccept({ ticket_id: ticket_id })
		loading.value = false
		if (res.code == 200) {
			Toast.success('已接单')
			query.value.page = 1
			taskList.value = []
			poolList()
		}

	}, 500)

	// 工单类型配置
	const taskTypes = {
		F2: {
			name: '商品',
			bgColor: '#e6f7ff',
			textColor: '#1890ff',
			icon: 'ri-shopping-bag-3-line'
		},
		F6: {
			name: '维修',
			bgColor: '#e6fffb',
			textColor: '#13c2c2',
			icon: 'ri-tools-line'
		},
		F4: {
			name: '量房',
			bgColor: '#f9f0ff',
			textColor: '#722ed1',
			icon: 'ri-ruler-2-line'
		}
	}

	// 获取工单类型名称
	const getTaskTypeName = (type : string) => {
		return taskTypes[type]?.name || '其他'
	}

	const poolList = async () => {
		loading.value = true
		const res = await ticketPoolList(query.value)
		loading.value = false
		if (res.data.length < query.value.limit) {
			finish.value = true
		}
		taskList.value.push(...res.data)
	}
</script>

<style lang="scss">
	.li-message-page {
		width: 100%;
		min-height: 100vh;
		/* #ifdef APP-PLUS */
		padding-top: calc(var(--status-bar-height) + 160rpx);
		/* #endif */

		/* #ifdef MP-WEIXIN || H5 */
		padding-top: calc(var(--status-bar-height) + 200rpx);
		/* #endif */

		/* 为固定导航栏留出空间 */
		background: linear-gradient(to bottom,
				rgba(197, 224, 253, 1.0) 0%,
				rgba(197, 224, 253, 1) 20%,
				rgba(248, 248, 248, 0.6) 40%,
				rgba(248, 248, 248, 0.5) 60%,
				rgba(242, 243, 247, 0.4) 80%,
				rgba(236, 237, 240, 0.4) 100%);
		background-attachment: fixed;
	}

	.li-task-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: linear-gradient(to bottom,
				rgba(197, 224, 253, 1) 0%,
				rgba(197, 224, 253, 1) 20%,
				rgba(197, 224, 253, 1) 40%,
				rgba(197, 224, 253, 1) 60%,
				rgba(197, 224, 253, 1) 80%,
				rgba(197, 224, 253, 1) 100%);
	}

	.custom-shadow {
		color: #009aff !important;
		background: linear-gradient(to right, #FFFFFF, #FFFFFF) !important;
		border: solid 1px #009aff !important;
	}

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

	::v-deep .wd-drop-menu__list {
		width: 100%;
		background-color: transparent !important;
	}

	::v-deep .wd-popup-wrapper .wd-popup {
		border-radius: 0 0 10rpx 10rpx !important;
	}

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

	::v-deep.space {
		padding: 2rpx 10rpx !important;
	}

	.task-type-tag {
		.type-badge {
			display: flex;
			align-items: center;
			padding: 4rpx 16rpx;
			border-radius: 8rpx;

			&.type-f2 {
				background-color: #e6f7ff;
				color: #1890ff;
			}

			&.type-f6 {
				background-color: #e6fffb;
				color: #13c2c2;
			}

			&.type-f4 {
				background-color: #f9f0ff;
				color: #722ed1;
			}
		}
	}
</style>