<template>
	<!-- 我的工单 -->
	<view>
		<uv-navbar title="" :placeholder="true" :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="leftClick">
			<template v-slot:center>
				<view class="uv-nav-slot" style="width: 72%;">
					<uv-search v-model="workOrderNo" :actionStyle="{color:'#fff'}" placeholder="请输入工单编号"
						@search="searchWork" @custom="searchWork"></uv-search>
				</view>
			</template>
		</uv-navbar>
		<scroll-view :style="{height: `calc(100vh - ${(headTop + 44) + 'px'})`,}" :scroll-top="scrollTop"
			scroll-with-animation="true" scroll-y="true" @scrolltolower="loadMore" @scroll="handleScroll"
			:lower-threshold="50">
			<view class="head_sub">
				<uv-tabs :list="tabList" :current="current" :scrollable="false" lineWidth="40"
					:activeStyle="{ color: '#3c9cff' }" :inactiveStyle="{ color: '#ffffff' }"
					@click="tabClick"></uv-tabs>
			</view>
			<view style="margin: 0rpx 20rpx;" v-if="workData.length > 0">
				<view class="item_order_work" v-for="(item,index) in workData" :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 style="padding-bottom:20rpx" v-if="pageNum > 1">
					<uv-load-more :status="status" color="#ffffff" />
				</view>
			</view>
			<view style="margin-top:30%;" v-else>
				<x-empty></x-empty>
			</view>
		</scroll-view>
		<view class="top-back" @click="topBack" v-if="backShow">
			<text class="iconfont icon_back_top">&#xe806;</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { GetOrderList, GetRepairStatus } from "@/api/order";
	import { setLocalStorage } from "@/utils/cache";
	import { ref } from 'vue';
	import { onShow, onLoad, onPageScroll, onReady } from "@dcloudio/uni-app";
	const scrollTop : any = ref(-1)
	const backShow : any = ref(false)
	// 记录当前滚动位置
	const currentScrollTop = ref(0)
	const status = ref('loadmore')
	const headTop = ref(0)
	// 防抖函数
	function debounce(func : any, wait : any) {
		let timeout : any = null
		return function executedFunction(...args : any) {
			const later = () => {
				clearTimeout(timeout)
				func(...args)
			}
			clearTimeout(timeout)
			timeout = setTimeout(later, wait)
		}
	}
	// 处理滚动事件
	const handleScroll = debounce((e : any) => {
		scrollTop.value = -1
		currentScrollTop.value = e.detail.scrollTop
		// 滚动超过200px显示返回顶部按钮
		backShow.value = e.detail.scrollTop > 200
	}, 100)
	// 返回顶部
	function topBack() {
		scrollTop.value = 0
		setTimeout(() => {
			backShow.value = false
		}, 300)
	}
	const workOrderNo = ref('')
	const tabList : any = ref([])
	const list = ref([{
		id: '0',
		color: '#E6A23C',
	}, {
		id: '1',
		color: '#409EFF',
	}, {
		id: '2',
		color: '#67C23A',
	}, {
		id: '3',
		color: '#909399',
	}])
	const workData : any = ref([])
	const current = ref(0)
	const pageNum = ref(1)
	const pageSize = ref(10)
	const loadingMore = ref(true)
	// 加载更多数据
	const loadMore = () => {
		if (!loadingMore.value) {
			getList(current.value)
		}
	};
	// 选择
	function tabClick(params : any) {
		pageNum.value = 1
		workData.value = []
		current.value = params.index
		getList(params.index)
	}
	// 订单状态颜色
	function getOrderColor(value : any) {
		let title = ''
		list.value.forEach((item : any) => {
			if (item.id == value) {
				title = item.color
			}
		})
		return title
	}
	// 订单状态汉化
	function getOrderTitle(value : any) {
		let title = ''
		tabList.value.forEach((item : any) => {
			if (item.id == value) {
				title = item.name
			}
		})
		return title
	}
	// 跳转详情
	function goWorkDetails(params : any) {
		pageNum.value = 1
		workData.value = []
		setLocalStorage("ticketsDetails", params);
		uni.navigateTo({
			url: '/pages/tickets/details',
		})
	}
	function leftClick() {
		uni.navigateBack({
			delta: 1
		});
	}
	// 获取列表
	const getList = (value : any) => {
		GetOrderList({
			isMe: true,
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			orderStatus: value,
			orderNo: workOrderNo.value,
			state: '1749115737095',
		}).then((res : any) => {
			if (res.code == 200) {
				const data = res.rows
				if (data.length > 0) {
					workData.value = workData.value.concat(data)
				}
				if (data.length < pageSize.value) {
					status.value = 'nomore'
					loadingMore.value = true
				} else {
					status.value = 'loading'
					loadingMore.value = false
					pageNum.value++
				}
			}
		})
	}
	// 获取工单状态
	const getRepairStatus = () => {
		GetRepairStatus({}).then((res : any) => {
			if (res.code == 200) {
				let arrData = res.data
				arrData.forEach((item : any, index : any) => {
					let objArr = {
						id: index,
						name: item.dictLabel
					}
					tabList.value.push(objArr)
				})
			}
		})
	}
	// 搜索工单
	function searchWork() {
		pageNum.value = 1
		workData.value = []
		getList(current.value)
	}
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
		const { safeAreaInsets } : any = uni.getSystemInfoSync()
		headTop.value = safeAreaInsets.top
		// uni.hideTabBar();
		getList(current.value)
	})
	onLoad((options : any) => {
		if (options.current) {
			current.value = Number(options.current)
		}
		getRepairStatus()
	})
</script>

<style lang="scss" scoped>
	.head_sub {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.item_order_work {
		color: #fff;
		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;
	}

	.top-back {
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 28rpx;
		z-index: 999;
		animation: heart 0.3s;

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

			100% {
				right: 30rpx;
			}
		}
	}

	.icon_back_top {
		font-size: 46rpx;
	}
</style>