<template>
	<view class="container">
		<scroll-view class="scrollWrap" scroll-x="true" scroll-with-animation>
			<view v-for="(item,index) in changeList" class="scrollItem" style="width: 22%;"
				:class="{active:tabIndex == index}" :data-current="tabIndex" @click="sendTabItem(item,index)"
				:key="index">
				{{item.title}}
			</view>
		</scroll-view>
		<view v-show="tabIndex === 0">
			<scroll-view scroll-y="true" style="height: 95vh;">
				<uni-card title="设备时间">
					<uni-forms>
						<uni-forms-item label="最近定位时间">
							<view class="deepBlackBoldText">
								{{equipmentTime.latestOrientationTime}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="最新上线时间">
							<view class="deepBlackBoldText">
								{{equipmentTime.latestOnlineTime}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="电量更新时间">
							<view class="deepBlackBoldText">
								{{equipmentTime.batteryRenewalTime}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="最新巡检时间">
							<view class="deepBlackBoldText">
								{{equipmentTime.latestInspectionTime}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="最新调度时间">
							<view class="deepBlackBoldText">
								{{equipmentTime.latestDispatchTime}}
							</view>
						</uni-forms-item>
					</uni-forms>
				</uni-card>
				<uni-card title="设备状态">
					<uni-forms>
						<view class="flex justify-start ">
							<uni-forms-item label="电池电量" class="with50">
								<view class="lengthwz">
									{{equipmentState.soc}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="轮锁状态" class="with50">
								<view class="lengthwz">
									{{equipmentState.wheelLocked}}
								</view>
							</uni-forms-item>
						</view>
						<view class="flex justify-start ">
							<uni-forms-item label="电压" class="with50">
								<view class="lengthwz">
									{{equipmentState.voltage}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="轮动状态" class="with50">
								<view class="lengthwz">
									{{equipmentState.isWheelSpin}}
								</view>
							</uni-forms-item>
						</view>
						<view class="flex justify-start ">
							<uni-forms-item label="速度" class="with50">
								<view class="lengthwz">
									{{equipmentState.speed}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="运动状态" class="with50">
								<view class="lengthwz">
									{{equipmentState.isMoving}}
								</view>
							</uni-forms-item>
						</view>
						<view class="flex justify-start ">
							<uni-forms-item label="网络信号" class="with50">
								<view class="lengthwz">
									{{equipmentState.gsm}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="电池仓状态" class="with50">
								<view class="lengthwz">
									{{equipmentState.seatLocked}}
								</view>
							</uni-forms-item>
						</view>
						<view class="flex justify-start ">
							<uni-forms-item label="在线状态" class="with50">
								<view class="lengthwz">
									{{equipmentState.online}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="头盔锁状态" class="with50">
								<view class="lengthwz">
									{{equipmentState.isHelmetLocked}}
								</view>
							</uni-forms-item>
						</view>
						<view class="flex justify-start ">
							<uni-forms-item label="投放状态" class="with50">
								<view class="lengthwz">
									{{equipmentState.dropMode}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="头盔在位" class="with50">
								<view class="lengthwz">
									{{equipmentState.helmetExit}}
								</view>
							</uni-forms-item>
						</view>
						<view class="flex justify-start ">
							<uni-forms-item label="电门开关" class="with50">
								<view class="lengthwz">
									{{equipmentState.accOn}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="车辆姿态" class="with50">
								<view class="lengthwz">
									{{equipmentState.bikeAttitude}}
								</view>
							</uni-forms-item>
						</view>
						<uni-forms-item label="扫码失败次数">
							<view class="lengthwz">
								{{equipmentState.scanTheCodeLoseCount}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="所处站点">
							<view class="lengthwz">
								{{equipmentState.position}}
							</view>
						</uni-forms-item>
					</uni-forms>
				</uni-card>
				<uni-card title="运营信息">
					<uni-forms>
						<uni-forms-item label="车辆编号">
							<view class="flex justify-between">
								<view class="deepBlackBoldText">
									{{operateInfo.bikeCode}}
								</view>
								<view v-if="operateInfo.bikeCode" @click="copyOrderCode(operateInfo.bikeCode)">
									<text style="font-size: 18px; color: orange;" class="cuIcon-copy"></text>
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="IMEI">
							<view class="flex justify-between">
								<view class="deepBlackBoldText">
									{{operateInfo.imei}}
								</view>
								<view v-if="operateInfo.imei" @click="copyOrderCode(operateInfo.imei)">
									<text style="font-size: 18px; color: orange;" class="cuIcon-copy"></text>
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="设备SN">
							<view class="flex justify-between">
								<view class="deepBlackBoldText">
									{{operateInfo.sn}}
								</view>
								<view v-if="operateInfo.sn" @click="copyOrderCode(operateInfo.sn)">
									<text style="font-size: 18px; color: orange;" class="cuIcon-copy"></text>
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="车牌号">
							<view class="flex justify-between">
								<view class="deepBlackBoldText">
									{{operateInfo.bikeNumber}}
								</view>
								<view v-if="operateInfo.bikeNumber" @click="copyOrderCode(operateInfo.bikeNumber)">
									<text style="font-size: 18px; color: orange;" class="cuIcon-copy"></text>
								</view>
							</view>
						</uni-forms-item>
						<uni-forms-item label="车辆型号">
							<view class="deepBlackBoldText">
								{{operateInfo.bikeModel}}
							</view>
						</uni-forms-item>
					</uni-forms>
				</uni-card>
			</scroll-view>
		</view>

		<view v-show="tabIndex === 1">
			<you-touchbox initTop="500" :disable="isTouchDisable" minTop="220" maxTop="5"
				@get-end-detail="getEndDetail">
				<scroll-view class="scroll-container" :scroll-y="isScrollY" style="height:95vh">
					<uni-card title="最后定位">
						<uni-forms>
							<uni-forms-item label="最后定位时间">
								<view class="deepBlackBoldText">
									{{latestOrientation.latestOrientationTime}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="ACC状态">
								<view class="deepBlackBoldText">
									{{latestOrientation.accState}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="设防状态">
								<view class="deepBlackBoldText">
									{{latestOrientation.fortification}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="电池电量">
								<view class="deepBlackBoldText">
									{{latestOrientation.soc}}
								</view>
							</uni-forms-item>
						</uni-forms>
					</uni-card>
					<uni-card title="最后扫码点">
						<uni-forms>
							<uni-forms-item label="最后扫码时间">
								<view class="deepBlackBoldText">
									{{latestScanPoint.latestScanTime}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="扫码地点">
								<view class="deepBlackBoldText">
									{{latestScanPoint.scanPosition}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="用户名">
								<view class="deepBlackBoldText">
									{{maskUserName(latestScanPoint.userName)}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="手机号">
								<view class="flex justify-between">
									<view class="deepBlackBoldText">
										{{maskPhoneNumber(latestScanPoint.phoneNumber)}}
									</view>
									<view v-if="latestScanPoint.phoneNumber"
										@click="makeACall(latestScanPoint.phoneNumber)">
										<text style="font-size: 18px; color: orange;" class="cuIcon-phone"></text>
									</view>
								</view>
							</uni-forms-item>
						</uni-forms>
					</uni-card>
					<uni-card title="最后还车点">
						<uni-forms>
							<uni-forms-item label="最后还车时间">
								<view class="deepBlackBoldText">
									{{latestDropOffpoint.latestDropOffAt}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="用户坐标">
								<view class="deepBlackBoldText">
									{{latestDropOffpoint.userCoordinate}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="车辆坐标">
								<view class="deepBlackBoldText">
									{{latestDropOffpoint.vehicleCoordinate}}
								</view>
							</uni-forms-item>
						</uni-forms>
					</uni-card>
					<uni-card title="最后轨迹">
						<uni-forms>
							<uni-forms-item label="起点时间">
								<view class="deepBlackBoldText">
									{{finalTrajectory.startingPointAt}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="起点地点">
								<view class="deepBlackBoldText">
									{{finalTrajectory.startingPointPosition}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="终点时间">
								<view class="deepBlackBoldText">
									{{finalTrajectory.endPointAt}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="终点地址">
								<view class="deepBlackBoldText">
									{{finalTrajectory.endPointPosition}}
								</view>
							</uni-forms-item>
						</uni-forms>
					</uni-card>
				</scroll-view>
			</you-touchbox>
		</view>

		<view v-show="tabIndex === 2">
			<z-paging :fixed="false" :height="scrollHeight+29+'px'" ref="instructionRecordList"
				v-model="instructionRecord" @query="loadMoreDataInstructionRecord" :default-page-no="1"
				:default-page-size="10" :auto-show-back-to-top="true">
				<view v-for="(item,index) in instructionRecord" :key="index">
					<uni-card>
						<template v-slot:title>
							<view class="flex justify-between cardtitle">
								<view class="flex align-center ">
									<view class="cardtitleri">
										{{item.com}}
									</view>
									<view style="margin-left: 10px;">
										<view v-if="item.operateResult=='执行成功'" class="cu-tag radius line-green"
											style="background-color:rgba(203,240,204,0.4);">{{item.operateResult}}
										</view>
										<view v-else-if="item.operateResult=='执行失败'" class="cu-tag radius line-red"
											style="background-color: rgba(247,152,152,0.4);">{{item.operateResult}}
										</view>
									</view>
								</view>
							</view>
						</template>
						<uni-forms>
							<uni-forms-item label="创建时间">
								<view class="deepBlackBoldText">
									{{item.createdAt}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="执行时间">
								<view class="deepBlackBoldText">
									{{item.operateTime}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="来源类型">
								<view class="deepBlackBoldText">
									{{item.resourceType}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="用户名称">
								<view class="deepBlackBoldText">
									{{ item.resourceType=="用户端"? maskUserName(item.operateUserName): item.operateUserName}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="手机号码">
								<view class="flex justify-between">
									<view class="deepBlackBoldText">
										{{ item.resourceType=="管理平台"?item.phoneNumber:maskPhoneNumber(item.phoneNumber)}}
									</view>
									<view @click="makeACall(item.phoneNumber)">
										<text style="font-size: 18px; color: orange;" class="cuIcon-phone"></text>
									</view>
								</view>
							</uni-forms-item>
						</uni-forms>
					</uni-card>
				</view>
			</z-paging>
		</view>

		<view v-show="tabIndex === 3">
			<view class="divmap">
				<map-location height="500px" lng="104.117262" lat="30.598726" @change="changePoint" />
			</view>
			<you-touchbox initTop="500" minTop="220" maxTop="5" @get-end-detail="getEndDetail"
				style="border-radius: 15px !important;background-color: #f3f4f6;">
				<z-paging :scrollable="isScrollY" :fixed="false" height="95vh" :refresher-enabled="false"
					ref="sacnRecord" v-model="sacnRecordList" @query="loadMoreDatasacnRecordList" :default-page-no="1"
					:default-page-size="10" :auto-show-back-to-top="true">
					<view v-for="(item,index)  in sacnRecordList" :key="index">
						<uni-card>
							<uni-forms>
								<uni-forms-item label="扫码时间">
									<view class="deepBlackBoldText">
										{{item.faultDescription}}
									</view>
								</uni-forms-item>
								<uni-forms-item label="扫码地址">
									<view class="flex justify-between">
										<view class="deepBlackBoldText">
											{{item.receiverName}}
										</view>
										<view @click="wakeUpMap(item.receiverName)">
											<uni-icons type="paperplane" color="orange" size="18"></uni-icons>
										</view>
									</view>
								</uni-forms-item>
								<uni-forms-item label="扫码人">
									<view class="deepBlackBoldText">
										{{maskUserName(item.handleResult)}}
									</view>
								</uni-forms-item>
								<uni-forms-item label="手机号码">
									<view class="flex justify-between">
										<view class="deepBlackBoldText">
											{{maskPhoneNumber(item.phoneNumber)}}
										</view>
										<view @click="makeACall(item.phoneNumber)">
											<text style="font-size: 18px; color: orange;" class="cuIcon-phone"></text>
										</view>
									</view>
								</uni-forms-item>
							</uni-forms>
						</uni-card>
					</view>
				</z-paging>
			</you-touchbox>
		</view>

		<view v-show="tabIndex === 4">
			<z-paging :fixed="false" :height="scrollHeight+29+'px'" ref="orderRecordList" v-model="orderRecord"
				@query="loadMoreDataOrderRecord" :default-page-no="1" :default-page-size="10"
				:auto-show-back-to-top="true">
				<view v-for="(item,index)  in orderRecord" :key="index">
					<uni-card  @click="viewWorkOrderInfo(item)">
						<template v-slot:title>
							<view  @click="viewWorkOrderInfo(item)" class="flex justify-between cardtitle">
								<view class="flex align-center ">
									<view class="cardtitleri">
										{{item.orderType}}
									</view>
									<view style="margin-left: 10px;">
										<view v-if="item.handleState=='已完成'" class="cu-tag radius line-green"
											style="background-color:rgba(203,240,204,0.4);">{{item.handleState}}</view>
										<view v-else-if="item.handleState=='未完成'" class="cu-tag radius line-red"
											style="background-color: rgba(247,152,152,0.4);">{{item.handleState}}</view>
										<view v-else-if="item.handleState=='已取消'" class="cu-tag radius line-grey"
											style="background-color: #9c9c9c30;">{{item.handleState}}</view>
									</view>
								</view>
								<view>
									<uni-icons type="right" size="20"></uni-icons>
								</view>
							</view>
						</template>
						<uni-forms>
							<uni-forms-item label="工单编号">
								<view class="flex justify-between">
									<view class="deepBlackBoldText">
										{{item.orderCode}}
									</view>
									<view @click="copyOrderCode(item.orderCode)">
										<text style="font-size: 18px; color: orange;" class="cuIcon-copy"></text>
									</view>
								</view>
							</uni-forms-item>
							<uni-forms-item label="开始时间">
								<view class="deepBlackBoldText">
									{{item.createdAt}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="结束时间">
								<view class="deepBlackBoldText">
									{{item.handleAt}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="运维人员">
								<view class="deepBlackBoldText">
									{{item.receiver}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="手机号码">
								<view class="flex justify-between">
									<view class="deepBlackBoldText">
										{{item.phoneNumber}}
									</view>
									<view @click="makeACall(item.phoneNumber)">
										<text style="font-size: 18px; color: orange;" class="cuIcon-phone"></text>
									</view>
								</view>
							</uni-forms-item>
						</uni-forms>
					</uni-card>
				</view>
			</z-paging>
		</view>

		<view v-show="tabIndex === 5">
			<z-paging :fixed="false" :height="scrollHeight+29+'px'" ref="orderTrajectoryList" v-model="orderTrajectory"
				@query="loadMoreDataOrderTrajectory" :default-page-no="1" :default-page-size="10"
				:auto-show-back-to-top="true">
				<view v-for="(item,index) in orderTrajectory" :key="index">
					<uni-card :title="'订单编号:'+item.orderCode">
						<uni-forms>
							<uni-forms-item label="用户名称">
								<view class="deepBlackBoldText">
									{{maskUserName(item.userName)}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="手机号码">
								<view class="flex justify-between">
									<view class="deepBlackBoldText">
										{{maskPhoneNumber(item.phoneNumber)}}
									</view>
									<view @click="makeACall(item.phoneNumber)">
										<text style="font-size: 18px; color: orange;" class="cuIcon-phone"></text>
									</view>
								</view>
							</uni-forms-item>
							<uni-forms-item label="骑行时长">
								<view class="deepBlackBoldText">
									{{item.ridingDuration}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="创建时间">
								<view class="deepBlackBoldText">
									{{item.createAt}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="结束时间">
								<view class="deepBlackBoldText">
									{{item.endAt}}
								</view>
							</uni-forms-item>
						</uni-forms>
					</uni-card>
				</view>
			</z-paging>
		</view>

		<view v-show="tabIndex === 6">
			<z-paging :fixed="false" :height="scrollHeight+29+'px'" ref="faultList" v-model="faultHistoryList"
				@query="loadMoreDataFaultHistoryList" :default-page-no="1" :default-page-size="10"
				:auto-show-back-to-top="true">
				<view v-for="(item,index)  in faultHistoryList" :key="index">
					<uni-card :title="'故障部位：'+item.faultPart" :sub-title="item.reportAt">
						<uni-forms>
							<uni-forms-item label="故障内容">
								<view class="deepBlackBoldText">
									{{item.faultDescription}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="运维人员">
								<view class="deepBlackBoldText">
									{{item.receiverName}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="处理意见">
								<view class="deepBlackBoldText">
									{{item.handleResult}}
								</view>
							</uni-forms-item>
							<uni-forms-item label="处理时间">
								<view class="deepBlackBoldText">
									{{item.handleAt}}
								</view>
							</uni-forms-item>
						</uni-forms>
					</uni-card>
				</view>
			</z-paging>
		</view>

	</view>
</template>

<script setup>
	import dayjs from 'dayjs';
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import * as api from '@/utils/api.js';
	import {
		showModelMessage
	} from '@/utils/tools.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import mapLocation from "@/pages/map/map-location.vue";

	const ebikeInfo = ref({
		bikeId: '',
		bikeCode: '',
		ecuId: '',
		ecuSn: '',
		position: ''
	});
	const isScrollY = ref(false)
	const getEndDetail = ({
		minTop,
		maxTop,
		curTop
	}) => {
		if (curTop == maxTop) isScrollY.value = true
		else isScrollY.value = false
	}
	const changeList = ref(
		[{
				id: 0,
				title: '车辆信息'
			},
			{
				id: 1,
				title: '定位信息'
			},
			{
				id: 2,
				title: '指令记录'
			},
			{
				id: 3,
				title: '扫码记录'
			},
			{
				id: 4,
				title: '工单记录'
			},
			{
				id: 5,
				title: '订单轨迹'
			},
			{
				id: 6,
				title: '故障记录'
			}
		]);
	const scrollHeight = ref(0);
	const equipmentTime = ref({})
	const equipmentState = ref({})
	const latestOrientation = ref({})
	const finalTrajectory = ref({})
	const latestScanPoint = ref({})
	const latestDropOffpoint = ref({})
	const operateInfo = ref({})

	const tabIndex = ref(0)

	const instructionRecord = ref([])
	const sacnRecordList = ref([])
	const orderRecord = ref([])
	const orderTrajectory = ref([])
	const faultHistoryList = ref([])

	const faultList = ref(null);
	const orderTrajectoryList = ref(null);
	const orderRecordList = ref(null);
	const instructionRecordList = ref(null);
	const sacnRecord = ref(null);

	const viewWorkOrderInfo = (workOrder) => {
		if (!workOrder) {
			return
		}
		uni.navigateTo({
			url: "/pages/devops/ebikeinfo/workorderinfo?orderId=" + workOrder.orderId + "&orderType=" +
				workOrder.orderType,
		});
	}

	const wakeUpMap = () => {}

	const maskUserName = (userName) => {
		if (!userName) return '';
		const firstChar = userName.charAt(0);
		const maskedName = firstChar + '*'.repeat(userName.length - 1);
		return maskedName;
	}

	const maskPhoneNumber = (phoneNumber) => {
		if (!phoneNumber) return '';
		const firstPart = phoneNumber.substring(0, 3);
		const lastPart = phoneNumber.substring(phoneNumber.length - 4);
		const maskedPart = '*'.repeat(phoneNumber.length - 7);
		return firstPart + maskedPart + lastPart;
	}


	const makeACall = (phoneNumber) => { 
		uni.makePhoneCall({
			phoneNumber: phoneNumber,
			success: () => {},
			fail() {}
		})
	}

	const copyOrderCode = (orderCode) => {
		uni.setClipboardData({
			data: orderCode,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
			},
			fail: (error) => {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	}

	const sendTabItem = (data) => {
		let index = data['id'];
		if (tabIndex.value == index) return;
		tabIndex.value = index;
		const param = {
			"bikeId": ebikeInfo.value.bikeId,
			"ecuSn": ebikeInfo.value.ecuSn,
			"ecuId": ebikeInfo.value.ecuId
		}
		switch (index) {
			case 0:
				getBikeINfoData(param);
				break;
			case 1:
				api.callEbikeInfo("getOrientationInfo", param).then((res) => {
					if (res.code === 200) {
						latestOrientation.value = res.data.resLatestOrientationDto;
						latestScanPoint.value = res.data.resLatestScanPointDto;
						finalTrajectory.value = res.data.resFinalTrajectoryDto;
						latestDropOffpoint.value = res.data.resLatestDropOffpointDto;
					}
				});
				break;
		}
	}

	const getBikeINfoData = (param) => {
		api.callCoreApi("gps?ecuId=" + ebikeInfo.value.ecuId + "&bikeId=" + ebikeInfo.value.bikeId, {}, 'get').then((
			ecudata) => {});

		api.callEbikeInfo("getBikeDetailsINfoData", param).then(res => {
			if (res.code == 200) {
				equipmentTime.value = res.data.resEquipmentTimeDto
				equipmentState.value = res.data.resEquipmentStateDto
				operateInfo.value = res.data.resOperateInfoDto
			}
		})
	}

	const loadMoreDataFaultHistoryList = (pageNo, pageSize) => {
		if (!ebikeInfo.value.bikeId) {
			faultList.value.complete([]);
			return;
		}
		// 组装参数
		const params = {
			"bikeId": ebikeInfo.value.bikeId,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		}
		api.callEbikeInfo("getFaultHistoryList", params).then((res) => {
			if (res.code === 200) {
				faultList.value.complete(res.data);
			} else {
				faultList.value.complete([]);
			}
		});

	};

	const loadMoreDataOrderRecord = (pageNo, pageSize) => {
		if (!ebikeInfo.value.bikeId) {
			orderRecordList.value.complete([]);
			return;
		}
		// 组装参数
		const params = {
			"bikeId": ebikeInfo.value.bikeId,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		}
		api.callEbikeInfo("getWorkOrderRecordList", params).then((
			res) => {
			if (res.code == 200) {
				orderRecordList.value.complete(res.data);
			} else {
				orderRecordList.value.complete([]);
			}
		})
	};

	const loadMoreDataOrderTrajectory = (pageNo, pageSize) => {
		if (!ebikeInfo.value.bikeId) {
			orderTrajectoryList.value.complete([]);
			return;
		}
		api.callOrdereApi("userOrders/page?pageNum=" + pageNo + "&pageSize=" + pageSize + "&bikeId=" + ebikeInfo.value
				.bikeId, {}, "get")
			.then((
				res) => {
				if (res.code == 200) {
					orderTrajectoryList.value.complete(res.data.records);
				} else {
					orderTrajectoryList.value.complete([]);
				}
			})
	};

	const loadMoreDataInstructionRecord = (pageNo, pageSize) => {
		if (!ebikeInfo.value.bikeId) {
			instructionRecordList.value.complete([]);
			return;
		}
		// 组装参数
		const params = {
			"bikeId": ebikeInfo.value.bikeId,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		}
		api.callEbikeInfo("getInstructionRecordList", params).then((
			res) => {
			if (res.code == 200) {
				instructionRecordList.value.complete(res.data);
			} else {
				instructionRecordList.value.complete([]);
			}
		})
	};

	const loadMoreDatasacnRecordList = (pageNo, pageSize) => {
		if (!ebikeInfo.value.bikeId) {
			sacnRecord.value.complete([]);
			return;
		}
		// 组装参数
		const params = {
			"bikeId": ebikeInfo.value.bikeId,
			"pageParam": {
				"pageNum": pageNo,
				"pageSize": pageSize
			}
		}
		api.callEbikeInfo("getInstructionRecordList", params).then((
			res) => {
			if (res.code == 200) {
				sacnRecord.value.complete(res.data);
			} else {
				sacnRecord.value.complete([]);
			}
		})
	};

	onLoad((data) => {
		const bikeId = data['bikeId'];
		const ecuId = data['ecuId'];
		const ecuSn = data['ecuSn'];
		ebikeInfo.value.bikeId = bikeId;
		ebikeInfo.value.ecuId = ecuId;
		ebikeInfo.value.ecuSn = ecuSn;

	})

	const changePoint = (res) => {}

	onMounted(() => {
		// 获取设备信息
		const systemInfo = uni.getSystemInfoSync();
		// 获取屏幕高度和状态栏高度
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		// 计算去掉状态栏后的可用区域高度
		scrollHeight.value = screenHeight - statusBarHeight - 113;
		const param = {
			"bikeId": ebikeInfo.value.bikeId,
			"ecuSn": ebikeInfo.value.ecuSn,
			"ecuId": ebikeInfo.value.ecuId
		}
		getBikeINfoData(param);
	})
</script>

<style>
	.container {
		padding: 0px 0px;
		background-color: #f3f4f6;
	}

	.success {
		color: green !important;
	}

	.failure {
		color: red;
	}

	.default {
		color: gray;
	}

	.lengthwz {
		width: 60px;
		line-height: 36px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: bold;
	}

	.deepBlackBoldText {
		font-weight: bold;
	}

	.with50 {
		width: 50%;
	}

	.uni-forms-item {
		position: relative;
		display: flex;
		flex-direction: row;
		margin-bottom: 5px !important
	}

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

	.scrollWrap {
		height: 40px;
		line-height: 40px;
		width: 100%;
		white-space: nowrap;
		text-align: center;
		font-size: 14px;
		background-color: #fff;
	}

	.scrollWrap .scrollItem {
		display: inline-block;
		width: 25%;
		font-size: 25rpx;
	}

	.scrollWrap .active {
		color: #009DFF !important;
		position: relative;
		font-weight: 600;
		font-weight: bold;
		text-decoration: underline;
		text-underline-offset: 4px;
	}

	.scrollWrap .active :after {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: calc(50% - 5px);
		width: 10px;
		height: 2px;
		background-color: #009DFF !important;
	}

	.uni-card {
		border-radius: 15px !important;
	}

	.you-touchbox-content {
		border-radius: 20px !important;
		background-color: #f2f2f2 !important;
	}

	.uni-card__header {
		font-weight: bold;
		color: #000000;
		font-size: 16px;
	}

	.uni-card .uni-card__header .uni-card__header-box {
		flex: none !important;
	}

	.uni-card .uni-card__header .uni-card__header-extra {
		margin-left: 10px;
	}

	.uni-forms .uni-forms-item__label {
		width: 100px !important;
	}

	.divmap {
		width: 100%;
		height: 500px;
	}

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

	}

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

	}
</style>