<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"
				  :default-checked-keys="defaultSelectNodes"
				 >
				 <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 class="contet" v-show="currentActivate == 'huanchongqu'">
				<el-tabs v-model="activeName" type="card" @tab-click="tabClick">
				    <el-tab-pane label="绘制范围" name="hzfw">
				        <div class="contentItem">
				            <span>绘制范围：</span>
				            <div class="drawTypes">
								<span :class="bufferParams.drawType == 'rectangle'?'active':''"> 
									<i class="iconfont iconhuizhifangshi1"  @click="bufferParams.drawType = 'rectangle'"></i>
								</span>
								<span :class="bufferParams.drawType == 'circle'?'active':''">
									<i class="iconfont iconhuizhifangshi2"  @click="bufferParams.drawType = 'circle'"></i>
								</span>
								<span :class="bufferParams.drawType == 'polygon'?'active':''">
									<i class="iconfont iconhuizhifangshi3"  @click="bufferParams.drawType = 'polygon'"></i>
								</span>
				            </div>
				        </div>
				        <div class="contentItem">
				            <span>缓冲距离：</span>
				            <el-input-number :min="0" v-model="bufferParams.distance" size="small"></el-input-number> 米
				        </div>
				        <div class="contentItem">
				            <span>图层选择：</span>
				            <el-select size="small" multiple  v-model="bufferParams.layerId">
				                <el-option
				                        v-for="item in bufferLayers"
				                        :key="item.id"
				                        :label="item.layerName"
				                        :value="item.id">
				                </el-option>
				            </el-select>
				        </div>
				        <div class="buttonDiv">
				            <el-button size="small" type="primary" @click="toIdentity">分析</el-button>
				            <el-button size="small" type="warning" @click="resetBufferParams">重置</el-button>
				        </div>
				    </el-tab-pane>
				    <el-tab-pane label="导入范围" name="drfw">
				        <div class="contentItem">
				            <span>绘制范围：</span>
				            <div class="drawTypes">
				                <i class="el-icon-plus" @click="openImportDialog"></i>
				            </div>
				        </div>
				        <div class="contentItem">
				            <span>缓冲距离：</span>
				            <el-input-number :min="0" v-model="bufferParams.distance" size="small"></el-input-number> 米
				        </div>
				        <div class="contentItem">
				            <span>图层选择：</span>
				            <el-select size="small" multiple v-model="bufferParams.layerId">
				                <el-option
				                        v-for="item in bufferLayers"
				                        :key="item.id"
				                        :label="item.layerName"
				                        :value="item.id">
				                </el-option>
				            </el-select>
				        </div>
				        <div class="buttonDiv">
				            <el-button size="small" type="primary" @click="importIdentity">分析</el-button>
				             <el-button size="small" type="warning" @click="resetBufferParams">重置</el-button> 
				        </div>
				    </el-tab-pane>
				    <el-tab-pane label="选择范围" name="xzfw">
				        <div class="contentItem">
				            <!--地籍区/地籍子区-->
				            <span>选择范围：</span>
				            <el-select v-model="bufferParams.selectDjq" filterable size="small"  placeholder="请选择地籍区" @change="getDjzqList">
				                <el-option
				                        v-for="(item,index) in djqList"
				                        :key="index"
				                        :label="item.mc"
				                        :value="item.dm">
				                </el-option>
				            </el-select>
							<div class="towSelect">
				            <el-select v-model="bufferParams.selectDjzq" filterable size="small"  placeholder="请选择地籍子区">
				                <el-option
				                        v-for="(item,index) in djzqList"
				                        :key="index"
				                        :label="item.mc"
				                        :value="item.dm">
				                </el-option>
				            </el-select>
							</div>
				        </div>
				        <div class="contentItem">
				            <span>缓冲距离：</span>
				            <el-input-number :min="0" v-model="bufferParams.distance" size="small"></el-input-number> 米
				        </div>
				        <div class="contentItem">
				            <span>图层选择：</span>
				            <el-select size="small" multiple v-model="bufferParams.layerId">
				                <el-option
				                        v-for="item in bufferLayers"
				                        :key="item.id"
				                        :label="item.layerName"
				                        :value="item.id">
				                </el-option>
				            </el-select>
				        </div>
				        <div class="buttonDiv">
				            <el-button size="small" type="primary" @click="toFwIdentity">分析</el-button>
				            <el-button size="small" type="warning" @click="resetBufferParams">重置</el-button> 
				        </div>
				    </el-tab-pane>
				</el-tabs>
			</div>
			<div class="contet" v-show="currentActivate == 'chongdiefenxi'"></div>
		</div>
		<el-dialog title="图形导入" :visible.sync="importDialog"
		           width="30%">
		    <import-geometry @setGeometry = "setBufferGeometry"></import-geometry>
		</el-dialog>
	</div>
</template>

<script>
	import {maps} from '@/libs/map/mapUtils'
	import draw from '@/libs/map/draw'
	import identifyUtils from '@/libs/map/IdentifyUtils'
	import layerTree from '@/assets/json/layerTreeData.json'
	import mapLayerManager from './js/mapLayerManager.js'
	import importGeometry from './importGeometry'
	import mapTools from "./js/mapTools";
	export default{
		props:{
			viewId:{
				type:String,
				default:""
			}
		},
		 mixins:[draw,identifyUtils,mapLayerManager,mapTools],
		components:{
		    importGeometry
		},
		data(){
			return{
				currentActivate:"",
				layerTreeData:[],
				defaultSelectNodes:['1-1-1-2','1-1-3-3','1-1-3-9'],
				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,
            bufferParams:{
                drawType:"",
                distance:0,
                layerId:[],
                impotGeo:null,
                selectDjq:"",
                selectDjzq:""
            },
            activeName:'hzfw',
            bufferLayers:[{
                layerName:"宗地",
                id:"8"
            },
                {
                    layerName:"自然幢",
                    id:"10"
                },
                {
                    layerName:"构筑物",
                    id:"2"
                },
                {
                    layerName:"林权",
                    id:"5"
                },
                {
                    layerName:"宗海",
                    id:"9"
                }],
            bufferDialog:false,
            djqList:[],
            djzqList:[],
            importDialog:false,
            importGeo:""
			}
	    },
		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);
			},
			//缓冲区分析
			bufferAnalysis(){
			    this.bufferDialog = true;
			},
			//缓冲区分析执行语句
			toIdentity(){
			    var self = this;
			    var view = maps[this.viewId];
			    for(var key in this.bufferParams){
			        if((key == 'distance' || key == 'layerId' || key == 'drawType')&&!this.bufferParams[key].toString()){
			            var name = "";
			            switch (key) {
			                case 'distance':name = '缓冲距离';break;
			                case 'layerId':name = '分析图层';break;
			                case 'drawType':name = '绘制类型';break;
			            }
			            key == 'distance'?this.$message.warning("请输入"+name):this.$message.warning("请选择"+name);
			            return;
			        }
			    }
			    this.initDraw(this.bufferParams.drawType,this.viewId,null,function(geo){
			        self.createBuffer(geo,self.bufferParams.distance,self.viewId,function (bufGeo) {
			            self.identify(self.layerUrl,self.bufferParams.layerId,bufGeo,function(res){
			                var resultes = res.results;
			                if(resultes && resultes.length > 0){
			                    self.$parent.delIdentifyData(resultes);
			                    self.$parent.bottomResultDialog = true;
			                }else{
			                    self.$message.success("暂无数据!!!");
								//清除上次的结果 关闭上次的结果 清除地图数据
								self.$parent.closeBufferDialog(true);
			                }
			            },true,'all',3,view.extent);
			        })
			    })
			},
			toFwIdentity(){
			    var self = this;
			    var view = maps[this.viewId];
			    for(var key in this.bufferParams){
			        if((key == 'distance' || key == 'layerId' || key == 'selectDjq')&&!this.bufferParams[key].toString()){
			            var name = "";
			            switch (key) {
			                case 'distance':name = '缓冲距离';break;
			                case 'layerId':name = '分析图层';break;
			                case 'selectDjq':name = '地籍区/地籍子区';break;
			            }
			            key == 'distance'?this.$message.warning("请输入"+name):this.$message.warning("请选择"+name);
			            return;
			        }
			    }
			
			    var layer = null,type = "",dm = "";
			    if(this.bufferParams.selectDjzq){
			        layer = this.getLayerByName("DJZQ");
			        type = 'djzq';
			        dm = this.bufferParams.selectDjzq;
			    }else if(this.bufferParams.selectDjq){
			        layer = this.getLayerByName("DJQ");
			        type = 'djq';
			        dm = this.bufferParams.selectDjq;
			    }
			    this.queryDjqByDm(this.layerUrl+"/"+layer.id,type,dm,function (features) {
			        if(features.length > 0){
			            self.createBuffer(features[0].geometry,self.bufferParams.distance,self.viewId,function (bufGeo) {
			                self.identify(self.layerUrl,self.bufferParams.layerId,bufGeo,function(res){
			                    var resultes = res.results;
			                    if(resultes && resultes.length > 0){
			                        self.$parent.delIdentifyData(resultes);
			                        self.$parent.bottomResultDialog = true;
			                    }else{
			                        self.$message.success("暂无数据!!!");
									//清除上次的结果 关闭上次的结果 清除地图数据
									self.$parent.closeBufferDialog(true);
			                    }
			                },true,'all',3,view.extent);
			            })
			        }
			    });
			},
			importIdentity(){
			    var self = this;
			    var view = maps[this.viewId];
			    if(!this.importGeo){
			        this.$message.warning("请导入空间范围！！");
			        return;
			    }
			    for(var key in this.bufferParams){
			        if((key == 'distance' || key == 'layerId')&&!this.bufferParams[key].toString()){
			            var name = "";
			            switch (key) {
			                case 'distance':name = '缓冲距离';break;
			                case 'layerId':name = '分析图层';break;
			            }
			            key == 'distance'?this.$message.warning("请输入"+name):this.$message.warning("请选择"+name);
			            return;
			        }
			    }
				//将那个导入图层清除
			    self.createBuffer(this.importGeo,self.bufferParams.distance,self.viewId,function (bufGeo) {
			        self.identify(self.layerUrl,self.bufferParams.layerId,bufGeo,function(res){
			            var resultes = res.results;
			            if(resultes && resultes.length > 0){
			                self.$parent.delIdentifyData(resultes);
			                self.$parent.bottomResultDialog = true;
			            }else{
			                self.$message.success("暂无数据!!!");
							//清除上次的结果 关闭上次的结果 清除地图数据
							self.$parent.closeBufferDialog(true);
			            }
			        },true,'all',3,view.extent);
			    })
			},
			//清除缓冲区参数
			resetBufferParams(){
			    //清除参数
			    for(var key in this.bufferParams){
			        if(key == 'distance'){
			            this.bufferParams[key] = 0;
			        }else if(key == 'layerId'){
			            this.bufferParams[key] = []
			        } else {
			            this.bufferParams[key] = "";
			        }
			    }
			    //清除结果图层和绘制图层
			    this.$parent.closeResultDialog();
			    this.clearBufferLayer(this.viewId);
			},
			//获取地籍区/地籍子区数据
			getDjqList(){
			    var self = this;
			    var djqLayer = this.getLayerByName("DJQ");
			    this.queryAttributes(this.layerUrl+"/"+djqLayer.id,"",function (features) {
			        //self.djqAndDjzq.concat = features;
			        if(features != null){
			            for(var i = 0;i < features.length;i++){
			                var obj = {
			                    dm:features[i].attributes.DJQDM,
			                    mc:features[i].attributes.DJQMC,
			                    type:"djq"
			                }
			                self.djqList.push(obj);
			            }
			        }
			    })
			
			},
			//获取地籍子区
			getDjzqList(){
			    var self = this,
			        djzqLayer= this.getLayerByName("DJZQ");
					self.bufferParams.selectDjzq = "";
			    self.djzqList = [];
			    this.queryAttributes(this.layerUrl+"/"+djzqLayer.id,{"DJZQDM":this.bufferParams.selectDjq},function (features) {
			        if(features != null){
			            for(var i = 0;i < features.length;i++){
			                var obj = {
			                    dm:features[i].attributes.DJZQDM,
			                    mc:features[i].attributes.DJZQMC,
			                    type:"djzq"
			                }
			                self.djzqList.push(obj);
			            }
			        }
			    })
			},
			tabClick(name){
			    if(this.activeName == 'xzfw'){
			        if(this.djqList.length == 0){
			            this.djzqList = [];
			            this.getDjqList();
			        }
			    }
			},
			//设置导入的空间数据
			setBufferGeometry(geo){
				debugger
			    this.importGeo = geo;
			    this.importDialog = false;
			},
			//打开导入空间
			openImportDialog(){
			  this.importDialog = true;
			}
		}
    }
</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: 350px;
		     position: absolute;
		     background-color: #FFFFFF;
		     top: 0px;
		     right: 37px;
		     border-radius: 4px;
			 .content {
				 height:100%;
				 overflow:auto;
				 box-sizing: border-box;
				 padding:10px
			 }
			     /deep/ .el-tabs__header{
			         margin: 0px;
			     }
			     .contentItem{
			         margin: 8px 5px;
					 line-height: 28px;
			        .drawTypes{
			            display: contents;
						span{
							 margin: 0px 5px;
							 i{
								color: #6D7278;
								font-size: 20px; 
							 }
						}
						.active>i{
							 color: #0091FF;
						}
						span :hover{
							cursor:pointer
						}
			        }
					.towSelect{
						margin-left: 80px;
					}
			     }
			     .buttonDiv{
			         text-align: center;
			     }
	 }
	 .custom-tree-node{
		 display: contents;
		 span{
			 margin-right: 16px;
		 }
	 }
	 .setOpacity{
		 width: 100px;
	 }
	 /deep/ .el-slider__button{
		 width: 10px;
		 height: 10px;
	 }
</style>