<template>
	<div>
		<div class="sideTools">
			<ul>
				<li @click="sidePanelShow = false;currentActivate = ''">
					<i class="iconfont iconshousuo"></i>
				</li>
				<li @click="clickSideTools('zhuantishu')" :class="currentActivate == 'zhuantishu'?'active':''">
					<i class="iconfont iconzhuantishu"></i>
					<span>专题树</span>
				</li>
				<li @click="clickSideTools('huanchongqu')" :class="currentActivate == 'huanchongqu'?'active':''">
					<i class="iconfont iconhuanchongfenxi"></i>
					<span>缓冲区分析</span>
				</li>
				<li @click="clickSideTools('chongdiefenxi')" :class="currentActivate == 'chongdiefenxi'?'active':''">
					<i class="iconfont iconzhongdiefenxi"></i>
					<span>重叠分析</span>
				</li>
			</ul>
		</div>
		<div class="sidePanel" v-show="sidePanelShow">
			<div class="content" v-show="currentActivate == 'zhuantishu'">
				<el-tree
				  show-checkbox
				  :data="layerTreeData"
				  node-key="id"
				  highlight-current
				  @check="checkTreeNode"
				 >
				 <span class="custom-tree-node" slot-scope="{ node, data }">
				         <span>{{ node.label }}</span>
						<span class="setOpacity" v-if="data.type == 'layerGroup'">
							<el-slider v-model="data.alpha"  ref="data.id" :format-tooltip="formatTooltip" @change="alphaChange(data)"></el-slider>
						</span>
				 </span>
				</el-tree>
			</div>
		</div>
	</div>
</template>

<script>
	import layerTree from '@/assets/json/layerTreeData.json'
	import mapLayerManager from './js/mapLayerManager.js'
	export default{
		props:{
			viewId:{
				type:String,
				default:""
			}
		},
		mixins:[mapLayerManager],
		data(){
			return{
				currentActivate:"",
				layerTreeData:[],
				defaultSelectNodes:[19,8,10],
				layerUrl:"http://192.168.2.201:6080/arcgis/rest/services/%E4%BA%92%E8%81%94%E7%BD%91%E5%8A%A0%E4%B8%8D%E5%8A%A8%E4%BA%A7/XA_%E4%B8%8D%E5%8A%A8%E4%BA%A7/MapServer",
				sidePanelShow:false
			}
	    },
		mounted(){
			this.layerTreeData = layerTree;
		},
		methods:{
			checkTreeNode(treeNode,checkNodeList){
				var self = this;
				//先判断是选中还是取消选中
				var flag = false;
				for (var i = 0; i < checkNodeList.checkedNodes.length; i++) {
				    if (checkNodeList.checkedNodes[i].id == treeNode.id) {
						flag = true;
				    }
				}
				if(flag){
				    if(treeNode && treeNode.children){
				        var ids = [];
				        this.getChildrens(treeNode,ids);
				        this.addSublayers(this.viewId,ids);
				    }else{
				        this.addSublayers(this.viewId,[treeNode]);
				    }
				}else{
				    if(treeNode && treeNode.children){
				        var ids = [];
				        this.getChildrens(treeNode,ids);
				        this.removeSublayer(this.viewId,ids);
				    }else{
				        this.removeSublayer(this.viewId,[treeNode]);
				    }
				}
			},
			 //获取树节点选中的子节点
			getChildrens(data, childrens) {
			    if (data.children) {
			        for (var i = 0; i < data.children.length; i++) {
			            if (data.children[i].children) {
			              childrens = this.getChildrens(data.children[i], childrens);
			            } else {
							if(data.children[i].type == 'layer'){
								childrens.push(data.children[i]);	
							}
			            }
			         }
			     }
			        return childrens;
			 },
			 clickSideTools(currentName){
				 this.currentActivate = currentName;
				 this.sidePanelShow = true;
			 },
			  formatTooltip(val){
			         return val+"%";
			  },
			alphaChange(nodeData){
			   if(nodeData.alpha == 0){
				   return;
			   }
			   var ids = [];
			   this.getChildrens(nodeData,ids);
			   this.setLayerOpacity(this.viewId,ids,nodeData.alpha);
			}
		}
    }
</script>

<style scoped lang="less">
	.sideTools{
		    width: 35px;
		    background-color: #FFFFFF;
		    text-align: center;
			padding: 3px 0px;
			box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18);
			border-radius: 2px;
			li{
				padding: 10px 0px;
				    border-bottom: 1px dashed #CBCBCB;
				    width: 25px;
				    margin-left: 5px;
			}
			li:last-child{
				border: 0;
			}
			li :hover{
				cursor:pointer
			}
			span{
				font-size: 14px;
				color: #6D7278;
			}
			i{
				font-size: 1rem;
				color: #8C8E91;
			}
			.active{
				span,i{
				 color: #0091FF;	
				}
			}
	 }
	 .sidePanel{
		     height: 500px;
		     width: 300px;
		     position: absolute;
		     background-color: #FFFFFF;
		     top: 0px;
		     right: 37px;
		     border-radius: 4px;
			 .content {
				 height:100%;
				 overflow:auto;
				 box-sizing: border-box;
				 padding:10px
			 }
	 }
	 .custom-tree-node{
		 display: contents;
		 span{
			 margin-right: 16px;
		 }
	 }
	 .setOpacity{
		 width: 100px;
	 }
	 /deep/ .el-slider__button{
		 width: 10px;
		 height: 10px;
	 }
</style>