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

			<view class="padding">
				<uni-forms>
					<uni-forms-item label="车辆编号">
						<uni-easyinput :disabled="true" v-model="bikeCode" placeholder="车辆编号" />
					</uni-forms-item>
					<span @click="goToSH">去审核</span>
				</uni-forms>
			</view>
			<view class="">
				<view class="containerup">
					<view class="titleup">
						<view>请选择车辆损坏部位</view>
						<view class="wzgl">上报故障车辆让出行更美好~</view>
					</view>
				</view>
				<view class="chetoubox">
					<view class="flex ">
						<view class="cheleft">
							<view class="text-center">
								<view class="">
									车头部位
								</view>
								<view class="cheimage">
									<image :src="`${imgPath}static/userui/ebike/车头.png`" mode=""></image>
								</view>
							</view>
						</view>
						<view style="width: 70%;" class="flex flex-wrap">
							<view v-for="(item,index) in ebikelingjiantop" :key="index" class="ebikelingjianclass">
								<view :class="['boxlinjian', { selectImg: item.selected }]"
									@click="selectParttop(index)">
									<image :src="item.image"></image>
									<view>{{ item.name }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex ">
						<view class="cheleft">
							<view class="text-center">
								<view class="">
									车尾部位
								</view>
								<view class="cheimage">
									<image :src="`${imgPath}static/userui/ebike/车尾.png`" mode=""></image>
								</view>
							</view>
						</view>
						<view style="width: 70%;" class="flex flex-wrap">
							<view v-for="(item,index) in ebikelingjianend" :key="index" class="ebikelingjianclass">
								<view :class="['boxlinjian', { selectImg: item.selected }]"
									@click="selectPartend(index)">
									<image :src="item.image"></image>
									<view>{{ item.name }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<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>
		<!-- </you-touchbox> -->
		<view class="nav-panel">
			<uni-goods-nav :fill="true" :options="[]" :buttonGroup="navButtonGroup" @buttonClick="navButtonClick" />
		</view>
	</view>
</template>

<script setup>
	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";
	import config from '@/utils/config';
	const imgPath = config.imgPath;

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

	const bikeCode = ref("");
	const orderCode = 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.callMaintenanceApi("ebikeOrdersSystem/deletedFile?fileUniqueKey=" + fileUniqueKey, {}, "get");
	}
	const isScrollY = ref(true)
	const getEndDetail = ({
		minTop,
		maxTop,
		curTop
	}) => {
		if (curTop == maxTop) isScrollY.value = true
		else isScrollY.value = false
	}
	const selectImg = (data) => {
		const file = data.tempFiles[0];
		api.fileUploadUser(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 ebikelingjiantop = ref([{
			image: `${imgPath}static/userui/ebike/车把.png`,
			name: '车把',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/车头1.png`,
			name: '车头',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/车灯.png`,
			name: '车灯',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/二维码.png`,
			name: '二维码',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/车筐.png`,
			name: '车筐',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/线路.png`,
			name: '线路',
			selected: false
		}
	]);
	const ebikelingjianend = ref([{
			image: `${imgPath}static/userui/ebike/车座.png`,
			name: '车座',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/电池.png`,
			name: '电池',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/车轮.png`,
			name: '车轮',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/脚蹬.png`,
			name: '脚蹬',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/车撑.png`,
			name: '车撑',
			selected: false
		},
		{
			image: `${imgPath}static/userui/ebike/挡板.png`,
			name: '挡板',
			selected: 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;
				//获取车辆经纬度
				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 selectParttop = (index) => {
		ebikelingjiantop.value[index].selected = !ebikelingjiantop.value[index].selected
	}
	const selectPartend = (index) => {
		ebikelingjianend.value[index].selected = !ebikelingjianend.value[index].selected
	}
	const gzlist = ref([]);
	const keys = ref(0)

	const checkscan = () => {
		if (!bikeCode.value) {
			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 = [
						...ebikelingjiantop.value
						.map(res => res.selected ? res.name : null)
						.filter(name => name !== null),
						...ebikelingjianend.value
						.map(res => res.selected ? res.name : null)
						.filter(name => name !== null)
					];
					const params = {
						// "faultReportId": "string",
						"bikeCode": bikeCode.value,
						// "position": "string",
						"faultPart": faultPart.join("|"),
						"faultDescription": bzxx.value,
						// "reportAt": "string",
						// "isDeleted": "string",
						// "updatedAt": "string",
						// "deletedAt": "string",
						"reportUser": wechat_user.value.nickname,
						"userMobile": wechat_user.value.mobile,
						"reportSource": "微信小程序",
						// "handleState": "string",
						"longitude": Number(ebikeInfo.value.longitude),
						"latitude": Number(ebikeInfo.value.latitude),
						"orderCode": orderCode.value,
						// "workorderId": "string",
						"attachmentFiles": fileLists.value
					}
					api.callOrdereApi("ebikeUserFaultreport/save", params).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000,
								complete: function() {
									// 在弹出提示框后再跳转到我的页面
									uni.switchTab({
										url: "/pages/user/mine/MePage"
									});
								}
							});
						} 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,
			"receiverId": 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 wechat_user = ref(null);
	const scrollHeight = ref(0);
	const currentCoordinates = ref(null);
	onLoad((options) => {
		userInfo.value = uni.getStorageSync('userInfo');
		wechat_user.value = uni.getStorageSync('wechat_user');
		const systemInfo = uni.getSystemInfoSync();
		const screenHeight = systemInfo.screenHeight;
		const statusBarHeight = systemInfo.statusBarHeight;
		scrollHeight.value = screenHeight - statusBarHeight;
		if (options.bikeCode) {
			bikeCode.value = options.bikeCode;
			orderCode.value = options.orderCode;
		}
	})
	onMounted(() => {
		if (bikeCode.value != "") {
			bikeCodeScanChange(bikeCode.value);
		}


	})

	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;
	}
	const goToSH = () => {
		uni.navigateTo({
			url: "/pages/warehouse/UserReportedFaults/UserReportedFaults"
		})
	}
</script>

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

	.example {
		text-align: center;
	}

	.titleup {
		font-size: 18px;
		letter-spacing: 2px;
		font-weight: bold;
		padding: 0px 10px;
	}

	.titleup .wzgl {
		color: rgb(164, 169, 172);
		font-size: 12px;
	}

	.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;
	}

	.ebikelingjianclass {
		width: 33%;

	}

	.chetoubox {
		margin: 10px;
		border-radius: 10px;
		padding: 10px;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3)
	}

	.cheleft {
		width: 30%;
	}

	.cheimage image {
		width: 60px;
		height: 70px;
		margin-top: 30px;
	}

	.boxlinjian {
		text-align: center;
		font-size: 12px;
		padding-bottom: 12px;
	}

	.boxlinjian image {
		width: 50px;
		height: 50px;
		border: solid 3px rgb(230, 230, 230);
		border-radius: 11px;
		background: white;
		padding: 7px;
	}


	.selectImg image {
		border: solid 3px rgb(156, 235, 131);
		background: rgb(208, 241, 196);
	}
</style>