<template>
	<div class="container">
		<div class="table-operate">
			<el-button class="btn" type="primary" @click="add">添加</el-button>
			<el-button class="btn" type="info" @click="settingsSimulation">设为仿真视角</el-button>
		</div>
		<el-table class="table-content" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
			<el-table-column label="序号">
				<template slot-scope="scope">
					<el-radio v-model="currentFactor" :label="getRowIndex(scope.$index)"
						@change="changeRowIndex(scope.row)"></el-radio>
				</template>
			</el-table-column>
			<el-table-column label="选择车辆">
				<template slot-scope="scope">
					<el-select v-model="scope.row.carId" class="algorithm-select">
						<el-option v-for="item in carList" :key="item.code" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column label="选择算法">
				<template slot-scope="scope">
					<el-select v-model="scope.row.algorithmId" class="algorithm-select">
						<el-option v-for="item in algorithmList" :key="item.code" :label="item.name" :value="item.code">
						</el-option>
					</el-select>
				</template>
			</el-table-column>
			<el-table-column label="选择轨迹">
				<template slot-scope="scope">
					<div @click="showDialog(scope.row)" class="path-text">{{getSelectPathText(scope.row)}}</div>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button class="delete-btn" size="mini-btn" type="danger"
						@click="deleteRecord(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	export default {
		name: "SimulationTable",
		components: {
			// vueQr,
			// glHome,
		},
		data() {
			return {
				currentFactor: "",
				tableData: [],
				carList: [],
				algorithmList: [],
				selectRow: {},
				showRow: {},
				notSaved: [],
				contentHasSave: false,
				mockData: {
					"sceneId": "",
					"carId": "",
					"carName": "",
					"sceneCarId": "",
					"algorithmId": "",
					"algorithmType": 0,
					"pathId": "",
					"pathStart": {},
					"pathEnd": {}
				},
				defaultData: {
					"newType": "new",
					"newUuid": "",
					"id": "",
					"sceneId": "",
					"carId": "",
					"algorithmId": "",
					"algorithmType": 0,
					"pathId": "",
					"sceneCarId": null,
					"pathStartJson": {

					},
					"pathEndJson": {}
				},
				collectPointsSelected: {}
			};
		},
		props: {
			sceneId: {
				type: String,
				default: _ => ""
			},
			mapId: {
				type: String,
				default: _ => ""
			}
		},
		computed: {
			getSelectPathText(row) {
				return (row) => "轨迹" + row.pathSort + " (" + row.pathStartJson.name + "," + row.pathEndJson.name + ")";
			}
		},
		mounted() {
			this.getCarList();
			this.getAlgorithmList();
			this.getSceneCarList();
		},
		methods: {
			add() {
				let newRow = JSON.parse(JSON.stringify(this.defaultData));
				newRow.newUuid = this.getUUID();
				this.tableData.push(newRow);
				this.notSaved.push(newRow);

			},
			updateRow(data) {
				this.showRow.pathId = data.pathId;
				this.showRow.pathStartJson = data.pathStartJson;
				this.showRow.pathEndJson = data.pathEndJson;
				this.showRow.pathSort = data.pathSort;
			},
			getRowIndex(rowIndex) {
				return rowIndex + 1;
			},
			changeRowIndex(row) {
				this.selectRow = row;
				this.$emit("changeRow", row);
			},
			showDialog(row) {
				this.showRow = row;
				this.collectSelectedPoints(this.tableData);
				let data = {
					pathId: row.pathId,
					pathStartJson: row.pathStartJson,
					pathEndJson: row.pathEndJson,
					selectedPoints: this.collectPointsSelected
				};
				this.$emit("openDialog", data);
			},
			getSceneCarList() {
				this.$axios({
					method: "post",
					url: this.$api.workManagement.sceneCarList,
					data: {
						"sceneId": this.sceneId,
						"mapId": this.mapId,
						"pageNum": "1",
						"pageSize": 999999
					}
				}).then((res) => {
					if (res.code == 200) {
						this.tableData = res.info.list;
					}
				})
			},
			getCarList() {
				this.$axios({
					method: "post",
					url: this.$api.workManagement.carList,
					data: {
						"dropDownType": "2",
						"algorithmType": "1"
					}
				}).then((res) => {
					if (res.code == 200) {
						this.carList = [...res.info[0].dropDownList[0].children, ...res.info[0]
							.dropDownList[1]
							.children
						];
						if (this.carList.length > 0) {
							this.selectCarId = this.carList[0].code;
						}
					}
				})
			},
			collectSelectedPoints(dataList) {
				this.collectPointsSelected = {};
				dataList.forEach((elem, index) => {
					if (elem.pathId) {
						if (!this.collectPointsSelected[elem.pathId]) {
							this.collectPointsSelected[elem.pathId] = {};
						}
						let tarckSelected = this.collectPointsSelected[elem.pathId];
						if (!tarckSelected.start) {
							tarckSelected.start = [];
						}
						tarckSelected.start.push(elem.pathStartJson.name);
						if (!tarckSelected.end) {
							tarckSelected.end = [];
						}
						tarckSelected.end.push(elem.pathEndJson.name);
					}
				})
			},
			deleteRecord(row) {
				this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					if (row.newType) {
						this.removeViewTableRecord(row);
					} else {
						this.$axios({
							method: "post",
							url: this.$api.workManagement.deleteRecord,
							data: {
								"sceneCarId": row.id
							}
						}).then((res) => {
							if (res.code == 200) {
								this.removeViewTableRecord(row);
							}
						})
					}
				}).catch(() => {});
			},
			removeViewTableRecord(row) {
				let length = this.tableData.length;
				for (let index = 0; index < length; index++) {
					let elem = this.tableData[index];
					if ((row.newUuid && row.newUuid == elem.newUuid) || (row.id && row.id == elem.id)) {
						this.tableData.splice(index, 1);
						break;
					}
				}
			},
			getAlgorithmList() {
				this.$axios({
					method: "post",
					url: this.$api.workManagement.algorithmList,
					data: {
						"dropDownType": "1",
						"algorithmType": "1"
					}
				}).then((res) => {
					if (res.code == 200 && res.info) {
						this.algorithmList = [...res.info[0].dropDownList[0].children, ...res.info[0]
							.dropDownList[
								1].children
						];
						if (this.algorithmList.length > 0) {
							this.selectAlgorithmId = this.algorithmList[0].code;
						}
					}
				})
			},
			settingsSimulation() {
				this.$emit("simulationBtnCallBack", this.selectRow);
			},
			saveAll(mapId) {
				this.$axios({
					method: "post",
					url: this.$api.workManagement.saveOrUpdateSceneCarList,
					data: {
						"mapId": mapId,
						"sceneId": this.sceneId,
						"paramList": this.switchModel(this.tableData)
					}
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							message: '保存成功',
							type: 'success'
						});
						this.getSceneCarList();
					} else {
						this.$message({
							message: '保存失败',
							type: 'warning'
						});
					}
				})
			},
			switchModel(dataArr) {
				let newDataArr = []
				dataArr.forEach((elem, index) => {
					let data = {
						"sceneId": elem.sceneId,
						"carId": elem.carId,
						"carName": elem.carName,
						"sceneCarId": elem.sceneCarId,
						"algorithmId": elem.algorithmId,
						"algorithmType": elem.algorithmType,
						"pathId": elem.pathId,
						"pathStart": elem.pathStartJson,
						"pathEnd": elem.pathEndJson
					}
					if (elem.newType) {
						data.sceneId = this.sceneId;
						data.sceneCarId = "";
					} else {
						data.sceneCarId = elem.id;
					}

					newDataArr.push(data);
				})
				return newDataArr;
			},
			S4() {
				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
			},
			getUUID() {
				return (this.S4() + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this.S4() + "-" + this
					.S4() +
					this.S4() + this.S4());
			}
		},
		watch: {
			mapId: {
				handler(newVal, oldVal) {
					this.getSceneCarList();
				}
			}
		}
	}
</script>

<style lang='less' scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.table-operate {
		height: 3.1rem;
		display: flex;
		flex-direction: row;
		justify-content: right;
		align-items: center;
	}

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

	.table-content {
		flex: auto;
	}

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

	.path-text {
		cursor: pointer;
		font-size: 0.75rem;
	}

	/deep/ .table-content {
		height: 100%;
		overflow-y: scroll;
	}
	/deep/ .el-input,/deep/ .el-input__inner{
		width: 100px !important;
	}
</style>