<template>
	<view class="container">
		<view class="query-selector">
			<view class="query-option" :class="{ 'query-select': selectedOption === option.value }"
				v-for="(option, index) in options" :key="index" @click="selectOption(option.value)">
				{{ option.name }}
			</view>
		</view>
		<view class="">
			<uni-search-bar v-model="searchValue" @blur="blur" @clear="clearSearch" @cancel="cancel"
				placeholder="输入车辆编号" clearButton="always" cancelButton="always">
			</uni-search-bar>
		</view>
		<z-paging ref="paging" :fixed="false" height="85vh" v-model="dataList" @query="loadMoreData"
			:default-page-no="1" :default-page-size="4" :auto-show-back-to-top="true">
			<view v-for="(item,index) in dataList" :key="index">
				<uni-card>
					<template v-slot:title>
						<view class="flex justify-between cardtitle">
							<view class="flex align-center ">
								<view class="cardtitleri">
									{{item.orderTypeName}}
								</view>
								<!-- 			<view style="margin-left: 10px;">
									<view   class="cu-tag radius line-green"
										style="background-color:rgba(203,240,204,0.4);">图标</view> 
								</view> -->
							</view>
							<view>
								<uni-icons @click="gotoPage(item.orderType,item)" type="right" size="20"></uni-icons>
							</view>
						</view>
					</template>
					<uni-forms>
						<!-- 		<uni-forms-item v-if="item.longitude &&item.longitude !=''" label="">
							<view class="deepBlackBoldText">
								{{getAreaByCoordinates(item.longitude,item.latitude)}}
							</view>
						</uni-forms-item> -->
						<uni-forms-item v-if="item.bikeCode && item.bikeCode !=''  " label="车辆编号">
							<view class="deepBlackBoldText">
								<span style="color: rgb(19,131,255);"
									@click="gotoebikeInfo(item.bikeCode)">{{item.bikeCode}}</span>
							</view>
						</uni-forms-item>
						<uni-forms-item v-if="item.bikeCount  && item.bikeCount !='' " label="车辆数量">
							<view class="deepBlackBoldText">
								{{item.bikeCount}}
							</view>
						</uni-forms-item>
						<uni-forms-item v-if="item.dispatchType  && item.dispatchType !='' " label="调度类型">
							<view class="deepBlackBoldText">
								{{item.dispatchType}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="创建时间">
							<view class="deepBlackBoldText">
								{{item.createdAt}}
							</view>
						</uni-forms-item>

					</uni-forms>
				</uni-card>

			</view>
		</z-paging>
	</view>
	<zero-loading v-if="isloading" color="#c1c1c0" type="pulse" mask="true"></zero-loading>
</template>

<script setup>
	import QQMapWX from "@/utils/qqmap-wx-jssdk.js";
	import * as map from "@/utils/map.js";
	import {
		ref,
		onMounted
	} from 'vue';
	import * as api from '@/utils/api.js';
	import config from '@/utils/config';
	import {
		onLoad,onShow
	} from '@dcloudio/uni-app'; 

	const isCancelOrClear = ref(false);

	const isloading = ref(false);
	var qqmapsdk = new QQMapWX({
		key: map.sdkKey
	});
	const dataList = ref([]);
	const scrollHeight = ref(null);
	const paging = ref(null);
	const userInfo = ref(null);
	const searchValue = ref("");
	const options = ref([{
			name: "全部",
			value: ''
		},
		{
			name: "换电",
			value: '2'
		},
		{
			name: "调度",
			value: '3'
		},
		{
			name: "维修",
			value: '1'
		}
	]);
	const selectedOption = ref("");
	onLoad((options) => {
		const systemInfo = uni.getSystemInfoSync();
		userInfo.value = uni.getStorageSync('userInfo');
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		scrollHeight.value = screenHeight - statusBarHeight;
	});

	const loadMoreData = (pageNo, pageSize) => {

		const params = {
			"orderType": selectedOption.value,
			"bikeCode": searchValue.value,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		};
		api.callEbikeInfo("getWorkOrderList", params).then((res) => {
			if (res.code === 200) {
				const records = res.data.records;
				paging.value.complete(records);
			} else {
				paging.value.complete([]);
			}
		});
	};

	const selectOption = (option) => {
		selectedOption.value = option;
		paging.value.reload();
	};
	const blur = (res) => {
		if (res.value != searchValue.value) {
			paging.value.reload();
		};

	};
	onShow(() => {
		searchValue.value = "";
		loadMoreData(1,4)
	})
	const cancel = (value) => {  
		// api.callEbikeInfo("getVehicleDetailsByRegionId?regionId=275024268783185920",{},"get")
		searchValue.value = "";
		paging.value.reload();
	}
	const clearSearch = (value) => { 
		searchValue.value = "";
		paging.value.reload();
	}
	const getAreaByCoordinates = (lng, lat) => {
		map.reverseGeocoder(qqmapsdk, lng, lat, (res) => {
			const {
				address
			} = res
			return address;
		}, (res) => {
			return "";
		});
	}
	const gotoebikeInfo = (bikeCode) => {
		isloading.value = true;
		api.callEbikeInfo("getBikeINfoData?bikeCode=" + bikeCode).then((res) => {
			if (res.code == 200) {
				const bikeId = res.data.bikeId;
				const ecuId = res.data.ecuId;
				const ecuSn = res.data.ecuSn;
				uni.navigateTo({
					url: "/pages/devops/ebikeinfo/ebikeinfo?bikeId=" + bikeId + "&ecuId=" + ecuId +
						"&ecuSn=" + ecuSn,
				});
				setTimeout(() => {
					isloading.value = false;
				}, 500);
			}
		})

	}

	const gotoPage = (orderType, item) => {
		switch (orderType) {
			case "1":
				uni.navigateTo({
					url: `/pages/devops/maintenancepage/maintenancepage?bikeCode=${item.bikeCode}`
				})
				console.log("跳转到维修页面");
				// 可以使用例如 window.location.href 或路由跳转来进行页面跳转
				break;
			case "2":
				// 跳转到换电页面
				console.log("跳转到换电页面");
				// 同样可以使用跳转操作
				break;
			case "3":
				uni.navigateTo({
					url: `/pages/warehouse/vehicledispatch/vehicledispatch?orderId=${item.orderId}`
				});
				console.log("跳转到调度页面");
				// 跳转相关的操作
				break;
			default:
				// 如果orderType不是1、2、3中的任意值
				console.log("无效的orderType");
				break;
		}
	};
</script>

<style>
	.query-selector {
		margin: 15px 10px 0px 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.container {
		height: 100vh;
		padding: 0px 0px;
		background-color: #ffffff;
	}

	.query-option {
		padding: 5px 15px;
		font-size: 13px;
		font-weight: 400;
		background: #f5f5f5;
		margin: 5px 5px;
		border-radius: 3px;
		color: #000000;
	}

	.query-select {
		color: #ffffff;
		background: rgb(0, 132, 255);
	}

	.cardtitleri {
		font-size: 15px;
		color: #3a3a3a;
		padding: 5px;
		font-weight: bold;

	}

	.cardtitle {
		margin: 5px 0px;
		padding: 5px 0px;
		border-bottom: solid 1px #f1f1f1;
	}

	.deepBlackBoldText {
		font-weight: bold;
	}

	.uni-forms-item__content {
		position: relative;
		font-size: 14px;
		flex: 1;
		box-sizing: border-box;
		line-height: 36px;
		flex-direction: row;
	}

	.uni-forms-item {
		position: relative;
		display: flex;
		margin-bottom: 2px !important;
		flex-direction: row;
	}
</style>