<template>
	<div id="app">

		<div style="width:100%;height: calc(100vh - 50px);display: flex;flex-direction: column;">
			<div id="container"></div>
			<div id="toolControl">
				<div class="toolItem active" id="marker" title="默认"></div>
				<div class="toolItem" id="polyline" title="����" style="display: none;"></div>
				<div class="toolItem" id="polygon" title="选择区域"></div>
				<div class="toolItem" id="circle" title="Բ��" style="display: none;"></div>
				<div class="toolItem" id="rectangle" title="����" style="display: none;"></div>
				<div class="toolItem" id="ellipse" title="��Բ" style="display: none;"></div>
			</div>
			<div style="width: 300px;background: #EEEEEE;position: absolute;z-index: 99999;top: 10px;left:10px">
				<ul class="AreaList" v-for="(item,i) in datalist">
					<li><label class="el-icon-position"></label>{{item.RegionName}}<label
							class="el-icon-delete delClass" @click="ReservationAreaDeleteHeadler(item.id,i)"></label>
					</li>
				</ul>
			</div>
		</div>
		<el-dialog title="请为该区域命名" :visible.sync="dialogAreaVisible" width="400px" :close-on-click-modal="false">
			<el-input v-model="ReservationAreaInfo.RegionName" placeholder="请输入区域名称"></el-input>
			<el-button @click="AddReservationAreaInfo()" style="float: right;margin-top: 10px;">确定</el-button>
			<div style="clear: both;"></div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		AddReservationArea,
		ReservationAreaList,
		ReservationAreaDelete
	} from '@/api/ReservationArea'
	export default {
		data() {
			return {
				activeType: "marker",
				dialogAreaVisible: false,
				datalist: [{
					RegionName: "",
					Region: "",
					State: 1
				}],
				ReservationAreaInfo: {
					RegionName: "",
					Region: "",
					State: 1
				},
				parameter: {
					pageIndex: 1,
					pageSize: 30,
					sort: "id",
					sortOrder: 1,
					keyword: "",
					status: 1
				},
				map: '',
				polygon: null
			}
		},

		created() {},
		mounted() {
			this.initMap();
		},
		methods: {
			ReservationAreaDeleteHeadler(id, index) {
				this.$confirm('确定移除该区域？', '消息', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					callback: (action) => {
						if (action == "confirm") {
							var MapId = "P" + id;
							ReservationAreaDelete(id).then(res => {
								if (res.data.code == 200) {
									this.datalist.splice(index, 1);
									this.polygon.remove([MapId]);
								}
							});
						}
					},
				})
			},
			ReservationAreaList(map, center) {
				//多边形轮廓点串（LatLng数组）
				let geometriesInfo = [];
				let that = this;
				ReservationAreaList(this.parameter).then(res => {
					var center = new window.TMap.LatLng(30.65787, 104.06584)
					this.datalist = res.data.data;
					this.datalist.forEach(function(item, i) {
						var path = [];
						var RegionList = JSON.parse(item.Region);
						RegionList.forEach(function(Ritem) {
							path.push(new window.TMap.LatLng(Ritem.lat, Ritem.lng))
						})
						geometriesInfo.push({
							'id': 'P' + item.id, //该多边形在图层中的唯一标识（删除、更新数据时需要）
							'styleId': 'polygon', //绑定样式名
							'paths': path, //多边形轮廓
						});
					});
					console.log('geometriesInfo', geometriesInfo);
					let polygon = new window.TMap.MultiPolygon({
						id: 'polygon-layer', //图层id
						map: map, //设置多边形图层显示到哪个地图实例中
						//多边形样式
						styles: {
							'polygon': new TMap.PolygonStyle({
								'color': 'rgba(0,125,255,0.3)', //面填充色
								'showBorder': false, //是否显示拔起面的边线
								'borderColor': '#00FFFF' //边线颜色
							})
						},
						//多边形数据
						geometries: geometriesInfo
					});
					console.log('polygon', polygon);
					that.polygon = polygon;
					console.log('wanggeshabi', this.polygon);
				});
			},
			AddReservationAreaInfo() {
				if (this.ReservationAreaInfo.RegionName == "") {
					this.$message('区域名称不能为空');
				} else {
					AddReservationArea(this.ReservationAreaInfo).then(res => {
						if (res.data.code == 200) {
							this.$confirm('添加区域成功', '消息', {
								confirmButtonText: '确认',
								cancelButtonText: '取消',
								callback: (action) => {
									this.initMap();
									this.dialogAreaVisible = false;
								},
							})
						}
					});
				}
			},
			initMap() {
				let _this = this;
				document.getElementById('toolControl').addEventListener('click', (e) => {
					var id = e.target.id;
					if (id !== 'toolControl') {
						document.getElementById(this.activeType).className = 'toolItem';
						document.getElementById(id).className = 'toolItem active';
						this.activeType = id;
						editor.setActiveOverlay(id);
					}
				});
				var center = new window.TMap.LatLng(30.65787, 104.06584)
				// 定义map变量，调用 TMap.Map() 构造函数创建地图
				var map = new window.TMap.Map(document.getElementById("container"), {
					center: center, // 设置地图中心点坐标
					zoom: 13 // 设置地图缩放级别
				});
				this.map = map;
				this.ReservationAreaList(map, center);

				var editor = new window.TMap.tools.GeometryEditor({
					// TMap.tools.GeometryEditor �ĵ���ַ��https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
					map: map, // �༭���󶨵ĵ�ͼ����
					overlayList: [
						// �ɱ༭ͼ�� �ĵ���ַ��https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
						{
							overlay: new window.TMap.MultiMarker({
								map: map,
							}),
							id: 'marker',
						},
						{
							overlay: new window.TMap.MultiPolyline({
								map: map,
							}),
							id: 'polyline',
						},
						{
							overlay: new window.TMap.MultiPolygon({
								map: map,
							}),
							id: 'polygon',
						},
						{
							overlay: new window.TMap.MultiCircle({
								map: map,
							}),
							id: 'circle',
						},
						{
							overlay: new window.TMap.MultiRectangle({
								map: map,
							}),
							id: 'rectangle',
						},
						{
							overlay: new window.TMap.MultiEllipse({
								map: map,
							}),
							id: 'ellipse',
						},
					],
					actionMode: window.TMap.tools.constants.EDITOR_ACTION.DRAW, //
					activeOverlayId: 'marker', // 
					snappable: true, // 
				});

				editor.on('draw_complete', (geometry) => {
					console.log(geometry);
					if (geometry.paths != undefined) {
						_this.ReservationAreaInfo.Region = JSON.stringify(geometry.paths);
						_this.dialogAreaVisible = true;
					}

					// console.log(geometry[0])
				});
			}
		}
	}
</script>

<style>
	#container {
		width: 100%;
		display: flex;
		flex: 1;
	}
	#marker {
		background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
	}
	#polyline {
		background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
	}
	#polygon {
		background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
	}
	#circle {
		background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
	}
	#rectangle {
		background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
	}
	#ellipse {
		background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
	}
	#toolControl {
		position: absolute;
		top: 10px;
		left: 0px;
		right: 0px;
		margin: auto;
		width: 110px;
		z-index: 1001;
	}
	.toolItem {
		width: 50px;
		height: 50px;
		float: left;
		margin: 1px;
		padding: 4px;
		border-radius: 3px;
		background-size: 40px 40px;
		background-position: 4px 4px;
		background-repeat: no-repeat;
		box-shadow: 0 1px 2px 0 #e4e7ef;
		background-color: #ffffff;
		border: 1px solid #ffffff;
	}
	.toolItem:hover {
		border-color: #789cff;
	}
	.active {
		border-color: #d5dff2;
		background-color: #d5dff2;
	}
	.AreaList {
		list-style: none;
		padding: 0px;
		margin: 0px;
		background: none;
	}
	.AreaList li {
		padding: 0 10px;
		line-height: 40px;
		height: 40px;
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 10px;
		border-radius: 5px;
		background: #304156;
		color: #fff;
		box-shadow: 0 0 5px #cdcdcd;
	}
	.AreaList li label {
		margin-right: 10px;
	}
	/* 	.AreaList li:hover {
		background-color: #409EFF;
		color: #FFF;
	} */
	.delClass {
		float: right;
		line-height: 40px;
		cursor: pointer;
		text-align: center;
		width: 20px;
	}
	.delClass:hover {
		color: #FFF;
		font-size: 20px;
		font-weight: bold;
		text-shadow: 0 0 1px #FFF;
	}
</style>
