<template>
	<div class="container">
		<div class="select-map" :class="{'no-interaction': isDisabled}">
			地图选择：
			<el-select class="select-content" v-model="openDrive.mapId" placeholder="请选择" @change="changeMapId">
				<el-option v-for="(item, index) in mapList" :key="item.id" :label="item.mapName" :value="item.id">
				</el-option>
			</el-select>
		</div>
		<div class="content">
			<open-drive class="map" ref="openDrive" :mapId="openDrive.mapId" :startPoint="openDrive.pathStartJson"
				:endPoint="openDrive.pathEndJson" :sections="openDrive.sections"></open-drive>
			<SimulationTable ref="table" @simulationBtnCallBack="settingSimulation" @openDialog="showDialog"
				class="table" :sceneId="sceneId" :mapId="openDrive.mapId" :class="{'no-interaction': isDisabled}" />
		</div>
		<div class="operate" :class="{'no-interaction': isDisabled}">
			<el-button @click="saveAll" class="btn" type="primary">保存</el-button>
			<el-button @click="back" class="btn" type="info">返回</el-button>
		</div>
		<PathDialog :open="dialog.dialogOpen" :params="dialog.dialogParam" @onClose="closeDialog"
			@onSubmit="sumbitDialog" @change="changeMap" />
	</div>
</template>

<script>
	import OpenDrive from "@/views/workManagement/components/openDriver";
	import PathDialog from "@/views/workManagement/components/pathDialog";
	import SimulationTable from "@/views/workManagement/components/simulationTable";

	export default {
		name: "MultimodeSimulationEdit", // 工作管理
		components: {
			OpenDrive,
			PathDialog,
			SimulationTable
		},
		data() {
			return {
				isDisabled: false,
				mapList: [],
				sceneId: "",
				dialog: {
					dialogParam: {},
					dialogOpen: false
				},
				openDrive: {
					mapId: "",
					pathStartJson: {},
					pathEndJson: {},
					sections: []
				}
			}

		},
		beforeMount() {
			this.sceneId = this.$route.query.sceneId;
			// if(!this.sceneId){
			// 	this.sceneId = "b1e8fb96cf8a41d9a0364d29a9289628";
			// }
		},
		mounted() {
			this.getMapList();
			
		},
		methods: {
			getDefaultMap() {
				this.$axios({
					method: "post",
					url: this.$api.workManagement.getMultiSimulationSceneDetail,
					data: {
						"sceneId": this.sceneId
					}
				}).then((res) => {
					if (res.code == 200) {
						if(res.info.mapId){
							this.openDrive.mapId = res.info.mapId;
						}
					}
				})
			},
			changeMapId() {
				console.log(this.openDrive.mapId);
			},
			getMapList() {
				this.$axios({
					method: "post",
					url: this.$api.workManagement.mapList,
					data: {
						"pageNum": 0,
						"pageSize": 999999
					}
				}).then((res) => {
					if (res.code == 200) {
						this.mapList = res.info;
						if (this.mapList.length > 0) {
							this.$axios({
								method: "post",
								url: this.$api.workManagement.mapList,
								data: {
									"pageNum": 0,
									"pageSize": 99999
								}
							}).then((res) => {
								if (res.code == 200) {
									this.mapList = res.info;
									if (this.mapList.length > 0) {
										this.openDrive.mapId = this.mapList[0].id;
										this.getDefaultMap();
									}
								}
							})
						}

					}
				})
			},
			settingSimulation(row) {
				if (row.id == null || row.id == "") {
					this.$message({
						message: '警告哦，请选择一条已保存记录',
						type: 'warning'
					});
					return;
				}

				this.$confirm('确定设为仿真视角？')
					.then(_ => {
						this.$axios({
							method: "post",
							url: this.$api.workManagement.settingsSimulation,
							data: {
								"sceneCarId": row.id,
							}
						}).then((res) => {
							if (res.code == 200) {
								this.$message({
									message: '设为仿真视角成功',
									type: 'success'
								});
							} else {
								this.$message({
									message: '设为仿真视角失败',
									type: 'warning'
								});
							}
						})
					})
					.catch(_ => {});

			},
			reloadMap() {
				setTimeout(() => {
					this.$refs.openDrive.reloadMap();
				}, 50);
			},
			changeMap(data) {
				this.openDrive = data;
			},
			showDialog(data) {
				this.isDisabled = true;
				this.dialog.dialogOpen = true;
				this.dialog.dialogParam = Object.assign({}, data, {
					mapId: this.openDrive.mapId
				});
			},
			closeDialog() {
				this.dialog.dialogOpen = false;
				this.isDisabled = false;
				this.reloadMap();
			},
			sumbitDialog(data) {
				this.dialog.dialogOpen = false;
				this.isDisabled = false;
				this.$refs.table.updateRow(data);
				this.reloadMap();
			},
			saveAll() {
				this.$refs.table.saveAll(this.openDrive.mapId);
			},
			back() {

				this.$router.go(-1);
			}
		}
	};
</script>

<style lang='less' scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: content-box;
	}

	.mainBox {
		padding-bottom: 0px !important
	}

	.container {
		/* background-color: rebeccapurple; */
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 0 0.5rem;
	}

	.select-map {
		font-size: 1rem;
		color: #333333;
		letter-spacing: 0.05rem;
		display: flex;
		align-items: center;
		padding-left: 1rem;
		width: 100%;
		/* padding: 1rem; */
		height: 4rem;
	}

	.content {
		display: flex;
		flex-direction: row;
		padding: 0.2rem;
		height: 38rem;
	}

	.operate {
		height: 4rem;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0rem;
	}


	.block {
		height: auto;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.map {
		flex: 1.5;
	}

	.table {
		flex: 1;
		border: 0.05rem solid #DCDCDC;
		margin: 0 0.2rem 0 0.25rem;
	}

	.btn {
		color: #FFFFFF;
		height: 1.5rem;
		margin: 1rem;
	}

	.open-drive {
		width: 100%;
		height: 100%;
	}

	.delete-btn {
		color: #FFFFFF;
		border-radius: 0.5rem;
	}

	/deep/ div.cell {
		text-align: center;
	}

	/deep/ th div.cell {
		font-size: .9rem;
		font-weight: bold;
	}

	.block {
		border: none !important;
	}

	.el-dialog__wrapper {
		pointer-events: none;

		/deep/ .el-dialog {
			pointer-events: auto;
		}
	}

	/deep/ .el-dialog {
		position: absolute !important;
		top: 0 !important;
		right: 10rem !important;
	}

	.no-interaction {
		pointer-events: none;
		/* 其他样式，比如背景色、边框等 */
		/* 	  background-color: #f0f0f0;
	  border: 1px solid #ccc; */
		/* 	  padding: 10px;
	  margin: 10px; */
	}
</style>