<template>
	<view class="li-message-page">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view 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"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">工单详情</text>
				</view>
			</template>
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>
		<!-- card -->
		<view class="bg-#FFFFFF li-w-92% li-mx-auto  li-rd-20 li-task-card li-pb-25 overflow-hidden li-mt-40">
			<view class="li-flex li-items-start li-justify-between bg-#f9f9f9">
				<view class="li-mb-20">
					<view class="li-flex li-items-center li-text-#5f5f5f li-pl-20 li-pt-20 li-text-28 li-mb-12">
						<text class="ri-file-list-line li-mr-3"></text>
						<text>{{ticketInfo?.ticket_no}}</text>
						<text class="ri-file-copy-line li-text-#009aff li-ml-15" @click="copyTicketNo"></text>
					</view>
					<text class="li-pl-20 li-text-28 li-text-#5f5f5f">创建时间:&nbsp;{{ticketInfo?.create_time}}</text>
				</view>
				<view v-if="ticketInfo?.status !== undefined" class="status-tag li-text-28 li-px-40 li-py-6"
					:class="['status-' + ticketInfo.status]">
					{{getStatusText(ticketInfo.status)}}
				</view>
			</view>
			<view class="li-flex li-items-start li-pt-20 li-pl-20">
				<text v-if="ticketInfo?.status !== undefined" :class="getStatusIcon(ticketInfo.status)"
					class="li-mr-12 li-text-40 li-pt-2"></text>
				<view class="li-flex li-flex-col">
					<text
						class="li-text-32">{{ticketInfo?.status !== undefined ? getStatusText(ticketInfo.status) : ''}}</text>
					<text
						class="li-text-28 li-text-#666">{{ticketInfo?.status !== undefined ? getStatusDescription(ticketInfo.status) : ''}}</text>
				</view>
			</view>
		</view>
		<!-- card -->
		<view class="bg-#FFFFFF li-w-92% li-mx-auto li-mt-20 li-rd-20 li-task-card li-pb-30 overflow-hidden">
			<view class="li-pl-30 li-pt-30">业主信息</view>
			<view class="li-pl-30 li-pr-30 li-mt-30">
				<view class="li-flex li-items-center li-justify-between li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">业主姓名</text>
					<text class="li-w-400  li-single-line li-text-right">{{ticketInfo?.order?.name}}</text>
				</view>
				<view class="li-flex li-items-center li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150 li-text-#9a9a9a">联系方式</text>
					<view class="li-flex li-items-center li-w-400  li-single-line justify-between">
						<!-- 左侧留空 -->
						<view></view>
						<!-- 右侧内容 -->
						<view @click="callNumber" class="li-flex li-items-center">
							<text class="ri-phone-line li-text-#009aff li-mr-6"></text>
							<text>{{ticketInfo?.order?.mobile}}</text>
						</view>
					</view>
				</view>
				<view v-if="ticketInfo?.type =='F4'"
					class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">上门地址</text>
					<text
						class="li-w-400  li-two-line li-text-right">{{ticketInfo?.order?.region_name}}{{ticketInfo?.order?.cell_name}}{{ticketInfo?.order?.house_name}}{{ticketInfo?.order?.address}}</text>
				</view>
				<view v-if="ticketInfo?.type =='F4'"
					class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">预约时间</text>
					<text class="li-w-400  li-two-line li-text-right">{{ticketInfo?.order?.appoint_date}}
						{{ticketInfo?.order?.appoint_time}}</text>
				</view>
				<view v-if="ticketInfo?.type =='F4'"
					class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">建筑面积</text>
					<text class="li-w-400  li-two-line li-text-right">{{ticketInfo?.order?.building_area}}</text>
				</view>
				<view v-if="ticketInfo?.type =='F4'"
					class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">订单状态</text>
					<view class="li-w-400 li-text-right">
						<text :class="['info-tag', 'status-' + ticketInfo?.order?.status]">
							{{getOrderStatusText(ticketInfo?.order?.status)}}
						</text>
					</view>
				</view>

				<view v-if="ticketInfo?.order?.remark" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">工单备注</text>
					<text class="li-w-400  li-two-line li-text-right">{{ticketInfo?.order?.remark}}</text>
				</view>

				<view v-if="ticketInfo.type == 'F6'"
					class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">报修内容</text>
					<text class="li-w-400  li-two-line li-text-right">{{ticketInfo?.order?.content}}</text>
				</view>

				<view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150 li-text-#9a9a9a">工单类型</text>
					<view class="li-w-400 li-text-right">
						<text v-if="ticketInfo?.type === 'F2'" class="info-tag type-delivery">商品</text>
						<text v-if="ticketInfo?.type === 'F4'" class="info-tag type-measure">量房</text>
						<text v-if="ticketInfo?.type === 'F6'" class="info-tag type-repair">维修</text>
					</view>
				</view>

				<view v-if="(ticketInfo?.type =='F4' || ticketInfo?.type =='F6') && ticketInfo.images"
					class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">附件上传</text>
					<view class="li-flex li-flex-col li-w-400 justify-end">
						<view class="li-flex justify-between li-items-center li-mt-20">
							<!-- 左侧留空 -->
							<view></view>
							<!-- 右侧内容 -->
							<view class="li-flex li-items-center">
								<image class="li-w-110 li-h-110 li-rd-10" src="../../static/logo.png" mode="">
								</image>
								<image class="li-w-110 li-h-110 li-rd-10 li-ml-20" src="../../static/logo.png" mode="">
								</image>
							</view>
						</view>
					</view>
				</view>

				<view v-if="ticketInfo?.type =='F2'"
					class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
					<text class="li-w-150  li-text-#9a9a9a">商品信息</text>
					<view class="li-flex li-flex-col li-w-400 justify-end">
						<text class="li-two-line li-text-right">燕京 8度U8 500ML*12瓶/箱*2 送燕京9度菊花听500ML*12听</text>
						<!-- <text class="li-text-#009aff li-text-right">x2</text> -->
						<view class="li-flex justify-between li-items-center li-mt-20">
							<!-- 左侧留空 -->
							<view></view>
							<!-- 右侧内容 -->
							<view class="li-flex li-items-center">
								<image class="li-w-110 li-h-110 li-rd-10" src="../../static/swiper/1.png" mode="">
								</image>
								<image class="li-w-110 li-h-110 li-rd-10 li-ml-20" src="../../static/swiper/1.png"
									mode=""></image>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="li-w-85% li-mx-auto li-mt-90">
			<wd-button @click="sumbit" :loading="bntloading" block custom-class="custom-shadow">&nbsp;接单</wd-button>
		</view>

		<wd-toast />
		<zero-loading type="wobble" v-if="loading"></zero-loading>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useNavigation } from '@/hooks/useNavigation'
	import { ticketPoolInfo, ticketAccept } from '@/api/ticket'
	import { useToast } from '@/uni_modules/wot-design-uni'
	import { throttle } from '@/utils/common'

	const Toast = useToast()
	const loading = ref<boolean>(false)
	const bntloading = ref<boolean>(false)

	const ticketInfo = ref<any>({
		ticket_no: '',
		create_time: '',
		status: undefined,
		type: '',
		order: {
			name: '',
			mobile: '',
			region_name: '',
			cell_name: '',
			house_name: '',
			address: '',
			appoint_date: '',
			appoint_time: '',
			building_area: '',
			status: 0,
			images: '',
			remark: ''
		}
	})

	// 使用导航 composable
	const {
		hasMultiplePages,
		isTabBarPage,
		checkRouteStack
	} = useNavigation()

	onLoad((q) => {
		checkRouteStack()
		if (q.ticket_id) {
			loadInfo(q.ticket_id)
		}
	})

	const loadInfo = async (ticket_id : string) => {
		try {
			loading.value = true
			const res = await ticketPoolInfo({ ticket_id })
			if (res.data) {
				ticketInfo.value = {
					...ticketInfo.value,
					...res.data
				}
			}
		} catch (error) {
			Toast.error('加载失败，请重试')
			console.error('加载工单信息失败:', error)
		} finally {
			loading.value = false
		}
	}

	// 复制工单号
	const copyTicketNo = () => {
		if (!ticketInfo.value?.ticket_no) return
		uni.setClipboardData({
			data: ticketInfo.value.ticket_no,
			showToast: false,
			success: () => {
				Toast.success('工单号已复制')
			}
		})
	}

	const callNumber = () => {
		// uni.makePhoneCall({
		// 	phoneNumber: ticketInfo.value.order.mobile
		// });

	}

	const sumbit = throttle(async () => {
		bntloading.value = true
		var res = await ticketAccept({ ticket_id: ticketInfo.value.ticket_id })
		bntloading.value = false
		if (res.code == 200) {
			Toast.success('已接单')
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 500)
		}

	}, 500)

	const toPages = (item : any) => {
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'home':
				uni.switchTab({
					url: '/pages/index/index'
				})
				break;
			default:
				break;
		}
	}



	// 状态配置
	const statusConfig = {
		0: {
			color: '#1890ff',
			bgColor: '#f0f9ff',
			icon: 'ri-time-line',
			text: '待接单',
			description: '工单待处理，点击按钮确认接单'
		},
		1: {
			color: '#1890ff',
			bgColor: '#f0f9ff',
			icon: 'ri-truck-line',
			text: '已派单',
			description: '工单已分配，请及时处理'
		},
		2: {
			color: '#52c41a',
			bgColor: '#f0fff5',
			icon: 'ri-checkbox-circle-line',
			text: '已完成',
			description: '工单已完成处理'
		},
		3: {
			color: '#8c8c8c',
			bgColor: '#f5f5f5',
			icon: 'ri-close-circle-line',
			text: '已取消',
			description: '工单已取消'
		}
	}

	// 订单状态配置
	const orderStatusConfig = {
		0: { text: '已提交', color: '#ff9d00', bgColor: '#fff7e6' },
		1: { text: '已完成', color: '#52c41a', bgColor: '#f6ffed' },
		2: { text: '已取消', color: '#8c8c8c', bgColor: '#fafafa' }
	}

	// 工单类型配置
	const typeConfig = {
		F2: { text: '配送', color: '#1890ff', bgColor: '#f0f7ff' },
		F4: { text: '量房', color: '#722ed1', bgColor: '#f9f0ff' },
		F6: { text: '维修', color: '#13c2c2', bgColor: '#f0fafa' }
	}

	// 获取状态颜色
	const getStatusColor = (status : number) => {
		return statusConfig[status]?.color || '#666666'
	}

	// 获取状态背景色
	const getStatusBgColor = (status : number) => {
		return statusConfig[status]?.bgColor || '#f5f5f5'
	}

	// 获取状态文字
	const getStatusText = (status : number) => {
		return statusConfig[status]?.text || '未知状态'
	}

	// 获取状态图标
	const getStatusIcon = (status : number) => {
		return `${statusConfig[status]?.icon} li-text-${getStatusColor(status).substring(1)}`
	}

	// 获取状态描述
	const getStatusDescription = (status : number) => {
		return statusConfig[status]?.description || '状态未知'
	}

	// 获取订单状态文字
	const getOrderStatusText = (status : number) => {
		return orderStatusConfig[status]?.text || '未知状态'
	}
</script>

<style lang="scss">
	.li-message-page {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom,
				rgba(217, 237, 255, 0.9) 0%,
				rgba(217, 237, 255, 0.9) 20%,
				rgba(207, 207, 207, 0.2) 40%,
				rgba(207, 207, 207, 0.2) 60%,
				rgba(207, 207, 207, 0.2) 80%,
				rgba(207, 207, 207, 0.2) 100%);
		background-attachment: fixed;

	}


	// 导航栏背景层
	.nav-bg-layer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: var(--window-top);
		background: linear-gradient(to bottom,
				rgba(217, 237, 255, 0.95),
				rgba(217, 237, 255, 0.85));
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		z-index: 998;
	}

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

	.status-tag {
		border-radius: 0 0 0 25rpx;

		&.status-0 {
			color: #1890ff;
			background-color: #f0f9ff;
		}

		&.status-1 {
			color: #1890ff;
			background-color: #f0f9ff;
		}

		&.status-2 {
			color: #52c41a;
			background-color: #f0fff5;
		}

		&.status-3 {
			color: #8c8c8c;
			background-color: #f5f5f5;
		}
	}

	.info-tag {
		display: inline-block;
		padding: 4rpx 16rpx;
		font-size: 24rpx;
		border-radius: 4rpx;

		&.type-delivery {
			color: #1890ff;
			background-color: #f0f7ff;
			border: 1px solid #e6f4ff;
		}

		&.type-measure {
			color: #722ed1;
			background-color: #f9f0ff;
			border: 1px solid #f4e6ff;
		}

		&.type-repair {
			color: #13c2c2;
			background-color: #f0fafa;
			border: 1px solid #e6f7f7;
		}

		&.status-0 {
			color: #ff9d00;
			background-color: #fff7e6;
			border: 1px solid #ffedc7;
		}

		&.status-1 {
			color: #52c41a;
			background-color: #f6ffed;
			border: 1px solid #e8ffd1;
		}

		&.status-2 {
			color: #8c8c8c;
			background-color: #fafafa;
			border: 1px solid #f0f0f0;
		}
	}

	::v-deep .wd-button {
		width: 160rpx !important;
		height: 65rpx !important;
		min-width: 160rpx !important;
	}

	.custom-shadow {
		height: 85rpx !important;
		font-size: 32rpx !important;
		box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
		background-color: #2EA1EA !important;
		width: 100% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
</style>