<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-todo-line li-mr-3"></text>
						<text>{{ticketInfo.ticket_no}}</text>
						<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
					</view>
					<text class="li-pl-20 li-text-28 li-text-#5f5f5f">创建时间:&nbsp;{{ticketInfo.create_time}}</text>
				</view>
				<view class="li-text-28 !li-rd-bl-50 li-px-40 li-py-6" style="color: #37A5FF; backgroundColor: #e8f4ff">
					<text v-if="ticketInfo.type == 'F2'">派送</text>
					<text v-if="ticketInfo.type == 'F4'">量房</text>
					<text v-if="ticketInfo.type == 'F6'">维修</text>
				</view>
			</view>
			<view class="li-flex li-items-start li-pt-20 li-pl-20">
				<view class="ri-checkbox-circle-fill li-text-#009aff li-mr-12 li-text-40 li-pt-2"></view>
				<!-- <text class="ri-close-circle-fill li-text-#ff0000"></text> -->
				<view v-if="ticketInfo.status == 0" class="li-flex li-flex-col">
					<text class="li-text-32">待接单</text>
					<text class="li-text-28">待接单</text>
				</view>
				<view v-if="ticketInfo.status == 1" class="li-flex li-flex-col">
					<text class="li-text-32">已接单</text>
					<text class="li-text-28">已接单</text>
				</view>
				<view v-if="ticketInfo.status == 2" class="li-flex li-flex-col">
					<text class="li-text-32">已完结</text>
					<text class="li-text-28">已完结</text>
				</view>
				<view v-if="ticketInfo.status == 3" class="li-flex li-flex-col">
					<text class="li-text-32">已取消</text>
					<text class="li-text-28">已取消</text>
				</view>
			</view>
		</view>
		<!-- 联系信息 -->
		<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-start li-justify-between 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?.village_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>
					<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 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 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>
						<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 v-if="ticketInfo?.type == 'F6'" 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?.region_name}}{{ticketInfo?.order?.cell_name}}{{ticketInfo?.order?.house_name}}{{ticketInfo?.order?.address}}</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>
					<text class="li-w-400  li-two-line li-text-right">{{ticketInfo.order.content}}</text>
				</view>
				<view v-if="ticketInfo.order.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 v-for="(item) in ticketInfo?.order?.images?.split(',')" :key="item" class="li-w-110 li-h-110 li-rd-10 li-mr-20" :src="item">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 工单记录 -->
		<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">
				<!-- todo 此处最好用时间线展示 类似物流信息 -->
			</view>
		</view>
		<!-- footer -->
		<view
			class="li-flex li-fixed li-bottom-0 li-bg-white li-w-100% li-items-center li-justify-between li-py-35 li-task-card li-rd-10">
			<!-- 左侧留空 -->
			<view></view>
			<view class="li-flex li-items-center li-mr-30">
				<view>
					<!-- todo 退单要进行二次确认 -->
					<wd-button :round="false" type="error">退单</wd-button>
				</view>
				<view class="li-ml-15">
					<!-- todo 结单根据要求，是否跳转到结单页，拍照+填写信息 -->
					<wd-button :round="false">结单</wd-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useNavigation } from '@/hooks/useNavigation'
	import {myTicketInfo} from '@/api/ticket'
		import { useToast } from '@/uni_modules/wot-design-uni'
		
	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,       // 当前页面是否为 tabBar 页面
		checkRouteStack     // 检查当前路由栈状态的方法
	} = useNavigation()

	onLoad((q) => {
		checkRouteStack()
		if (q.ticket_id) {
			loadInfo(q.ticket_id)
		}
	})
	
	const loadInfo = async (ticket_id : string) => {
		const res = await myTicketInfo({ ticket_id })
		ticketInfo.value = res.data
	}

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

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


	const handleAction = (action : string) => {
		console.log(action);
	}
</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;
		/* #ifdef H5 */
		padding-bottom: 160rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		padding-bottom: 180rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		padding-bottom: 170rpx;
		/* #endif */
	}


	// 导航栏背景层
	.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;
	}

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