<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 class="ri-arrow-left-s-line li-text-70"></text>
				<text class="li-text-42">工单大厅</text>
			</view>
			<wd-drop-menu class="li-w-100%">
				<wd-drop-menu-item v-model="value1" :options="option1" @change="handleChange1" />
				<wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
			</wd-drop-menu>
		</view>
		<!-- list -->
		<view class="li-w-92% li-mx-auto">
			<view v-for="(item , index) in taskList" :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 class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15">
					<text class="li-text-28">工单编号:&nbsp;&nbsp;{{item.number}}</text>
					<view class="li-flex li-items-center">
						<text class="ri-bookmark-3-line li-text-32 li-text-#9a9a9a"></text>
						<text
							class="li-text-26 li-text-#323232 li-ml-6">{{item.type==1?'商城':(item.type==2?'维修':'量房')}}</text>
					</view>
				</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 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">
						<text>{{item.remarks}}</text>
					</view>
				</view>
				<view class="li-flex li-items-center li-justify-between li-mt-20">
					<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>
					<wd-button custom-class="custom-shadow" size="small">&emsp;接单&emsp;</wd-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	
	const value1 = ref<number>(0)
	const value2 = ref<number>(0)
	const option1 = ref<Record<string, any>>([
		{ label: '全部类型', value: 0 },
		{ label: '商品工单', value: 1 },
		{ label: '维修工单', value: 2 },
		{ label: '量房工单', value: 2 }
	])
	const option2 = ref<Record<string, any>>([
		{ label: '全部时间', value: 0 },
		{ label: '今天', value: 1 },
		{ label: '最近7天', value: 2 },
		{ label: '最近30天', value: 3 },
	])

	const taskList = ref([
		{
			number: 'JD1232122932919',
			type: 1, //1 商城 2 维修 3量房
			time: '2025/02/21',
			name: '王先生',
			phone: "177****4485",
			address: '中金北区17号楼一单元201室',
			commission: 7.65,
			remarks: "最近不在家，送到了就放在门口吧，谢谢。",
		},
		{
			number: 'JD57656575675545',
			type: 2, //1 商城 2 维修 3量房
			time: '2025/02/18',
			name: '李先生',
			phone: "164****7544",
			RepairType: 1, // 1公共维修 2房屋维修
			address: '中金北区6栋左侧第二个路灯',
			remarks: "路灯一个星期前坏了，到现在还没修，影响出行，请尽快维修。",
		},
		{
			number: 'JD423343243243422',
			type: 3, //1 商城 2 维修 3量房
			time: '2025/02/21',
			name: '张先生',
			phone: "134****6556",
			address: '中金北区14号楼三单元3301室',
			remarks: "新房需要量房装修，麻烦物业尽快上门",
		}
	])

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

	function handleChange1({ value }) {
		console.log(value)
	}
	function handleChange2({ value }) {
		console.log(value)
	}
</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: #ffffff !important;
		background: linear-gradient(to right, #7bbfff, #009aff) !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%);
	}

	::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;
	}
</style>