<template>
	<div style="width: 100%; height: 100%;">
		<div class="saleDeparMentMapMeta">
			<span v-show="this.$route.query.id!=-1"><i style="background:#F44336;"></i>{{this.$route.query.name}}</span>
			<span v-for="(item,index) in departMentName"><i :style="{background:colorArr[index]}"></i>{{item}}</span>
			<input type="button" class="hollowFixedBtn fr mt3" value="返回" @click="goback()" />
		</div>
		<div style="width:100%;height:100%; border：1px solid #eee;color:lightseagreen;" id="saleMap"></div>
	</div>
</template>

<script>
	import BMap from 'BMap'

	export default {
		data() {
			return {
				mapObj: {},
				colorArr: ['#F44336','#2196F3', '#8BC34A','#795548', '#FF796E', '#E91E63', '#607D8B', '#9C27B0', '#9E9E9E', '#673AB7',  '#3F51B5', '#FF5722',  '#FF9800', '#03A9F4', '#FFC107', '#00BCD4', '#FFEB3B', '#009688', '#CDDC39', '#4CAF50'],
				sellAreaList: [],
				allList: [],
				regionArr: [],
				departMentName: []
			}
		},
		methods: {
			goback() {
				window.history.back(-1)
			},
			creatMap() {
				let map
				this.mapObj = map = new BMap.Map("saleMap");
				map.centerAndZoom(new BMap.Point(104.0727017791, 30.6643622306), 10);
				var myCity = new BMap.LocalCity();
				myCity.get(myFun);
				function myFun(result){
					var cityName = result.name;
					map.setCenter(cityName);
				}
				map.enableScrollWheelZoom();
				if(this.$route.query.id != -1) {
					this.madeBoundary()
				} else {
					this.madeBoundaryAll()
				}
			},
			madeBoundaryAll() { //全部X部门
				let datas = this.regionArr
				let bdary = new BMap.Boundary();
				for(let i = 0; i < datas.length; i++) {
					this.getBoundaryAll(datas[i], bdary);
				}
			},
			getBoundaryAll(data, bdary) { //全部部门
				let that = this
				data = data.split("$$");
				bdary.get(data[0], function(rs) {
					let count = rs.boundaries.length;
					for(let i = 0; i < count; i++) {
						let ply = new BMap.Polygon(rs.boundaries[i], {
							strokeWeight: 1,
							strokeColor: "red",
							fillOpacity: 0.8,
							fillColor: data[1]
						});
						that.mapObj.addOverlay(ply);
					}
				});
			},
			madeBoundary() { //单部门
				let datas = this.sellAreaList
				console.log(this.sellAreaList)
				let bdary = new BMap.Boundary();
				for(var i = 0; i < datas.length; i++) {
					this.getBoundary(datas[i], bdary);
				}
			},
			getBoundary(data, bdary) { //单部门
			//	console.log(data)
				let that = this
				bdary.get(data, function(rs) {
					let count = rs.boundaries.length;
					for(let i = 0; i < count; i++) {
						let ply = new BMap.Polygon(rs.boundaries[i], {
							strokeWeight: 1,
							strokeColor: 'red',
							fillOpacity: 0.8,
							fillColor: that.colorArr[0]
						}); 
						that.mapObj.addOverlay(ply); 
					}
				});
			},
			getDetail() {
				this.apipost('app_customer_GetSellAreaDetails', {
					id: this.$route.query.id
				}, res => {
					if(res.data.resultCode == 1) {
						this.sellAreaList=new Array()
						res.data.data.SellAreaList.forEach(item => {
							this.sellAreaList.push(item.AreaName)
						})
					}
					this.creatMap()
				}, err => {})
			},
			getAllDetail() {
				this.apipost('app_customer_GetSellAreaMap', {}, res => {
					if(res.data.resultCode == 1) {
						res.data.data.forEach((item, index) => {
							this.departMentName.push(item.departmentName)
							item.sellAreaList.forEach(x => {
								let y = x.areaName + '$$' + this.colorArr[index]
								this.regionArr.push(y)
							})
						})
					}
					this.creatMap()
				}, err => {})
			},
		},
		mounted() {
			if(this.$route.query.id != -1) {
				this.getDetail()
			} else {
				this.getAllDetail()
			}
			
		},
	}
</script>

<style>
	.saleDeparMentMapMeta {
		width: 100%;
		line-height: 40px;
		font-size: 12px;
		color: #000;
	}
	
	.saleDeparMentMapMeta>span {
		margin-right: 20px;
	}
	
	.saleDeparMentMapMeta>span>i {
		display: inline-block;
		width: 14px;
		height: 14px;
		margin-right: 5px;
		vertical-align: sub,;
		
	}
</style>