<template>
	<el-drawer
		:title="areaName+'围栏设置'"
		v-model="visible"
		destroy-on-close
		@closed="closeDrawer"
	>
		<el-form
			:model="coordinates"
			label-width="80px"
			style="position:absolute;top:15px;left:200px;"
		>
			<el-form-item label="围栏名称" prop="name">
				<el-input
					v-model="coordinates.railName"
					placeholder="请输入围栏名称"
					clearable
					style="width: 150px;"
				></el-input>
			</el-form-item>
		</el-form>
		<el-container v-loading="loading">
			<el-main style="padding: 0 20px 20px 20px;">
				<!--地图-->
				<div id='mapContainer1'></div>
			</el-main>
			<el-footer>
				<el-button
					type="primary"
					:loading="isSaveing"
					@click="submit"
				>
					保存
				</el-button>
				<el-button @click="visible = false">取消</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	export default {
		emits: ["success", "closed"],
		props: {
			areaId: {
				type: String,
			},
			areaName: {
				type: String,
			}
		},
		data() {
			return {
				loading: false,
				visible: true,
				isSaveing: false,
				coordinates:{
					floorNo:'',
					railName:'',
					railType:1,//1:多边形；0表示圆形
					mapType:'1',//点位信息有经纬度则为2，有xy则为1
					color:'1',
					polygon:{
						points:[]
					}
				},
				points:[],
			};
		},
		mounted() {
			this.$nextTick(()=>{
				this.loadMap();
			})
		},
		methods: {
			loadMap(){
				let that = this;
				window.map = new jsmap.JSMap({
					mapType: jsmap.JSMapType.MAP_3D,
					container: 'mapContainer1',
					mapServerURL: 'data/map',
					enableShadows: false, //是否开启阴影 默认false
					enableLighting: false, //是否开发光照 默认false
					luminanceAtZenith: 0.54, //纹理亮度
					scatteringIntensity: 1.0, //镜面强度
					specularIntensity: 0, //散射强度
					mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
					floorControlOptions: {
						floorHeight: 20,//楼层间距
						position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
						offset: {
							x: 10,
							y: 10,
						}//控件偏移位置
					},
					imageryProvider: jsmap.JSImageryProviderType.VECTOR_OSM,
					backgroundColor: '#3798ff',  //背景颜色
					defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
					defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台
				});
				window.map.openMapById('0000');
				window.map.on('loadComplete', e => {
					console.log('Map loadComplete!');
					var pointMarker = new jsmap.JSPointMarker({
						color: '#00FF00',  //填充颜色
						size: 10,  //尺寸
						position: new jsmap.JSPoint(114.628074820438, 38.8157131095379, 0),  //坐标
						floorId: 2,  //楼层id,默认为1（地面）
						outlineColor: '#CD5C5C',  //边线颜色
						outlineWidth: 2,  //边线宽
						depthTest: true,  //是否开启深度检测
						show: true,  //是否显示
						allowPicking: true,  //是否允许点击
						displayCondition: new jsmap.JSDisplayCondition(0.0, 1000),  //可见范围
						nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5),  //比例缩放
						callback: (node) => {
							console.log(node);
						}//回调事件
					});
					window.map.addMarker(pointMarker);
					let drawTool2 = new jsmap.JSDrawToolControl({
						position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
						offset: {
							x: 30,
							y: 30
						},  //偏移量
						drawMode: jsmap.JSDrawMode.POLYGON,  //画图类型POINT:画点  POLYLINE:画线  POLYGON:画面
						//画图结束的回调，返回所画的面信息
						callback: (feature) => {
							console.log('add', feature);
							console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
							console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]面数组
							this.coordinates.floorNo = feature.properties.floorNo;
							this.coordinates.floorId = feature.properties.floorId;
							that.points = feature.geometry.coordinates[0];
						},
						//移除相应面的回调，返回相应面信息
						removeCallback: (feature) => {
							// console.log('remove', feature);
						},
						//编辑相应面的回调，返回相应面信息
						editCallback: (feature) => {
							// console.log('editCallback', feature);
						},
						//定位到相应面的回调，返回相应面信息
						locateCallback: (feature) => {
							// console.log('locate..', feature);
						}
					});
					window.map.addControl(drawTool2);
				});
			},
			closeDrawer() {
				this.$emit('closed');
			},
			//表单提交方法
			submit() {
				let that = this;
				let pointXY = [];
				let tool = new jsmap.JSMapCoordTool(window.map);
				let points = that.points;
				if(points.length>0){
					that.isSaveing = true;
					that.coordinates.color = 'rgba(255,0,0,.4)';
					debugger;
					points.forEach(item=>{
						debugger;
						let coordinate = {x:parseFloat(item[0]),y:parseFloat(item[1])};
						let pixel = tool.mapToScreenCoordinate(coordinate);
						pointXY.push(pixel);
					});
					that.coordinates.polygon.points = pointXY;
					that.$API.am.area.bindRail.req(that.areaId,that.coordinates)
						.then(res => {
							that.isSaveing = false;
							that.visible = false;
							that.$emit("success");
							that.$message.success("操作成功");
							return res
						}).catch(err => {
						that.isSaveing = false;
						return err
					})
				}else{}
			},
		},
	};
</script>

<style>
	.el-drawer.rtl{
		width: 90%!important;
	}
</style>
