<template>
	<div class="home_manage cm-layout">
		<div class="m-view">
			<cu-amap 
				ref="amap" 
				:options="amapOptions()"
			/>
			<div class="b_0">
				<ul>
					<li><span>尾矿库名称：</span><span>{{unitInfo.tailingname}}</span></li>
					<li><span>尾矿库编号：</span><span>{{unitInfo.tailingno}}</span></li>
					<li><span>尾矿库地址：</span><span>{{unitInfo.address}}</span></li>
					<li><span>值班电话：</span><span>{{unitInfo.ondutytel}}</span></li>
					<li><span>安全负责人姓名：</span><span>{{unitInfo.securityofficer}}</span></li>
					<li><span>安全负责人电话：</span><span>{{unitInfo.securityofficertel}}</span></li>
					<li><span>运行状态：</span><span>{{unitInfo.operatingstatus}}</span></li>
					<li><span>安全度：</span><span>{{unitInfo.safetytypeno}}</span></li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { Tools} from '@/assets/js/common.js';
import { reqApi, Config} from '@/assets/js/httpApi.js';
import cuAmap from '@/components/AMap';
export default {
	name: 'Dashboard',
	components: {cuAmap},
	data() {
		return {
			query:{
				page: 1,
				size: 10,
				total: 0,
				sort: 'date,desc'
			},

			unitInfo:{
				'tailingname':'',
				'tailingno':'',
				'address':'',
				'ondutytel':'',
				'securityofficer':'',
				'securityofficertel':'',
				'operatingstatus':'',
				'safetytypeno':'',
			},
			//UnitList:[],
		}
	},
	mounted() {
		var that = this;
		this.$nextTick(() => {

			this.pageApi = Config.getModuleInfo(this);

			//this.loadData();
		})
	},
	methods: {
		loadData() {
		},
		
		amapOptions(cmap){
			var self = this;
			/* var disCountry = new AMap.DistrictLayer.World({
                zIndex: 1,
                rejectMapMask: true
            }); */
			return {
				zoom:5,
				center:[107.260044, 36.737982],
				//zIndex: 1000,
				//showLabel: true,
				//pitch: 40,
				//satellite:true,
				/* layers:[
                    new AMap.TileLayer.RoadNet({
                        zIndex:7
                    }),
                    disCountry,
                    new AMap.TileLayer.Satellite()
                ], */
				resizeEnable: true,
				onload: function(cmap){
					self.cmap = cmap;

					self.echartsInit(cmap);
					
					//self.getUnitList(cmap);
				},
				click: function(e, cmap){
				},
			};
		},
		echartsInit(amap){
			var myChart = this.myChart = echarts.init(document.getElementById("A_Map"));
			myChart.setOption({
				title: {
					text: '',
					subtext: '飞线',
					left: 'center',
					textStyle: {
						color: '#fff'
					}
				},
				amap: {
					//maxPitch: 60,
					//pitch: 0, //45 俯仰角
					zoom: 5,
					center:[107.260044, 36.737982],
					echartsLayerInteractive:false,		// 穿透 echart 层
				},
				animation: false,
				series: []
			});
			var map = myChart.getModel().getComponent('amap').getAMap();
			//var layer = myChart.getModel().getComponent('amap').getEChartsLayer();
			
			map.add([new AMap.TileLayer.Satellite({zIndex:6}), new AMap.TileLayer.RoadNet({zIndex:7})]);

			amap.Map = map;

			this.getUnitList(amap);
		},

		getUnitList(cmap){
			var self = this;
			reqApi.common.requstEdge('get', 'tab/tailpondinfor', {page:0, size:10}).then((res)=>{
				var body = res.body || {}, list = body.list || [], len = list.length, markers = [];
				self.UnitList = list;

				for(var i=0; i<len; i++){
					var item = list[i];
					var marker = cmap.addMarker({
						//icon:'red1',
						lnglat:[item.longitude, item.latitude],
						title:item['address'], 
						extData:{name:item['tailingname'], index:i,},
					});

					if(item.defaults){
						this.setUnitInfo(item);

						// 地图设置
						cmap.setCenter([item.longitude, item.latitude]);
						cmap.setTargetMarker(marker);
						marker && marker.setIcon(cmap.icons.red1);
					};

					marker && marker.on('click', function(e){
						var lnglat = e.target.getPosition(), extData = e.target.getExtData();
						var unitItem = self.UnitList[extData.index];
						var infoBox = document.createElement("div");
						infoBox.style.cssText = 'display:flex;align-items:center;';
						infoBox.innerHTML = '<span>'+extData.name+'</span><a class="el-icon-picture" style="margin-left:10px;color:#1890FF;font-size:20px;"></a>';
						// moer
						infoBox.onclick = function(e){
							var tag = e.target || e.srcElement;
							if(tag.nodeName === 'A'){
								var tailingno = unitItem.tailingno;
								self.openMonitorPoint(tailingno);
							};
						};

						var InfoWindow = cmap.createInfoWindow({
							offset: new AMap.Pixel(0, -33),
							content:infoBox,
							//anchor: 'bottom-center',
						});
						InfoWindow.open(InfoWindow.Map, lnglat);

						// 更新窗口
						self.setUnitInfo(unitItem);
					});

					marker && marker.on('dblclick', function(e){
						var extData = e.target.getExtData(), lnglat = e.target.getPosition();
						var index = extData.index, tagMarker = cmap.getTargetMarker();
						var unitItem = self.UnitList[index];
						if(tagMarker !== e.target){
							// 请求切换尾矿库接口
							self.pageApi.switchPond({tailingno:unitItem.tailingno}).then((res)=>{
								if(res.code === 200){
									// 重置中心点
									//cmap.setCenter([unitItem.longitude, unitItem.latitude]);

									/* // 清除原标记样式
									tagMarker.setIcon(cmap.icons.Default1);

									// 设置新标记样式
									e.target.setIcon(cmap.icons.red1);
									cmap.setTargetMarker(e.target);
									
									// 设置数据
									self.setUnitInfo(unitItem); */
									window.location.reload();
								};
							});
						};
					});

					if(item.tailingno === "1100001101001101010004"){
						markers.unshift(marker)
					}else{
						markers.push(marker)
					};
				};
				self.addFlyLine(markers)
			});
		},
		openMonitorPoint(tailingno){
			var loading = this.$loading({
				lock: true,
				text: '请稍后.....',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			reqApi.common.requstEdge('get', 'web/monitorchart/tailingno', {tailingno:tailingno}).then((res)=>{
				loading.close();
				var body = res.body || [];
				if(body.chart && body.chart.picture){
					qf.UI.popupLayer({
						//title:'<div>标题</div>',
						html:'<div class="monitor-points" style="width:13rem;height:8rem;margin-top:20px;"><div class="img-box"><img id="drawingImg"></div><div class="cview_ctn wkk-ctn"><ul></ul></div></div>',
						onload: function(el){
							var box = el.firstElementChild;
							var monitorPoint = new qf.UI.pointCharts({
								chartsBox:box,
								width:box.offsetWidth,
								height:box.offsetHeight,
							});
							monitorPoint.setBackground(body.chart.picture);
							monitorPoint.createPoints(body.points, body.chart);
						},
					})
				}else{
					qf.UI.popupLayer({
						title:'提示',
						html:'暂无数据！',
						confirmText:'确定',
					})
				};
			});
		},
		setUnitInfo(item){
			this.unitInfo['tailingname'] = item['tailingname'];
			this.unitInfo['tailingno'] = item['tailingno'];
			this.unitInfo['address'] = item['address'];
			this.unitInfo['ondutytel'] = item['ondutytel'];
			this.unitInfo['securityofficer'] = item['securityofficer'];
			this.unitInfo['securityofficertel'] = item['securityofficertel'];
			this.operatingstatus = item['operatingstatus'];
			this.safetytypeno = item['safetytypeno'];

			// 请求数据字典
			this.reqSelectDict()
		},
		reqSelectDict(){
			var Dict = reqApi.system.pondManage.Dict, self = this;
			if(typeof Dict.selectList.damstocktypeno === 'function'){
				Dict.selectList.damstocktypeno.call(Dict).then(function(res){
					self.operatDict = Tools.arrayJsonToJson(Dict.selectList.operatingstatus, 'name', 'value');
					self.safetyDict = Tools.arrayJsonToJson(Dict.selectList.safetytypeno, 'name', 'value');
					self.unitInfo['operatingstatus'] = self.operatDict[self.operatingstatus];
					self.unitInfo['safetytypeno'] = self.safetyDict[self.safetytypeno];
				})
			}else{
				self.operatDict = Tools.arrayJsonToJson(Dict.selectList.operatingstatus, 'name', 'value');
					self.safetyDict = Tools.arrayJsonToJson(Dict.selectList.safetytypeno, 'name', 'value');
				self.unitInfo['operatingstatus'] = self.operatDict[self.operatingstatus];
				self.unitInfo['safetytypeno'] = self.safetyDict[self.safetytypeno];
			};
		},

		addFlyLine(list){
			//var tagMmarker = list.shift();
			var tagMmarker = list.splice(3,1)[0];
			var FlyLineItem = [];
			if(list[0]){
				for(var item of list){
					FlyLineItem.push({
						"fromName": tagMmarker._opts.extData.name,
						"toName": item._opts.extData.name,
						"coords": [
							tagMmarker._position,
							item._position,
						],
						"value": '111111'
					});
				};
				var series = [
					{
						coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系
						type: "lines", // 该类型用于地图上路线的绘制
						zlevel: 1, // 相当于z-index
						effect: { // 线特效的配置
							show: true, // 是否显示特效
							period: 5, // 特效动画的时间
							trailLength: 0.7, // 特效尾迹的长度 0-1
							color: "#F4E203", // 特效的颜色
							symbolSize: 3 // 特效的大小
						},
						lineStyle: { // 线的颜色
							normal: {
								color: "rgba(245,227,1, 0.3)",
								width: 1,
								curveness: 0.2
							}
						},
						data: FlyLineItem,
					}, 
					/* {					// 位置图标样式
						type: "scatter",
						coordinateSystem: "amap",
						// coordinateSystem: "geo",
						zlevel: 2,
						rippleEffect: {
						  //涟漪特效
						  period: 4, //动画时间，值越小速度越快
						  brushType: "stroke", //波纹绘制方式 stroke, fill
						  scale: 10, //波纹圆环最大限制，值越大波纹越大
						},
						label: {
						  normal: {
							show: true,
							position: "right", //显示位置
							offset: [5, 0], //偏移设置
							formatter: "{b}",
							fontSize: 14,
							textStyle: {
							  color: "#ff0",
							},
						  },
						  emphasis: {
							show: true,
							color: "#A6C84D",
						  },
						},
						symbol: "pin",
						symbolSize: 100,
						itemStyle: {
						  color: "#A6C84D",
						},
						data: [
						  {
							name: "潼江河谷优质粮油现代农业园区",
							value: ["105.171696", "31.780457"],
						  },
						],
					} */
				];

				this.myChart.setOption({
					series: series
				});
			};
		},
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scope>
	.home_manage{
		position:relative;height:100%;width:100%;flex:1;display:flex;justify-content:center;
		//background:no-repeat bottom center url('~@/assets/images/layout/main_bg.png');background-size:100% 100%;
		
		.m-view{
			position:relative;width:100%;
		}

		.b_0{
			border:1px solid #143D96;
			position:absolute;top:.20rem;left:.10rem;width:max-content;padding:.10rem;user-select:none;
			background-color:rgba(0,16,52, .7);border-radius:.12rem;line-height:26px;
			li{
				span:first-child{color:#ccc;}
				span{color:#fff;}
			}
		}
	}
	.monitor-points{
		position:relative;top:0;left:0;height:100%;width:100%;user-select:none;font-family:serif;color:#444;
	}
	.monitor-points .img-box{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10;}
	.monitor-points .img-box img{display:block;border:0;max-height:100%;max-width:100%;}
	.monitor-points .wkk-ctn{position:absolute;top:0;left:0;height:100%;width:100%;z-index:20;}
	.monitor-points .wkk-ctn{position:absolute;top:0;left:0;height:100%;width:100%;}
	.monitor-points .wkk-ctn li{position:absolute;}
	.monitor-points .wkk-ctn li::marker{content:close-quote;}
	.monitor-points .wkk-ctn li i{position:absolute;top:0;left:0;height:100%;width:100%;
		background-repeat:no-repeat;background-position:center bottom;background-size:contain;
	}
	.monitor-points .wkk-ctn li.d_01 i{background-image:url('~@/assets/images/icon/d_01.png');}
	.monitor-points .wkk-ctn li.d_02 i{background-image:url('~@/assets/images/icon/d_02.png');}
	.monitor-points .wkk-ctn li.d_03 i{background-image:url('~@/assets/images/icon/d_03.png');}
	.monitor-points .wkk-ctn li.d_04 i{background-image:url('~@/assets/images/icon/d_04.png');}
	.monitor-points .wkk-ctn li.d_05 i{background-image:url('~@/assets/images/icon/d_05.png');}
	.monitor-points .wkk-ctn li.d_06 i{background-image:url('~@/assets/images/icon/d_06.png');}
	.monitor-points .wkk-ctn li.d_07 i{background-image:url('~@/assets/images/icon/d_07.png');}
	.monitor-points .wkk-ctn li.d_08 i{background-image:url('~@/assets/images/icon/d_08.png');}
	.monitor-points .wkk-ctn li>div{position:absolute;display:flex;align-items:center;justify-content:center;}
	.monitor-points .wkk-ctn li>div .text{position:absolute;padding:0.0402rem;background-color:#fff;border-radius:0.0643rem;line-height:1.2;color:#1A688C;font-weight:bold;}
	.monitor-points .wkk-ctn .text h4{text-align:center;color:#1284b3;font-weight:normal;}
	.monitor-points .wkk-ctn .text dd{display:block;line-height:1;margin-top:3px;font-size:12px;}
	.monitor-points .wkk-ctn .text dd:before{font-size:15px;margin-right:3px;}
	.monitor-points .wkk-ctn .text .normal:before{font-size:13px;margin-right:1px;}
	.monitor-points .wkk-ctn .text .red{background-color:red;color:#fff;}
	.monitor-points .wkk-ctn .text .orange{background-color:orange;color:#fff;}
	.monitor-points .wkk-ctn .text .yellow{background-color:#e8cb08;color:#fff;}
	.monitor-points .wkk-ctn .text .blue{background-color:#0991FF;color:#fff;}
	.monitor-points .wkk-ctn .text .relieve{cursor:pointer;}
	.monitor-points .wkk-ctn .text .offline{color:#aaa;}
	.monitor-points .wkk-ctn .text .online{color:#000;}
	.monitor-points .wkk-ctn li>div .text:before{content:'';position:absolute;height:0;width:0;border-style:solid;border-width:0.0643rem;border-color:transparent;}
	.monitor-points .wkk-ctn .up{top:0;left:0;height:0;width:100%;}
	.monitor-points .wkk-ctn .up .text{bottom:0.0804rem;width:max-content;}
	.monitor-points .wkk-ctn .up .text:before{bottom:-0.1287rem;left:50%;margin-left:-0.0643rem;border-color:#fff transparent transparent transparent;}
	.monitor-points .wkk-ctn .down{bottom:0;left:0;height:0;width:100%;}
	.monitor-points .wkk-ctn .down .text{top:0.0804rem;width:max-content;}
	.monitor-points .wkk-ctn .down .text:before{top:-0.1287rem;left:50%;margin-left:-0.0643rem;border-color:transparent transparent #fff transparent;}
	.monitor-points .wkk-ctn .left{top:0;left:0;height:100%;width:0;}
	.monitor-points .wkk-ctn .left .text{right:0.0804rem;width:max-content;}
	.monitor-points .wkk-ctn .left .text:before{top:50%;right:-0.1287rem;margin-top:-0.0643rem;border-color:transparent transparent transparent #fff;}
	.monitor-points .wkk-ctn .right{top:0;right:0;height:100%;width:0;}
	.monitor-points .wkk-ctn .right .text{left:0.0804rem;width:max-content;}
	.monitor-points .wkk-ctn .right .text:before{top:50%;left:-0.1287rem;margin-top:-0.0643rem;border-color:transparent #fff transparent transparent;}
</style>

<style lang="scss">
	.home_manage{
		a.amap-logo{
			display:flex !important;justify-content:center;align-items:center;
			height:.35rem;width:100%;
			&:before{
				content:'';display:block;
				position:absolute;top:0;left:8px;height:100%;width:1.58rem;
				background:no-repeat top left url('~@/assets/images/logo_ks.png');background-size:100% auto;
			}
			&:after{
				color:#5C8FF5;display:inline-block;font-weight:bold;
				//background-image:-webkit-linear-gradient(top, #8fe9ff, #3d8aff);
				background-image:-webkit-linear-gradient(top,#8affe1,#4193ff);
				-webkit-background-clip:text;-webkit-text-fill-color:transparent;
				content:'©  ⋅ 技术支持：威海晶合数字矿山技术有限公司';
			}
			img{display:none !important;}
		}
		.amap-copyright{display:none !important;}
	}
</style>
