<template>
	<!-- 工单处理 -->
	<view class="card_tickets">
		<uv-navbar title="工单处理" :placeholder="true" :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="leftClick"></uv-navbar>
		<view class="ticks_box_head">
			<view class="item_head_tick">
				<view class="title_ticks">
					<span style="font-size: 46rpx;color: #0ce7f2;font-weight: bold;">{{ticketInfo.total}}</span>
					<span style="font-size: 28rpx;">工单总数</span>
				</view>
				<view class="card_panel">
					<x-instrumentpanel :total="ticketInfo.total" :amount="ticketInfo.total"></x-instrumentpanel>
				</view>
			</view>
			<view class="item_head_tick">
				<view class="title_ticks">
					<span style="font-size: 46rpx;color: #d2bc62;font-weight: bold;">{{ticketInfo.pending}}</span>
					<span style="font-size: 28rpx;">待处理</span>
				</view>
				<view class="card_panel">
					<x-instrumentpanel :total="ticketInfo.total" :amount="ticketInfo.pending"
						colourFirst="rgba(222, 204, 128, 1)" colourTail="rgba(186, 108, 84, 1)"></x-instrumentpanel>
				</view>
			</view>
			<view class="item_head_tick">
				<view class="title_ticks">
					<span style="font-size: 46rpx;color: #a337b6;font-weight: bold;">{{ticketInfo.processing}}</span>
					<span style="font-size: 28rpx;">处理中</span>
				</view>
				<view class="card_panel">
					<x-instrumentpanel :total="ticketInfo.total" :amount="ticketInfo.processing"
						colourFirst="rgba(243, 232, 255, 1)" colourTail="rgba(162, 54, 182, 1)"></x-instrumentpanel>
				</view>
			</view>
			<view class="item_head_tick">
				<view class="title_ticks">
					<span style="font-size: 46rpx;color: #7cca57;font-weight: bold;">{{ticketInfo.completed}}</span>
					<span style="font-size: 28rpx;">已完成</span>
				</view>
				<view class="card_panel">
					<x-instrumentpanel :total="ticketInfo.total" :amount="ticketInfo.completed"
						colourFirst="rgba(227, 243, 227, 1)" colourTail="rgba(122, 201, 84, 1)"></x-instrumentpanel>
				</view>
			</view>
		</view>
		<view class="space_between">
			<view class="hintTitle">待处理工单</view>
			<view class="hintTitle" @click="moreWork">全部工单</view>
		</view>
		<view v-if="ticketsData.length > 0">
			<view class="item_tickets" v-for="(item,index) in ticketsData" :key="index" @click="goWorkDetails(item)">
				<view class="space_between">
					<view class="white_color">{{item.orderNo}}</view>
					<view class="state_title" :style="{color:getOrderColor(item.orderStatus)}">
						{{getOrderTitle(item.orderStatus)}}
					</view>
				</view>
				<view class="white_color">类型: {{item.projectName}}</view>
				<view class="white_color">地点: {{item.orderContent}}</view>
				<view class="white_color" v-if="item.describe">描述: {{item.describe}}</view>
				<view class="white_color">
					联系人:
					<span>{{item.updateBy}}</span>
					<span class="tickets_phone_title">{{item.phone}}</span>
				</view>
				<view class="white_color">提交时间: {{item.updateTime}}</view>
			</view>
		</view>
		<view v-else style="margin-top:30%;">
			<x-empty></x-empty>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { GetOrderList, GetStatistics, GetRepairStatus } from "@/api/order";
	import { setLocalStorage } from "@/utils/cache";
	import { onShow, onReady } from "@dcloudio/uni-app";
	const ticketsData : any = ref([])
	const ticketInfo : any = ref({})
	// 工单状态列表
	const workTypeData : any = ref([])
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
		ticketsData.value = []
		getStics()
		getRepairStatus()
	})
	// 获取工单状态
	const getRepairStatus = () => {
		GetRepairStatus({}).then((res : any) => {
			if (res.code == 200) {
				let arrData = res.data
				workTypeData.value = [{
					id: '0',
					color: '#E6A23C',
					title: arrData[0].dictLabel,
				}, {
					id: '1',
					color: '#409EFF',
					title: arrData[1].dictLabel,
				}, {
					id: '2',
					color: '#67C23A',
					title: arrData[2].dictLabel,
				}, {
					id: '3',
					color: '#909399',
					title: arrData[3].dictLabel,
				}]
				getList(1)
			}
		})
	}
	// 获取列表
	const getList = (status : any) => {
		GetOrderList({
			isMe: true,
			pageNum: 1,
			pageSize: 999,
			orderStatus: status,
			state: '1749115737095',
		}).then((res : any) => {
			if (res.code == 200) {
				ticketsData.value = res.rows
			}
		})
	}
	// 获取工单统计
	const getStics = () => {
		GetStatistics({
			isMe: true,
		}).then((res : any) => {
			if (res.code == 200) {
				ticketInfo.value = res.data
			}
		})
	}
	// 订单状态颜色
	function getOrderColor(value : any) {
		let title = ''
		workTypeData.value.forEach((item : any) => {
			if (item.id == value) {
				title = item.color
			}
		})
		return title
	}
	// 订单状态汉化
	function getOrderTitle(value : any) {
		let title = ''
		workTypeData.value.forEach((item : any) => {
			if (item.id == value) {
				title = item.title
			}
		})
		return title
	}
	// 跳转详情
	function goWorkDetails(params : any) {
		setLocalStorage("ticketsDetails", params);
		uni.navigateTo({
			url: '/pages/tickets/details',
		})
	}
	// 去全部工单
	function moreWork() {
		uni.navigateTo({
			url: '/pages/workOrder/index',
		})
	}
	function leftClick() {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.top {
		height: 80rpx;
		width: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 50%;
		background-color: rgba($color: #FFFFFF, $alpha: 0.8);
		position: fixed;
		z-index: 999;
		right: 30rpx;
		bottom: 100rpx;
		animation: heart 0.3s;

		@keyframes heart {
			0% {
				right: -30rpx;
			}

			100% {
				right: 30rpx;
			}
		}

		.ic-back-top {
			font-size: 60rpx !important;
		}
	}

	.card_tickets {
		padding: 0rpx 30rpx 30rpx 30rpx;
		width: calc(100% - 60rpx);
	}

	.item_tickets {
		padding: 25rpx;
		background-color: rgba(85, 110, 143, .3);
		margin-bottom: 30rpx;
		border-radius: 10rpx;
	}

	.white_color {
		color: #fff;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.tickets_phone_title {
		padding-left: 20rpx;
	}

	.state_title {
		color: #1af0f7;
		font-size: 28rpx;
	}

	.ticks_box_head {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30rpx 0rpx 0rpx 0rpx;
	}

	.hintTitle {
		color: #ffffff;
		margin-bottom: 30rpx;
	}

	.card_stat {
		background-color: red;
		padding: 15rpx;
		border-radius: 20rpx;
		margin-right: 10rpx;
	}

	.item_head_tick {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(50% - 50rpx);
		// background-color: #20265b;
		background-color: rgba(85, 110, 143, .3);
		margin-bottom: 30rpx;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;
	}

	.card_panel {
		width: 120rpx;
		height: 120rpx;
	}

	.icon_tick {
		font-size: 60rpx;
		color: #ffffff;
	}

	.title_ticks {
		display: flex;
		flex-direction: column;
		color: #fff;
	}
</style>