<template>
	<div class="app-container">
		<div class="calib-dra-class-all">
			<OlMap ref="olmap" :width="olWidth + 'px'" :height="olHeight + 'px'" backgroundColor="#F5F5F5"
				:robotPoseData="laserPositionData" :poseCalibrationIndex="nowCalibId"></OlMap>
			<el-drawer :visible.sync="calibrationDra" :direction="'rtl'" :modal="false" :size="'100%'" :with-header="false"
				custom-class="calibration-dra-class" :wrapperClosable="false">
				<div class="calibration-dra-class_content">
					<p style="color: #404040;font-weight: bold;margin-bottom: 5px;">实时位姿<i class="el-icon-close"
							style="float: right;cursor: pointer;" @click="calibrationDra = false"></i></p>
					<span style="color: #FC523B;font-size: 13px;">(当前地图:{{ currentMap.name }})</span>
					<div class="current-pose">
						<div style="width: 100%;padding: 12px 0;text-align: left;"><span style="color: #797979;">激光定位</span></div>
						<el-row style="margin-bottom: 5px;">
							<el-col :span="6">
								<div class="grid-content dra-content-pose-left">x坐标</div>
							</el-col>
							<el-col :span="18">
								<div class="grid-content dra-content-pose-right">{{ laserPositionData.x }}</div>
							</el-col>
						</el-row>
						<el-row style="margin-bottom: 5px;">
							<el-col :span="6">
								<div class="grid-content dra-content-pose-left">y坐标</div>
							</el-col>
							<el-col :span="18">
								<div class="grid-content dra-content-pose-right">{{ laserPositionData.y }}</div>
							</el-col>
						</el-row>
						<el-row style="margin-bottom: 5px;">
							<el-col :span="6">
								<div class="grid-content dra-content-pose-left">航向角</div>
							</el-col>
							<el-col :span="18">
								<div class="grid-content dra-content-pose-right">{{ laserPositionData.angle }}</div>
							</el-col>
						</el-row>
						<div style="width: 100%;padding: 12px 0;text-align: left;"><span style="color: #797979;">GNSS定位</span></div>
						<el-row style="margin-bottom: 5px;">
							<el-col :span="6">
								<div class="grid-content dra-content-pose-left">状态</div>
							</el-col>
							<el-col :span="18">
								<div class="grid-content dra-content-pose-right">{{ gnssPositionData.status }}</div>
							</el-col>
						</el-row>
						<el-row style="margin-bottom: 5px;">
							<el-col :span="6">
								<div class="grid-content dra-content-pose-left">经度</div>
							</el-col>
							<el-col :span="18">
								<div class="grid-content dra-content-pose-right">{{ gnssPositionData.longitude }}</div>
							</el-col>
						</el-row>
						<el-row style="margin-bottom: 5px;">
							<el-col :span="6">
								<div class="grid-content dra-content-pose-left">纬度</div>
							</el-col>
							<el-col :span="18">
								<div class="grid-content dra-content-pose-right">{{ gnssPositionData.latitude }}</div>
							</el-col>
						</el-row>
						<el-row style="margin-bottom: 5px;">
							<el-col :span="6">
								<div class="grid-content dra-content-pose-left">方向角</div>
							</el-col>
							<el-col :span="18">
								<div class="grid-content dra-content-pose-right">{{ gnssPositionData.angle }}</div>
							</el-col>
						</el-row>
						<el-button round style="width: 100%;margin-top: 10px;border: none;background-color: #F2F2F2;" icon="el-icon-circle-plus"
							@click="addCalibration()">添加标定点</el-button>
					</div>
					<div class="point-data">
						<div>
							<p style="color: #404040;font-weight: bold;">当前标定点</p>
							<el-card class="box-card" shadow="hover">
								<div class="add-calibration-list" v-if="calibrationList.length == 0">
									<el-row style="padding: 8px 0;">
										<el-col :span="3">
											<div class="add-calibration-list_grid-content">无</div>
										</el-col>
										<el-col :span="18">
											<div class="add-calibration-list_grid-content"></div>
										</el-col>
										<el-col :span="3">
											<div class="add-calibration-list_grid-content"></div>
										</el-col>
									</el-row>
								</div>
								<div class="add-calibration-list" v-else>
									<el-row style="padding: 8px 0;" v-for="item in calibrationList" :key="item.id">
										<el-col :span="3">
											<div class="add-calibration-list_grid-content">{{ item.id }}</div>
										</el-col>
										<el-col :span="18">
											<div class="add-calibration-list_grid-content">{{ item.coordinate }}</div>
										</el-col>
										<el-col :span="3" style="cursor: pointer;">
											<div class="add-calibration-list_grid-content" @click="removeCalibration(item.id)"><i
													class="el-icon-delete"></i></div>
										</el-col>
									</el-row>
								</div>
							</el-card>
						</div>
						<div class="calibration-key">
							<el-button style="width: 100%;margin-top: 10px;border: none;background-color: #F2F2F2;" icon="el-icon-success"
								@click="executeCalibration()">一键标定</el-button>
						</div>
					</div>
				</div>
			</el-drawer>
		</div>
		<div class="fixed-right-center" @click="showInfoDra" v-if="!calibrationDra">
			<i class="el-icon-arrow-left"></i>
		</div>
	</div>
</template>

<script>
import OlMap from "@/components/OlMap";

export default {
	name: "Calibration",
	components: {
		OlMap
	},
	data() {
		return {
			// 弹出层标题
			title: "",
			calibrationDra: true,
			calibrationList: [],
			// 激光定位数据
			laserPositionData: {
				x: 0,
				y: 0,
				angle: 0
			},
			// gnss定位数据
			gnssPositionData: {
				status: '0/0',
				longitude: 0,
				latitude: 0,
				angle: 0.000
			},
			// 当前地图
			currentMap: {
				id: 1,
				name: 'sh02'
			},
			olWidth: 0,  // 用于存储宽度的变量
			olHeight: 0,
			nowCalibId: 0 // 当前标定点id
		};
	},
	created() {

	},
	mounted() {
		const mapId = this.$route.params.mapId;
		this.updateOlCss();
		window.addEventListener('resize', this.updateOlCss);
	},
	methods: {
		updateOlCss() {
			const element = this.$el.querySelector('.calib-dra-class-all');
			this.olWidth = element.offsetWidth;
			this.olHeight = element.offsetHeight;
		},
		// 展开右侧实时信息
		showInfoDra() {
			this.calibrationDra = true;
		},
		// 添加标定
		addCalibration() {
			// 需要获取无人车实时坐标, 现在先写死
			this.nowCalibId = this.calibrationList.length > 0 ? this.calibrationList[this.calibrationList.length - 1].id + 1 : 1;
			let coordinate = `${this.laserPositionData.x},${this.laserPositionData.y}`
			let data = { id: this.nowCalibId, coordinate: coordinate, angle: this.laserPositionData.angle }
			this.calibrationList.push(data)
		},
		// 移除标定
		removeCalibration(id) {
			if (this.calibrationList.length < 1) {
				return;
			}
			this.calibrationList = this.calibrationList.filter(item => item.id !== id);
			// 删除图标
			this.nowCalibId = - id;
		},
		// 一键标定
		executeCalibration() {
			if (this.calibrationList.length < 1) {
				this.$message('请添加标定点!');
				return;
			}
			this.$modal.msgSuccess("已添加标定点");
		}
	}
};
</script>

<style scoped>
.current-pose {
	margin-top: 10px;
}

.add-calibration-list_grid-content {
	text-align: center;
	font-size: 14px;
}

.point-data {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
}

::v-deep .point-data .el-card__body,
.el-main {
	padding: 5px;
}

.grid-content {
	text-align: center;
	color: #fff;
	padding: 6px 4px;
	font-weight: bold;
	font-size: 15px;
}

.dra-content-pose-left {
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #24A7E0, #27D8E0);
	border-radius: 5px 0 0 5px;
}

.dra-content-pose-right {
	width: 100%;
	height: 100%;
	background-color: #fff;
	color: #676767;
	padding: 7px 7px;
	border-radius: 0 5px 5px 0;
}

.dra-title {
	text-align: center;
}

.calibration-dra-class_content {
	padding: 0 15px 15px 15px;
}

.fixed-right-center {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 255, 0.6);
	padding: 4px;
	color: white;
	border-radius: 6px 0 0 6px;
	cursor: pointer;
}

.explore-unit {
	margin-left: 8px;
}

::v-deep .el-table__header-wrapper {
	border-radius: 10px 10px 0 0;
}

::v-deep .el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
	background-color: #f6f6f6;
}

::v-deep .el-table--medium .el-table__cell {
	padding: 8px 0;
}

::v-deep .el-dialog__body {
	padding: 20px 20px 0 20px;
}

::v-deep .download-map .el-dialog__body {
	padding: 10px 20px 0 20px !important;
}

::v-deep .el-message-box {
	border-radius: 10px;
}

::v-deep .calib-dra-class-all .el-drawer__wrapper {
	width: 15%;
	left: 85%;
}

@media (max-width: 1599px) {
  ::v-deep .calib-dra-class-all .el-drawer__wrapper {
	width: 18%;
	left: 82%;
}
}

@media (max-width: 1269px) {
  ::v-deep .calib-dra-class-all .el-drawer__wrapper {
	width: 21%;
	left: 79%;
}
}

@media (max-width: 1000px) {
  ::v-deep .calib-dra-class-all .el-drawer__wrapper {
	width: 24%;
	left: 76%;
}
}

.calib-dra-class-all {
	width: 100%;
	min-height: calc(100vh - 84px);
}

.app-container {
	width: 100%;
	height: 100%;
	padding: 10px;
	min-width: 1100px;
	overflow-x: auto;
}
</style>

<style>
.calibration-dra-class {
	background-color: #FAFAFA;
	box-shadow: none;
	border-radius: 5px 0 0 5px;
}

.calibration-dra-class .el-drawer__header {
	margin-bottom: 20px;
	color: #404040;
	padding: 15px 15px 0;
	font-weight: bold;
}
</style>