<template>
	<view class="container" :style="{ height: scrollHeight +70+ 'px' }">
		<uni-card>
			<uni-forms>
				<uni-forms-item label="车辆编号">
					<bikeCodeScan ref="childComponent" @scan-change="bikeCodeScanChange"
						:codeValue="ebikeInfo.bikeCode" />
				</uni-forms-item>
				<uni-forms-item label="当前坐标">
					<uni-easyinput :disabled="true" v-model="currentCoordinates" placeholder="获取中..." />
				</uni-forms-item>
			</uni-forms>
			<view class="">
				<view class="flex">
					<view>
						<uni-icons type="location" color="rgb(19,147,235)" size="20"></uni-icons>
					</view>
					<view class="classwz1">
						请确定损坏车辆当前位置
					</view>
				</view>
				<view class="classwz2">
					{{address}}
				</view>
				<view class="classwz3">
					拖动地图可修改位置
				</view>
			</view>
		</uni-card>
		<view v-if="ebikeInfo.latitude & ebikeInfo.longitude" class="divmap">
			<map-location height="500px" :lng="ebikeInfo.longitude" :lat="ebikeInfo.latitude" @change="changePoint" />
		</view>
		<you-touchbox initTop="500" minTop="220" maxTop="5" @get-end-detail="getEndDetail">
			<scroll-view class="scroll-container" :scroll-y="isScrollY" :style="{ height: scrollHeight + 'px' }">
				<view class="">
					<view class="containerup">
						<view class="titleup">
							<span>请选择车辆</span>
							<span class="wzgl">损坏部位</span>
						</view>
					</view>
					<uni-grid :column="4" :show-border="false" :square="false" :highlight="true" @change="change">
						<uni-grid-item v-for="(item, index) in ebikelingjian" :index="index" :key="index">
							<view class="cheliangclassbox" :class="item.isSelect ? 'border_color_select' : ''">
								<uni-icons custom-prefix="iconfont" :type="item.path" :size="25" color="#777" />
							</view>
							<text class="text">{{item.name}}</text>
						</uni-grid-item>
					</uni-grid>
					<view class="padding">
						<uni-easyinput type="textarea" v-model="bzxx" placeholder="其它想说的" />
					</view>
				</view>

				<uni-section title="上传图片" type="line">
					<view class="example-body">
						<uni-file-picker limit="9" @select="selectImg" @delete="delChangeImg"
							:value="fileLists"></uni-file-picker>
					</view>
				</uni-section>
			</scroll-view>
			<!-- <view style="height: 70px;"></view> -->
		</you-touchbox>
	</view>

	<view class="nav-panel">
		<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
	</view>
	<uni-popup ref="popup" class="unipopup" :mask-click="false">
		<view v-if="popuptextlx==1" class="bg-white boxcenter">
			<view class="textbox">
				您已有当前车辆的待维修工单，是否进行维修？
			</view>
			<view class="example">
				<view class="buttongroup">
					<button @click="closePopup" class="cu-btn lg bg-blue">仍然上报</button>
					<button @click="gotomaintenancepage" class="cu-btn lg bg-blue">去维修</button>
				</view>
			</view>
		</view>

		<view v-else-if="popuptextlx==2" class="bg-white boxcenter">
			<view class="textbox">
				当前车辆故障如下，可选择进行维修:
			</view>
			<view class="textlist">

				<scroll-view class="scroll-container" scroll-y style="height: 170px;">
					<view v-for="(item,index) in gzlist" :key="index">
						<view class="flex gzboxlist">
							<view @click="check(item,index)">
								<aip-checkbox :key="keys" :check="item.checked" v-if="true"></aip-checkbox>
							</view>
							<view class="item">
								<view class="wz14">
									{{item.faultPart}}
								</view>
								<view class="wz12">
									{{item.faultDescription}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="example">
				<view class="buttongroup">
					<button @click="closePopup" class="cu-btn lg bg-blue">仍然上报</button>
					<button @click="createTicket" class="cu-btn lg bg-blue">去维修</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

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

	import mapLocation from "@/pages/map/map-location.vue";

	const ebikeInfo = ref({
		bikeId: '',
		bikeCode: '',
		ecuId: '',
		ecuSn: '',
		longitude: '',
		latitude: ''
	});

	const bikeCode = ref("");
	const childComponent = ref(null);
	const fileLists = ref([]); 
	const address = ref("");

	const delChangeImg = (res) => {
		const fileUniqueKey = fileLists.value[res.index].fileUniqueKey;
		fileLists.value.splice(res.index, 1);
		api.callEbikeInfo("deletedFile?fileUniqueKey=" + fileUniqueKey, {}, "get");
	}
	const isScrollY = ref(false)
	const getEndDetail = ({
		minTop,
		maxTop,
		curTop
	}) => {
		if (curTop == maxTop) isScrollY.value = true
		else isScrollY.value = false
	}
	const selectImg = (data) => {
		const file = data.tempFiles[0];
		api.fileUpload(file).then(res => {
			if (res.code == 200) {
				fileLists.value.push(res.data)
			} else {
				if (fileLists.value.length > 0) {
					fileLists.value.pop();
				} else {
					fileLists.value = [];
				}
			}
		});
	}

	const check = (item, index) => {
		item.checked = !item.checked;
		keys.value = keys.value == 1 ? 0 : 1;
	}
	const bzxx = ref("")
	const ebikelingjian = ref([{
			name: '车轮',
			path: 'icon-ebikechelun',
			id: 1,
			isSelect: false
		},
		{
			name: '挡泥板',
			path: 'icon-ebikedangniban',
			id: 2,
			isSelect: false
		},
		{
			name: '电池',
			path: 'icon-ebikedianchi',
			id: 3,
			isSelect: false
		},
		{
			name: '脚撑',
			path: 'icon-ebikepart',
			id: 4,
			isSelect: false
		},
		{
			name: '开关锁',
			path: 'icon-ebikekaiguansuo-guan',
			id: 5,
			isSelect: false
		},
		{
			name: '链条',
			path: 'icon-ebikeliantiao',
			id: 6,
			isSelect: false
		},
		{
			name: '前蹬',
			path: 'icon-ebikerunning-shoes',
			id: 7,
			isSelect: false
		},
		{
			name: '刹车',
			path: 'icon-ebikedolly-empty',
			id: 8,
			isSelect: false
		},
		{
			name: '转把',
			path: 'icon-ebikeziyoushihuaxue',
			id: 9,
			isSelect: false
		},
		{
			name: '座椅',
			path: 'icon-ebikezuoyi',
			id: 10,
			isSelect: false
		},
		{
			name: '其它',
			path: 'icon-ebikeqita',
			id: 11,
			isSelect: false
		}
	]);
	const navButtonGroup = [{
		text: '确认提交',
		backgroundColor: '#0078D4',
		color: '#fff'
	}];
	const bikeCodeScanChange = (bikeCode) => {
		ebikeInfo.value.bikeCode = bikeCode;
		api.callEbikeInfo("getBikeINfoData?bikeCode=" + bikeCode).then((res) => {
			if (res.code == 200) {
				ebikeInfo.value.bikeId = res.data.bikeId;
				ebikeInfo.value.ecuId = res.data.ecuId;
				ebikeInfo.value.ecuSn = res.data.ecuSn;
				const ecuSn = res.data.ecuSn;
				const params = {
					"receiver": userInfo.value.staffId,
					"bikeCode": bikeCode
				}
				api.callEbikeInfo("inspectHaveOrNotWorkOrder", params).then((res) => {
					if (res.code == 200) {
						popuptextlx.value = 1;
						popup.value.open("center");
					} else {
						api.callEbikeInfo("getFaultReportList?bikeCode=" + bikeCode, 'get').then((
							res) => {
							if (res.code == 200) {
								if (res.data != null && res.data.length > 0) {
									gzlist.value = res.data
									popuptextlx.value = 2;
									popup.value.open("center");
								}
							}
						})
					}

				})
				//获取车辆经纬度
				api.callCoreApi("gps?ecuId=" + res.data.ecuId + "&bikeId=" + ebikeInfo.value.bikeId, {}, 'get')
					.then((res) => {
						api.callCoreApi("gpsMsg" + "?ecuSn=" + ecuSn, {}, 'get').then((res) => {
							currentCoordinates.value = res.data.longitude + "," + res.data
								.latitude;
							ebikeInfo.value.latitude = res.data.latitude;
							ebikeInfo.value.longitude = res.data.longitude;
						})
					});
			}
		});
	};
	const change = (e) => {
		let {
			index
		} = e.detail
		ebikelingjian.value[index].isSelect = !ebikelingjian.value[index].isSelect

	}
	const gzlist = ref([]);
	const keys = ref(0)

	const checkscan = () => {
		if (!ebikeInfo.value.bikeCode) {
			showModelMessage("请先扫车辆码或输入车辆码");
			return false;
		}
		if (!ebikeInfo.value.bikeId) {
			showModelMessage("车辆信息不存在");
			return false;
		}
		return true;
	}
	const navButtonClick = (index, content) => {
		if (!checkscan()) {
			return
		}
		uni.showModal({
			title: '确认提交',
			content: '您确定要进行提交操作吗？',
			success: (res) => {
				if (res.confirm) {
					let faultPart = ebikelingjian.value.map(res => res.isSelect ? res.name : null)
						.filter(name => name !== null);
					const params = {
						"bikeCode": ebikeInfo.value.bikeCode,
						"longitude": Number(ebikeInfo.value.longitude),
						"latitude": Number(ebikeInfo.value.latitude),
						"faultPart": faultPart.join("|"), //故障部件
						"faultDescription": bzxx.value, //其他说明
						"reportUser": userInfo.value.staffId, //上报人
						// "reportUserName": userInfo.value.username, //上报人
						"reportSource": "运维端",
						"reqEbikeFaultReportFileDtos": fileLists.value
					}
					api.callEbikeInfo("faultReporting", params).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							});
							//提交成功返回我的页面
							uni.switchTab({
								url: "/pages/mine/mine"
							})
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'error',
								duration: 2000
							});
						}

					})

				} else if (res.cancel) {
					console.log('用户取消出库');
				}
			}
		});
	}

	const userInfo = ref(null);
	const closePopup = () => {

		popup.value.close("center");
	}
	const gotomaintenancepage = () => {
		uni.navigateTo({
			url: `/pages/devops/maintenancepage/maintenancepage?bikeCode=${ebikeInfo.value.bikeCode}`
		})
	}
	const createTicket = () => {
		//生成工单 
		const faultIds = gzlist.value.filter(item => item.checked === true).map(item => item.faultReportId);
		const params = {
			"bikeCode": ebikeInfo.value.bikeCode,
			"faultIds": faultIds,
			"receiver": userInfo.value.staffId
		}
		api.callEbikeInfo("createWorkOrder", params).then((res) => {
			if (res.code == 200) { //工单生成成功 跳转 
				closePopup();
				setTimeout(() => {
					gotomaintenancepage();
				}, 200);
			}
		})
	}

	const popuptextlx = ref(1)
	const typepopup = ref("center");
	const popup = ref(null);
	const scrollHeight = ref(0);
	const currentCoordinates  = ref(null);
	onLoad((options) => {
		userInfo.value = uni.getStorageSync('userInfo');
		const systemInfo = uni.getSystemInfoSync();
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		scrollHeight.value = screenHeight - statusBarHeight - 130;
		if (options.bikeCode) {
			bikeCode.value = options.bikeCode
		}
	})
	onMounted(() => {
		if (bikeCode.value != "") {
			if (childComponent.value) {
				childComponent.value.onSetValue(bikeCode.value); // 调用子组件暴露的方法来更新子组件值
			}
			bikeCodeScanChange(bikeCode.value);
		}
		uni.getLocation({
			type: 'wgs84', // 返回 wgs84 格式的经纬度
			success: function(res) { 
				ebikeInfo.value.latitude=res.latitude;
				ebikeInfo.value.longitude=res.longitude; 
				currentCoordinates.value=res.longitude + "," + res.latitude;
			},
			fail: function(err) {
				console.log('获取位置失败：', err);
			}
		});


	})

	const changePoint = (res) => {
		address.value = res.address;
		currentCoordinates.value = res.location.lng + "," + res.location.lat;
		ebikeInfo.value.latitude = res.location.lat;
		ebikeInfo.value.longitude = res.location.lng;
	}
</script>

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

	.example {
		text-align: center;
	}

	.titleup {
		text-align: center;
		font-size: 18px;
		letter-spacing: 2px;
		font-weight: bold;
	}

	.titleup .wzgl {
		color: rgb(46, 146, 255);
	}

	.cheliangclassbox {
		width: 60px;
		height: 60px;
		border: solid 2px rgb(227, 227, 227);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.border_color_select {
		border: solid 2px rgb(16, 130, 255);
	}

	.uni-grid-item__box {
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
	}

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

	.dialog-box {
		padding: 10px;
	}

	.boxcenter {
		width: 290px;
		padding: 15px;
	}

	.buttongroup {
		display: flex;
		justify-content: space-between;
	}

	.buttongroup button {
		width: 45%;
		font-size: 16px;
	}

	.textbox {
		width: 100%;
		padding: 15px 5px;
		text-align: center;
		font-size: 14px;
		letter-spacing: 1px;
	}

	.textlist {
		height: 180px;
	}

	.gzboxlist {
		width: 100%;
		padding: 0px;
		height: 50px;
		border: solid 1px rgb(229, 229, 229);
		align-items: center;
		margin: 6px 0px;
	}

	.wz14 {
		font-size: 14px;
		line-height: 15px;
	}

	.wz12 {
		font-size: 12px;
		line-height: 15px;
		color: rgb(191, 191, 191);
	}

	.unipopup .uni-popup {
		z-index: 199;
	}

	.classtb {}

	.classwz1 {
		font-size: 14px;
		font-weight: bold;
		color: black;
	}

	.classwz2 {
		font-size: 13px;
		color: #5a5a5a;
		font-weight: bold;
		margin-left: 20px;
	}

	.classwz3 {
		font-size: 12px;
		margin-left: 20px;
		color: #b8b8b8;
	}

	.divmap {
		width: 100%;
		height: 500px;
		margin-top: -15px;
	}
</style>