<template>
	<el-drawer
		id="mapDrawer"
		:title="channelName+'位置标记'"
		v-model="visible"
		destroy-on-close
		:size="'80%'"
		@closed="closeDrawer"
	>
		<el-form
			:model="form"
			label-width="80px"
			style="position:absolute;top:15px;left:200px;"
		>
			<el-row>
				<el-col :span="12">
					<el-form-item label="所在区域" prop="name">
						<el-select v-model="form.area" style="width: 100%">
							<el-option
								v-for="item in areasList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="覆盖区域" prop="name">
						<el-select v-model="form.areas" multiple style="width: 100%">
							<el-option
								v-for="item in areasList"
								:key="item.id"
								:label="item.name"
								:value="item.id"
							/>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</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: {
			channelCode: {
				type: String,
			},
			channelType: {
				type: Number,
			},
			channelName: {
				type: String,
			}
		},
		data() {
			return {
				loading: false,
				visible: true,
				isSaveing: false,
				points:[],
				areasList:[],
				form:{
					type:60,//设备类型
					location:null,//位置信息
					area:'',//所在区域
					areas:[],//覆盖区域
					code:'',//设备唯一标识
				}
			};
		},
		mounted() {
			this.$nextTick(()=>{
				this.loadMap();
			})
			this.getArea();
		},
		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
					mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
					floorControlOptions: {
						floorHeight: 20,//楼层间距
						position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
						offset: {
							x: 10,
							y: 10,
						}//控件偏移位置
					},
					imageryProvider: jsmap.JSImageryProviderType.IMAGE_TDT,
					backgroundColor: '#3798ff',  //背景颜色
					viewOptions: {
						//屏幕中心坐标
						center: {x: 114.63059258861512, y: 38.81407163905287, z: 1},
						// center: {x:120,y:30,z:10},
						//相机距屏幕中心点距离（单位m）
						distance: 400,
						// 旋转角（单位°）
						rotate: 0,
						//倾斜角（单位°）
						tilt: 45,
					}
				});
				window.map.openMapById('0000');
				window.map.on('loadComplete', e => {
					// console.log('Map loadComplete!');
					var drawTool = new jsmap.JSDrawToolControl({
						position: jsmap.JSControlPosition.RIGHT_TOP,  //画图工具在容器中的相对位置，当前为右上
						offset: {
							x: 20,
							y: 180
						},  //偏移量
						drawMode: jsmap.JSDrawMode.POINT,  //画图类型POINT:画点  POLYLINE:画线  POLYGON:画面

						//画图结束的回调，返回所画的点的信息
						callback: (feature) => {
							//console.log('add', feature);
							//console.log(feature.properties);//type:POINT;id:"";name:"";floorNo:"";floorId:""
							//console.log(feature.geometry);//type:POINT;coordinates:[114.63028499839209,38.81195080123784,0]
							this.form.location = feature.geometry.coordinates;
						},
						//移除相应点的回调，返回相应点信息
						removeCallback: (feature) => {
							console.log('remove', feature);
						},
						//编辑相应点的回调，返回相应点信息
						editCallback: (feature) => {
							console.log('editCallback', feature);
						},
						//定位到相应点的回调，返回相应点信息
						locateCallback: (feature) => {
							console.log('locate..', feature);
						}
					});
					window.map.addControl(drawTool);
				});
			},
			closeDrawer() {
				this.$emit('closed');
			},
			getArea(){
				this.$API.am.area.list.req().then(res=>{
					debugger;
					if(res.err_msg){
						this.message.error(res.err_msg)
					}else{
						this.areasList = res.results;
					}
				})
			},
			//表单提交方法
			submit() {
				let that = this;
				let item = this.form.location;
				//console.log(this.form.location);
				that.form.code = that.channelCode;
				that.form.type = that.channelType;
				that.form.name = that.channelName;
				that.form.location = {x:item[0],y:item[1],z:item[2]};
				that.$API.am.tdevice.labelLocation.req(that.form)
					.then(res => {
						that.isSaveing = false;
						that.visible = false;
						that.$emit("success");
						that.$message.success("操作成功");
						return res
					}).catch(err => {
					that.isSaveing = false;
					return err
				})
			},
		},
	};
</script>

<style scoped>
	.el-drawer.open{
		width: 70%!important;
	}
</style>
