<template>
	<view class="container">
		<scroll-view scroll-y :style="{ height: scrollHeight + 'px' }">

			<uni-card>
				<uni-section>
					<uni-forms-item label="车辆编号" label-s name="bikeCode">
						<bikeCodeScan @scan-change="bikeCodeScanChange" :codeValue="ebikeInfo.bikeCode" />
					</uni-forms-item>
					<view class="flex justify-start ">
						<uni-forms-item label="在线状态" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.zxstate}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="实时电量" class="with50">
							<view class="flex justify-between">
								<view class="lengthwz" style="color: red; width: auto;">
									{{ebikeInfo.soc}}
								</view>
								<view v-if="ebikeInfo.soc !=null && ebikeInfo.soc != ''" class="hdcclass"
									@click="gotohdInfo">
									换电池>
								</view>
							</view>
						</uni-forms-item>
					</view>
					<view class="flex justify-start">
						<uni-forms-item label="车辆状态" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.stateName}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="实时电压" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.voltage}}
							</view>
						</uni-forms-item>
					</view>
					<view class="flex justify-start">
						<uni-forms-item label="离线前电量" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.soc}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="离线前电压" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.voltage}}
							</view>
						</uni-forms-item>
					</view>
					<view class="flex justify-start">
						<uni-forms-item label="电门状态" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.accOn}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="轮锁状态" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.wheelLocked}}
							</view>
						</uni-forms-item>
					</view>
					<view class="flex justify-start">
						<uni-forms-item label="电池仓状态" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.seatLocked}}
							</view>
						</uni-forms-item>
						<uni-forms-item label="GPS信号强度" class="with50">
							<view class="lengthwz">
								{{ebikeInfo.gsm}}
							</view>
						</uni-forms-item>
					</view>
					<uni-forms-item label="所处站点">
						<view class="lengthwz1">
							{{ebikeInfo.positionNow}}
						</view>
					</uni-forms-item>
					<uni-forms-item label="最新定位">
						<view class="flex flex-wrap justify-between">
							<view class="lengthwz1">
								{{ebikeInfo.position}}
							</view>
							<view v-if="ebikeInfo.position != null && ebikeInfo.position != ''" class="zxdwclass"
								@click="gotoMapsInfo">
								<uni-icons custom-prefix="iconfont" color="#1488f5" type="icon-ebikeditu1"
									size="15"></uni-icons>
								地图找车
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="最后的骑行时间">
						<view class="lengthwz1">
							{{ebikeInfo.lastRideTime}}
						</view>
					</uni-forms-item>
					<uni-forms-item label="最后的骑行人">
						<view class="lengthwz1">
							{{ebikeInfo.lastRideUser}}
						</view>
					</uni-forms-item>
				</uni-section>

			</uni-card>
			<uni-card>
				<uni-section title="标签" type="line">
					<view class="example-body flex flex-wrap">
						<view v-for="(item,index) in bqlist" class="tag-view bqboxclass" :key="index">
							<uni-tag :text="item.name" :type="item.type" />
						</view>
					</view>
				</uni-section>
			</uni-card>
			<uni-card>
				<uni-section title="操作" type="line">
					<view class="czclass flex flex-wrap">
						<view v-for="(item,index) in ebikeczList" class="classbut" @click="clickUseEbike(item,index)"
							:key="index" :class="item.click?'classbutsele':''">
							<span class="czwz">
								{{item.name}}
							</span>
						</view>
					</view>
				</uni-section>
			</uni-card>
			<uni-card>
				<uni-section title="转工单" type="line">
					<view class="czclass flex flex-wrap">
						<view v-for="(item,index) in gdlist" :key="index" class="classgd">
							<view @click="clickzgd(item,index)" :class="item.click?'select':''">
								<uni-icons custom-prefix="iconfont" color="rgb(255,129,0)" :type="item.icon"
									size="25"></uni-icons>
								<view class="zgdclaswz">
									{{item.name}}
								</view>
							</view>
						</view>
					</view>
				</uni-section>
			</uni-card>
			<view style="height: 5px;">

			</view>
		</scroll-view>
	</view>
	<view class="nav-panel">
		<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
	</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';
	const ebikeInfo = ref({
		bikeId: '',
		bikeCode: '',
		ecuId: '',
		ecuSn: '',
		position: '',
		stateName:''
	});
	const position = ref({
		longitude: "",
		latitude: ""
	});
	const navButtonGroup = [{
		text: '车辆详情',
		backgroundColor: '#0078D4',
		color: "#fff"
	}];

	const DmSeleList = ref([{
			value: 0,
			text: "关闭"
		},
		{
			value: 1,
			text: "打开"
		}
	])

	const bqlist = ref(
		[{
			name: "乐摇摇",
			type: "primary"
		}, {
			name: "离线",
			type: "success"
		}, {
			name: "低电量",
			type: "warning"
		}, {
			name: "未投放",
			type: "error"
		}, {
			name: "超出运营区",
			type: "error"
		}, {
			name: "电量无更新",
			type: "error"
		}, {
			name: "120H无单",
			type: "error"
		}, {
			name: "72H调度无单",
			type: "error"
		}, {
			name: "换电中",
			type: "warning"
		}, {
			name: "已巡检",
			type: "primary"
		}])

	const gdlist = ref(
		[{
			name: "调度",
			icon: "icon-ebikehaocai",
			url: ''
		}, {
			name: "换电",
			icon: "icon-ebikedianchi",
			url: '/pages/devops/changebatteries/changebatteries'
		}, {
			name: "维修",
			icon: "icon-ebikeweixiuoff",
			url: '/pages/devops/maintenancepage/maintenancepage'
		}, {
			name: "故障上报",
			icon: "icon-ebikeguzhangshangbao1",
			url: '/pages/devops/faultreport/faultreport'
		}])

	const ebikeczList = ref(
		[{
			name: "开锁",
			click: false,
			enabled: true,
			url: "unlock"
		}, {
			name: "关锁",
			click: false,
			enabled: true,
			url: "lock"
		}, {
			name: "开电池锁",
			click: false,
			enabled: true,
			url: "openBatteryLock"
		}, {
			name: "还车",
			click: false,
			enabled: false,
			url: "lock"
		}, {
			name: "开头盔锁",
			click: false,
			enabled: true,
			url: "openHelmet"
		}, {
			name: "寻车铃",
			click: false,
			enabled: true,
			url: "findEbike"
		} , {
			name: "重启",
			click: false,
			enabled: false,
			url: "restart"
		}, {
			name: "临时停车",
			click: false,
			enabled: true,
			url: "tempLock"
		}, {
			name: "重新定位",
			click: false,
			enabled: true,
			url: ""
		}])



	const bikeCodeScanChange = (bikeCode) => {
		ebikeInfo.value.bikeCode = bikeCode;
		api.callEbikeInfo("getBikeINfoData?bikeCode=" + bikeCode).then((res) => {
			if (res.code == 200) {
				ebikeInfo.value.bikeId = res.data.bikeId;
				//获取车辆经纬度
				api.callCoreApi("gps?ecuId=" + res.data.ecuId + "&bikeId=" + res.data.bikeId, {}, 'get').then((
					res) => {
				});
				ebikeInfo.value.ecuId = res.data.ecuId;
				ebikeInfo.value.ecuSn = res.data.ecuSn;
				const ecuSn = res.data.ecuSn;
				navButtonGroup[0].disable = false
				ebikeInfo.value.position = res.data.resGPSDto.chineseLocation;
				ebikeInfo.value.stateName = res.data.stateName;
				position.value.longitude = res.data.resGPSDto.longitude
				position.value.latitude = res.data.resGPSDto.latitude
				ebikeInfo.value.accOn = res.data.resGPSDto.accOn == 0 ? "电门关闭" : "电门打开";
				ebikeInfo.value.gsm = res.data.resGPSDto.gsm;
				ebikeInfo.value.helmentExit = res.data.resGPSDto.helmentExit;
				ebikeInfo.value.seatLocked = res.data.resGPSDto.seatLocked = res.data.resGPSDto.accOn ==
					0 ? "未锁" : "已锁";
				ebikeInfo.value.soc = res.data.resGPSDto.soc + '%';
				ebikeInfo.value.timestamp = dayjs(res.data.resGPSDto.timestamp * 1000).format(
					'YYYY-MM-DD HH:mm:ss');
				ebikeInfo.value.voltage = res.data.resGPSDto.voltage * 0.001 + "V";
				ebikeInfo.value.wheelLocked = res.data.resGPSDto.wheelLocked == 0 ? "未锁" : "已锁";

				api.callCoreApi("online?ecuId=" + ebikeInfo.value.ecuId + "&bikeId=" + res.data.bikeId, {},
						'get')
					.then((ecudata) => {
						ebikeInfo.value.zxstate = ecudata.data.message;
					});

			} else {
				showModelMessage(res.message)
			}
		});
	};

	const clickUseEbike = (item, index) => {
		if (!checkscan()) {
			return
		}
		ebikeczList.value[index].click = true;
		setTimeout(() => {
			ebikeczList.value[index].click = false;
		}, 100);
		uni.showLoading({
			title: "指令下发中...",
			mask: true
		})
		var paramName = "ecuId";
		var data = ebikeInfo.value.ecuId
		var bikeId = ebikeInfo.value.bikeId
		api.callCoreApi(item['url'] + "?ecuId=" + data + "&bikeId=" + bikeId, {}, 'get').then((res) => {
			uni.hideLoading();
			var title = res.data.message;
			var icon = "";
			if (res.data.code == 200) {
				icon = "success"
			} else {
				icon = "error"
			}
			uni.showToast({
				title: title,
				icon: icon,
				duration: 2000,
				mask: true
			});
		});
	}

	const clickzgd = (item, index) => {
		if (!checkscan()) {
			return
		}
		gdlist.value[index].click = true;
		setTimeout(() => {
			gdlist.value[index].click = false;
			uni.navigateTo({
				url: item['url'] + "?bikeCode=" + ebikeInfo.value.bikeCode,
			});
		}, 100);

	}

	const gotoMapsInfo = () => {
		uni.navigateTo({
			url: "/pages/map/map-findbike?longitude=" + position.value.longitude + "&latitude=" + position
				.value.latitude,
		});
	}
	const gotohdInfo = () => {
		uni.navigateTo({
			url: "/pages/devops/changebatteries/changebatteries?bikeCode=" + ebikeInfo.value.bikeCode,
		});
	}

	const navButtonClick = (index, content) => {
		if (!checkscan()) {
			return
		}
		uni.navigateTo({
			url: "/pages/devops/ebikeinfo/ebikeinfo?bikeId=" + ebikeInfo.value.bikeId + "&ecuId=" + ebikeInfo
				.value.ecuId + "&ecuSn=" + ebikeInfo.value.ecuSn,
		});
	}

	const checkscan = () => {
		if (!ebikeInfo.value.bikeCode) {
			showModelMessage("请先扫车辆码或输入车辆码");
			return false;
		}
		if (!ebikeInfo.value.bikeId) {
			showModelMessage("车辆信息不存在");
			return false;
		}
		return true;
	}
	const scrollHeight = ref(0);
	onMounted(() => {
		// 获取设备信息
		const systemInfo = uni.getSystemInfoSync();
		// 获取屏幕高度和状态栏高度
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		// 计算去掉状态栏后的可用区域高度
		scrollHeight.value = screenHeight - statusBarHeight - 113;
	})
</script>

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

	.with20 {
		width: 20px;
	}

	.nav-panel {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding-bottom: 20px;
		background-color: #fff;
		z-index: 105;
	}

	.czclass {
		width: 100%;
		padding: 5px 0px;
	}

	.classbut {
		width: 21%;
		text-align: center;
		height: 30px;
		background: rgb(243, 249, 255);
		margin-left: 3%;
		border: solid 1px rgb(104, 176, 255);
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.czwz {
		color: rgb(104, 176, 255);
		line-height: 30px;
		font-size: 14px;
	}

	.classbutsele {
		background: rgba(121, 184, 255, 0.6);


	}

	.classgd {
		width: 21%;
		height: 80px;
		margin-left: 3%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zgdclaswz {

		font-size: 14px;
	}

	.select {
		transform: scale(0.9);
	}

	.bqboxclass {
		margin: 8px 3px;
	}

	.with50 {
		width: 50%;
	}

	.lengthwz {
		width: 80px;
		line-height: 36px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lengthwz1 {
		line-height: 36px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}


	uni-text {
		color: rgb(140, 140, 140);
		font-size: 13px;
	}

	.zxdwclass {
		border: solid 1px rgb(75, 161, 255);
		padding: 5px;
		font-size: 12px;
		color: rgb(56, 151, 255);
		border-radius: 15px;
		height: 28px;
		line-height: 16px;
		background-color: rgba(243, 249, 255, 0.8);
	}

	.hdcclass {
		line-height: 36px;
		font-size: 12px;
		margin-left: 10px;
		color: rgb(45, 145, 255);
	}

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

	.uni-card .uni-card__content[data-v-81f163d7] {
		padding: 0px !important;
	}
</style>