<template>
    <div class="tools">
		<ul>
			<li>
				<i class="iconfont iconhangzhengqudaohang"></i>
			    <span>行政区导航</span>
			</li>
			<li>
				<i class="iconfont iconkongjianchaxun"></i>
			    <span>空间查询</span>
			</li>
			<li>
				<i class="iconfont iconzuobiaodingwei"></i>
			    <span>定位</span>
			</li>
			<li>
				<i class="iconfont iconduopingduibi"></i>
			    <span>多屏对比</span>
			</li>
			<li @click="fullMap">
				<i class="iconfont iconquantu"></i>
			    <span>全图</span>
			</li>
			<li @click="measureMent('distance')">
				<i class="iconfont iconceju"></i>
			    <span>测距</span>
			</li>
			<li  @click="measureMent('area')">
				<i class="iconfont iconcemianji"></i>
			    <span>测面</span>
			</li>
			<li @click="zoomOut">
				<i class="iconfont iconlakuangfangda"></i>
			    <span>放大</span>
			</li>
			<li @click="zoomIn">
				<i class="iconfont iconlakuangsuoxiao"></i>
			    <span>缩小</span>
		    </li>
			<li @click="info">
				<i class="iconfont iconxinxi"></i>
			    <span>识别</span>
			</li>
			<li @click="clear">
				<i class="iconfont iconqingchu"></i>
			    <span>清除</span>
			</li>
		</ul>
     <!-- <el-button-group>
        <el-button type="primary" title="全图" icon="iconfont iconquantu" @click="fullMap"></el-button>
        <el-button type="primary" title="测面" icon="iconfont iconcemianji" @click="measureMent('area')"></el-button>
        <el-button type="primary" title="测距" icon="iconfont iconceju" @click="measureMent('distance')"></el-button>
         <el-button type="primary" title="放大" icon="iconfont iconlakuangfangda" @click="zoomOut"></el-button>
        <el-button type="primary" title="缩小" icon="iconfont iconlakuangsuoxiao" @click="zoomIn"></el-button>
        <el-button type="primary" title="点选" icon="iconfont iconchaxunshuxing" @click="info"></el-button>
          <el-button type="primary" title="缓冲区分析" icon="iconfont iconqingchu" @click="bufferAnalysis"></el-button>
        <el-button type="primary" title="清除" icon="iconfont iconqingchu" @click="clear"></el-button>
      </el-button-group> -->
        <div class="bufferDialog" v-show="bufferDialog">
            <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
                <el-tab-pane label="绘制范围" name="hzfw">
                    <div class="contentItem">
                        <span>绘制范围：</span>
                        <div class="drawTypes">
                          <el-button type="text" @click="bufferParams.drawType = 'point'">点</el-button>
                            <el-button type="text" @click="bufferParams.drawType = 'circle'">圆</el-button>
                            <el-button type="text" @click="bufferParams.drawType = 'polygon'">任意多边形</el-button>
                        </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" @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" @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>
                        <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 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" @click="resetBufferParams">重置</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="图形导入" :visible.sync="importDialog"
                   width="30%">
            <import-geometry @setGeometry="setGeometry"></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 measure from '@/libs/map/measure'

import mapTools from "./js/mapTools";

import {loadModules} from "esri-loader"
import importGeometry from './importGeometry'
export default {
    props:{
        viewId:{
            type:String,
            default:"mainView"
        }
    },
    mixins:[draw,identifyUtils,measure,mapTools],
    components:{
        importGeometry
    },
    data(){
        return{
            url:"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",
            selectResLayerId:"",
            features:[],
            resultLayers:[],
            results:[],
            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:""
        }
    },
    methods:{
        fullMap(){
            var view = maps[this.viewId];
            view.zoom = 10;
            view.center = [108.95,34.27]
        },
        measureMent(type){
            this.measure(this.viewId,type);
        },
        clearHeightLayer(){
            
        },
        clear(){
            this.measure(this.viewId,null);
            this.$parent.closeResultDialog();
        },
        info(){
             var view = maps[this.viewId];
             var self = this;
            this.initDraw("point",this.viewId,null,function(geo){
                self.identify(self.url,[8,10],geo,function(res){
                    var resultes = res.results;
                    if(resultes && resultes.length > 0){
                        self.$parent.delIdentifyData(resultes);
                        self.$parent.dialogVisible = true;
                    }else{
                        self.$message.success("暂无数据!!!");
                    }
                },true,'all',3,view.extent);
            });
        },

        zoomOut(){
            var view = maps[this.viewId];
          this.initDraw("rectangle",this.viewId,null,function(geo){
            view.extent = geo.extent;
          });
        },
        zoomIn(){
            var view = maps[this.viewId];
          this.initDraw("rectangle",this.viewId,null,function(geo){
            var  dWidth, dHeight, dXmin, dYmin, dXmax, dYmax;
            dWidth = view.extent.width * view.extent.width / geo.extent.width;
            dHeight = view.extent.height * view.extent.height / geo.extent.height;
            dXmin = view.extent.xmin - ((geo.extent.xmin - view.extent.xmin) * view.extent.width / geo.extent.width);
            dYmin = view.extent.ymin - ((geo.extent.ymin - view.extent.ymin) * view.extent.height / geo.extent.height);
            dXmax = dXmin + dWidth;
            dYmax = dYmin + dHeight;
            //pEnv.PutCoords(dXmin, dYmin, dXmax, dYmax);
            loadModules(["esri/geometry/Extent"]).then(([Extent]) => {
              view.extent = new Extent({
                xmin: dXmin,
                ymin: dYmin,
                xmax: dXmax,
                ymax: dYmax,
                spatialReference: {
                  wkid: 102100
                }
              });
            }).catch( err => {
              throw (err);
            })
          });
        },
        //缓冲区分析
        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.url,self.bufferParams.layerId,bufGeo,function(res){
                        var resultes = res.results;
                        if(resultes && resultes.length > 0){
                            self.$parent.delIdentifyData(resultes);
                            self.$parent.dialogVisible = true;
                        }else{
                            self.$message.success("暂无数据!!!");
                        }
                    },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.url+"/"+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.url,self.bufferParams.layerId,bufGeo,function(res){
                            var resultes = res.results;
                            if(resultes && resultes.length > 0){
                                self.$parent.delIdentifyData(resultes);
                                self.$parent.dialogVisible = true;
                            }else{
                                self.$message.success("暂无数据!!!");
                            }
                        },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.url,self.bufferParams.layerId,bufGeo,function(res){
                    var resultes = res.results;
                    if(resultes && resultes.length > 0){
                        self.$parent.delIdentifyData(resultes);
                        self.$parent.dialogVisible = true;
                    }else{
                        self.$message.success("暂无数据!!!");
                    }
                },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();
        },
        //获取地籍区/地籍子区数据
        getDjqList(){
            var self = this;
            var djqLayer = this.getLayerByName("DJQ");
            this.queryAttributes(this.url+"/"+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.djzqList = [];
            this.queryAttributes(this.url+"/"+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();
                }
            }
        },
        //设置导入的空间数据
        setGeometry(geo){
            this.importGeo = geo;
            this.importDialog = false;
        },
        //打开导入空间
        openImportDialog(){
          this.importDialog = true;
        },
    }

    
}
</script>
<style lang="less" scoped>
    .tools{
        position: relative;
		display: flex;
		justify-content: space-around;
		line-height: 48px;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.18);
		border-radius: 4px;
		ul{
			height: 48px;
			li{
				margin-top:12px;
				padding:0 10px;
				border-right: 1px dashed #CBCBCB;
				float: left;
				height: 24px;
				line-height: 24px;
                i{
                    font-size:16px;
                    color: #8C8E91;
                    position: relative;
                    top: 2px;
                }
                span{
                    font-size: 12px;
                    color: #6D7278;
                }
			}
			li:last-child{
				border: 0;
			}
			li :hover{
				cursor:pointer
			}
		}
    }
    .bufferDialog{
        background: #f9f8f7;
        margin-top: 5px;
        padding-bottom: 20px;
        /deep/ .el-tabs__header{
            margin: 0px;
        }
        .contentItem{
            margin: 8px 5px;
           .drawTypes{
               display: contents;
           }
        }
        .buttonDiv{
            text-align: center;
        }
    }
</style>