<template>
	<div
		class="wrap"
		:style="{ backgroundImage: 'url(' + $imghost + bodyBg + ')' }"
	>
		<div
			class="header"
			:style="{ backgroundImage: 'url(' + $imghost + headerBg + ')' }"
		></div>
		<div style="cursor: default" ref="mapChart" class="chart"></div>
		<div style="cursor: default" class="equipInfo">
			<ul>
				<li>
					<p><span class="dot dotT"></span>设备总数(台)</p>
					<div>
						<span v-for="(i, index) in equipTotal.toString()" :key="index">{{
							i
						}}</span>
					</div>
				</li>
				<li v-for="item in eTypeNum" :key="item.type">
					<p>
						<span
							:class="{
								dot: true,
								dot01: item.type == 2,
								dot02: item.type == 3,
								dot03: item.type == 4,
								dot04: item.type == 5,
								dot05: item.type == 6,
								dot06: item.type == 7
							}"
						></span>
						{{ item.type | equipType }}
					</p>
					<div>
						<span v-for="(i, index) in item.num.toString()" :key="index">{{
							i
						}}</span>
					</div>
				</li>
			</ul>
		</div>
		<div style="cursor: default" class="checkBtn">
			<ul>
				<li
					v-for="(item, index) in checkBtn"
					:class="{ active: activeBtn == index }"
					:key="index"
					@click="checkClick(index, item.name)"
					:style="{ backgroundImage: checkBtnBg(index) }"
				>
					<div>
						<span :style="{ backgroundImage: 'url(' + item.bg1 + ')' }"></span>
						<p>{{ item.name }}</p>
					</div>
				</li>
			</ul>
		</div>
		<div
			class="backBtn"
			@click="goBack()"
			:style="{ backgroundImage: backBtnBg }"
		></div>
	</div>
</template>

<script>
import '@/plugin/flexible.js'
import echarts from 'echarts'
import { cityMap } from './china-main-city-map.js'
import { coord } from './coord.js'
export default {
	data() {
		return {
			address: '', //展示地图的区域，默认是全国
			device_type: '', //设备类型，默认是全部
			bodyBg: '/images/bigdata/equipDistributeMap/bg.png',
			headerBg: '/images/bigdata/equipDistributeMap/head_bg.png',
			chinaId: 100000, //默认是全国地图的代号
			myChart: {}, //地图初化对象
			mapStack: [], //记录 父级ID、Name
			parentId: 100000,
			parentName: 'china',
			EquipNum: [],
			equipInfo: [],
			dialogVisible: false,
			eTypeNum: [],
			checkBtn: [
				{
					name: '全部设备',
					bg1: require('@/assets/images/bigdata/equipDistributeMap/all.png'),
					bg2: require('@/assets/images/bigdata/equipDistributeMap/all_active.png')
				},
				{
					name: '杀虫灯',
					bg1: require('@/assets/images/bigdata/equipDistributeMap/scd.png'),
					bg2: require('@/assets/images/bigdata/equipDistributeMap/scd_active.png')
				},
				{
					name: '虫情测报',
					bg1: require('@/assets/images/bigdata/equipDistributeMap/cbd.png'),
					bg2: require('@/assets/images/bigdata/equipDistributeMap/cbd_active.png')
				},
				{
					name: '孢子仪',
					bg1: require('@/assets/images/bigdata/equipDistributeMap/bzy.png'),
					bg2: require('@/assets/images/bigdata/equipDistributeMap/bzy_active.png')
				},
				{
					name: '监控',
					bg1: require('@/assets/images/bigdata/equipDistributeMap/jk.png'),
					bg2: require('@/assets/images/bigdata/equipDistributeMap/jk_active.png')
				},
				{
					name: '性诱设备',
					bg1: require('@/assets/images/bigdata/equipDistributeMap/xy.png'),
					bg2: require('@/assets/images/bigdata/equipDistributeMap/xy_active.png')
				},
				{
					name: '环境监测',
					bg1: require('@/assets/images/bigdata/equipDistributeMap/qxz.png'),
					bg2: require('@/assets/images/bigdata/equipDistributeMap/qxz_active.png')
				}
			],
			activeBtn: 0,
			checkBtnBg01:
				'url(' +
				require('@/assets/images/bigdata/equipDistributeMap/btnbg01.png') +
				')',
			checkBtnBg02:
				'url(' +
				require('@/assets/images/bigdata/equipDistributeMap/btnbg02.png') +
				')',
			backBtnBg:
				'url(' +
				require('@/assets/images/bigdata/equipDistributeMap/back.png') +
				')',
			geoJson: {},
			equipTotal: 0 //总设备数
		}
	},
	mounted() {
		this.chartsInit()
		this.equipNum()
	},
	filters: {
		equipType(value) {
			switch (value) {
				case 2:
					return '杀虫灯(台)'
					break
				case 3:
					return '虫情测报(台)'
					break
				case 7:
					return '孢子仪(台)'
					break
				case 6:
					return '监控(台)'
					break
				case 4:
					return '性诱设备(台)'
					break
				case 5:
					return '环境监测(台)'
					break
				case 9:
					return '糖醋测报(台)'
					break
			}
		}
	},
	destroyed() {
		window.onresize = null
	},
	computed: {},
	methods: {
		chartsInit() {
			// 基于准备好的dom，初始化echarts实例
			this.myChart = echarts.init(this.$refs.mapChart)
			this.mapChart()
			window.addEventListener('resize', () => {
				this.myChart.resize()
			})
		},
		equipNum() {
			//左侧获取左侧设备数量
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=device.device_manage.device_counts',
				data: this.qs.stringify({ adress: this.address })
			}).then((res) => {
				let data = res.data.data.data
				this.equipTotal = res.data.data.counts
				let arr = []
				data.forEach((item) => {
					let obj = { num: item.device_type_count, type: item.device_type_id }
					arr.push(obj)
				})
				this.eTypeNum = arr
			})
		},
		countryAddressNum() {
			//全国地图
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=device.device_manage.device_address_count',
				data: this.qs.stringify({
					adress: this.address,
					device_type_id: this.device_type
				})
			}).then((res) => {
				let data = res.data.data
				this.EquipNum = []
				data &&
					data.forEach((item) => {
						this.EquipNum.push({
							//全国
							name: item.province,
							num: item.device_type_count,
							value: coord[item.province]
						})
					})
				this.registerAndsetOption('china', this.geoJson, this.EquipNum, false)
			})
		},
		provinceAddressNum(flag) {
			//二级三级地图
			this.$axios({
				method: 'POST',
				url:
					'/api/api_gateway?method=device.device_manage.device_address_count',
				data: this.qs.stringify({
					adress: this.address,
					device_type_id: this.device_type
				})
			}).then((res) => {
				this.equipInfo = [] //各省设备
				let data = res.data.data
				data &&
					data.forEach((item) => {
						this.equipInfo.push({
							//二级三级地图
							type: item.device_type_id,
							device_status: item.device_status,
							user: item.owner_name,
							equipId: item.device_id,
							value: item.value
						})
					})
				this.registerAndsetOption(
					this.address,
					this.geoJson,
					this.equipInfo,
					flag
				)
				this.parentId = this.chinaId
				this.parentName = this.address
			})
		},
		mapChart() {
			this.$axios({
				method: 'GET',
				url: `${this.jsonUrl}/static/map/${this.chinaId}.json`
			}).then((res) => {
				this.geoJson = res.data
				this.countryAddressNum() //显示全国地图
			})
			this.myChart.on('click', (param) => {
				console.log(param);
				if (
					param.seriesType &&
					param.seriesType == 'effectScatter' &&
					param.data.type
				) {
					//二级和三级地图点击散点时,不下钻，弹框显示设备信息
					console.log('id : '+param.data.equipId+";"+'type : '+param.data.type);
					this.dialogVisible=true;
				} else {
					//一级地图点击散点时，下钻
					if (cityMap[param.name]) {
						//有下级地图，下钻到下一级
						this.address = param.name
						this.equipNum()
						this.chinaId = cityMap[param.name] //找到对应的json文件名
						this.$axios({
							method: 'GET',
							url: `${this.jsonUrl}/static/map/${this.chinaId}.json`
						}).then((res) => {
							this.geoJson = res.data
							this.provinceAddressNum(true)
						})
					} else {
						//没有下级地图，回到一级china地图，并将mapStack清空
						this.address = ''
						this.equipNum()
						this.chinaId = 100000 //由计算属性获取使geoJson数据为全国的
						this.$axios({
							method: 'GET',
							url: `${this.jsonUrl}/static/map/${this.chinaId}.json`
						}).then((res) => {
							this.geoJson = res.data
							this.countryAddressNum()
							this.mapStack = []
							this.parentId = 100000 //china地图
							this.parentName = 'china'
						})
					}
				}
			})
		},
		registerAndsetOption(name, geoJson, pointData, flag) {
			echarts.registerMap(name, geoJson) //注册可用的地图，geoJson为GeoJson 格式的数据
			console.log(pointData);
			this.myChart.setOption(
				{
					grid: {
						left: '0',
						right: '0',
						top: '0%',
						bottom: '0%',
						containLabel: true,
						show: false
					},
					title: {
						text: name,
						textStyle: {
							color: '#fff',
							fontSize: 22
						},
						padding: 10,
						left: '46%'
						// textAlign :'right'
					},
					tooltip: {
						show: true,
						trigger: 'item',
						formatter: function (params) {
							// console.log(params);
							if (params.data.type) {
								let status = params.data.device_status == 1 ? '在线' : '离线'
								var str =
									params.data.equipName +
									'<br/><hr/>' +
									'IMEI : ' +
									params.data.equipId +
									'<br/>在线状态 : ' +
									status +
									'<br/>设备用户 : ' +
									params.data.user +
									'<br/>位置 : ' +
									params.data.value[0] +
									' , ' +
									params.data.value[1]
								return str
							} else {
								return params.data.name + ':' + params.data.num
							}
						}
					},
					geo: {
						map: name, //对应registerMap注册名字
						label: {
							show: false,
							color: '#fff'
						},
						roam: true, //是否开启鼠标缩放和平移漫游,设置成 'scale' 或者 'move',设置成 true 为都开启
						zlevel: 0,
						zoom: 1, // 当前视角的缩放比例
						scaleLimit: {
							min: 0.5,
							max: 2
						},
						layoutCenter: ['50%', '50%'],
						layoutSize: '100%',
						itemStyle: {
							normal: {
								areaColor: 'rgba(43, 196, 243, 0.42)',
								borderColor: 'rgba(43, 196, 243, 1)',
								borderWidth: 1
							}
						},
						emphasis: {
							//高亮状态下的多边形和标签样式。
							label: {
								show: true, //高亮状态下字体是否显示
								color: '#AAE0FC' //高亮状态下字体颜色
							},
							itemStyle: {
								areaColor: '#2B91B7'
							}
						}
					},
					series: [
						{
							type: 'effectScatter',
							map: name,
							coordinateSystem: 'geo',
							zlevel: 1,
							rippleEffect: {
								brushType: 'stroke'
							},
							label: {
								show: true,
								color: '#fff',
								fontSize: 14,
								position: 'right',
								formatter: function (a) {
									if (a.data.type) {
										return a.data.equipId.toString().slice(-6)
									} else {
										return a.data.name + ' (' + a.data.num + ')'
									}
								}
							},
							itemStyle: {
								color: function (params) {
									// console.log(params);
									if (params.data.type) {
										if (params.data.type == 2) {
											return '#feff00'
										} else if (params.data.type == 3) {
											return '#4dd67e'
										} else if (params.data.type == 4) {
											return '#07d4ff'
										} else if (params.data.type == 5) {
											return '#fd3b55'
										} else if (params.data.type == 6) {
											return '#b608f1'
										} else if (params.data.type == 7) {
											return '#1c97c1'
										}
									} else {
										return 'yellow'
									}
								}
							},
							showEffectOn: 'render', //配置何时显示特效,'render' 绘制完成后显示特效。
							rippleEffect: {
								period: 15, //动画的周期，秒数。
								scale: 4, //动画中波纹的最大缩放比例。
								brushType: 'fill' //波纹的绘制方式，可选 'stroke' 和 'fill'
							},
							// symbolSize: 12, //标记的大小，
							data: pointData
						}
						// {
						// 	name: 'AQI',
						// 	type: 'heatmap',
						// 	coordinateSystem: 'geo',
						// 	data: [
						// 		['116.405285', '39.904989', 800],
						// 		['117.190182', '39.125596', 600]
						// 	]
						// }
					],
					visualMap: {
						show: true,
						color: ['#ff4601', '#fffc00', '#87cffa'],
						min: 200,
						text: ['高', '低'],
						textStyle: {
							color: '#fff'
						},
						max: 50,
						left: '20%'
					}
				},
				true
			)
			if (flag) {
				this.mapStack.push({
					//往mapStack里添加parentId，parentName,返回上一级使用
					mapId: this.parentId,
					mapName: this.parentName
				})
			}
		},
		checkClick(index, name) {
			this.activeBtn = index
			switch (name) {
				case '全部设备':
					this.device_type = ''
					break
				case '杀虫灯':
					this.device_type = 2
					break
				case '虫情测报':
					this.device_type = 3
					break
				case '孢子仪':
					this.device_type = 7
					break
				case '监控':
					this.device_type = 6
					break
				case '性诱设备':
					this.device_type = 4
					break
				case '环境监测':
					this.device_type = 5
					break
			}
			if (this.address == '') {
				this.countryAddressNum()
			} else {
				this.provinceAddressNum(false)
			}
		},
		checkBtnBg(index) {
			if (index == this.activeBtn) {
				return this.checkBtnBg01
			} else if (this.activeBtn - index == 1) {
				return ''
			} else if (index == this.checkBtn.length - 1) {
				return ''
			} else {
				return this.checkBtnBg02
			}
		},
		goBack() {
			if (this.mapStack.length != 0) {
				//如果有上级目录则执行
				let map = this.mapStack.pop()
				this.chinaId = map.mapId
				this.address = map.mapName
				this.$axios({
					method: 'GET',
					url: `${this.jsonUrl}/static/map/${this.chinaId}.json`
				}).then((res) => {
					this.geoJson = res.data
					if (map.mapName == 'china') {
						this.address = ''
						this.equipNum()
						this.registerAndsetOption(
							map.mapName,
							this.geoJson,
							this.EquipNum,
							false
						)
					} else {
						this.equipNum()
						this.provinceAddressNum(false)
						// this.registerAndsetOption(map.mapName, this.geoJson,this.equipInfo,false)
					}
					//返回上一级后，父级的ID、Name随之改变
					this.parentId = map.mapId
					this.parentName = map.mapName
				})
			}
		}
	}
}
</script>
<style lang='less' scoped>
body {
	overflow: hidden;
}
.wrap {
	width: 100%;
	height: 100%;
	position: relative;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
	.header {
		width: 100vw;
		height: 10vh;
		background-size: 100% 100%;
		background-position: center top;
		background-repeat: no-repeat;
		position: relative;
	}
	.chart {
		width: 100%;
		height: 80vh;
	}
	.equipInfo {
		position: absolute;
		left: 2vw;
		top: 10vh;
		color: #fff;
		li {
			padding: 0.15rem 0;
			p {
				font-size: 0.24rem;
				margin-bottom: 0.1rem;
				span.dot {
					width: 0.12rem;
					height: 0.12rem;
					border-radius: 100%;
					margin-right: 0.1rem;
					display: inline-block;
				}
				span.dot01 {
					background-image: radial-gradient(circle, #feff00, #fdfd89);
					box-shadow: 0 0 8px 4px rgba(253, 253, 137, 0.6);
				}
				span.dot02 {
					background-image: radial-gradient(circle, #4dd67e, #9cffbf);
					box-shadow: 0 0 8px 4px rgba(156, 255, 191, 0.6);
				}
				span.dot03 {
					background-image: radial-gradient(circle, #07d4ff, #88eaff);
					box-shadow: 0 0 8px 4px rgba(136, 234, 255, 0.6);
				}
				span.dot04 {
					background-image: radial-gradient(circle, #fd3b55, #ff7a8c);
					box-shadow: 0 0 8px 4px rgba(255, 122, 140, 0.6);
				}
				span.dot05 {
					background-image: radial-gradient(circle, #b608f1, #d762ff);
					box-shadow: 0 0 8px 4px rgba(215, 98, 255, 0.6);
				}
				span.dot06 {
					background-image: radial-gradient(circle, #1c97c1, #4ac5ef);
					box-shadow: 0 0 8px 4px rgba(74, 197, 239, 0.6);
				}
				span.dotT {
					background-image: radial-gradient(circle, #fbc65e, #ff9600);
					box-shadow: 0 0 8px 4px rgba(250, 169, 19, 0.6);
				}
			}
			div > span {
				display: inline-block;
				font-size: 0.23rem;
				line-height: 0.46rem;
				padding: 0 0.07rem;
				margin: 0 0.025rem;
				border: 1px solid #3e5b85;
				background: rgba(47, 54, 70, 0.3);
			}
		}
	}
	.checkBtn {
		position: absolute;
		bottom: 5vh;
		width: 50vw;
		left: 0;
		right: 0;
		margin: auto;
		color: #b0cce1;
		border: 1px solid #406288;
		background: rgba(64, 98, 136, 0.5);
		border-radius: 6px;
		padding: 10px;
		ul {
			display: flex;
			justify-content: space-between;
			li {
				flex: 1;
				cursor: pointer;
				background-repeat: no-repeat;
				background-position: right center;
				padding: 15px 10px;
				& > div {
					text-align: center;
					span {
						width: 100%;
						height: 38px;
						display: inline-block;
						background-repeat: no-repeat;
						background-size: auto 100%;
						background-position: center;
						margin-bottom: 10px;
					}
					p {
						font-size: 0.24rem;
					}
				}
			}
			li.active {
				background-position: center;
				background-size: 100% 100%;
				color: #fff;
			}
		}
	}
	.backBtn {
		position: absolute;
		right: 10vw;
		top: 15vh;
		width: 1.6rem;
		height: 0.5rem;
		background-size: 100% auto;
		background-repeat: no-repeat;
		cursor: pointer;
	}
}
</style>