<template>
    <div class="tools">
		<ul>
			<li>
				<i class="iconfont iconhangzhengqudaohang"></i>
			    <span>行政区导航</span>
			</li>
			<!-- <li>
				<i class="iconfont iconkongjianchaxun"></i>
			    <span>空间查询</span>
			</li> -->
			<li @click="pointPostion">
				<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>
       <div class="postionDialog" v-if="isPostion">
		   <el-form :inline="true" :model="postionParams" size="small">
		     <el-form-item label="经度:">
		       <el-input v-model="postionParams.x" placeholder="请输入经度"></el-input>
		     </el-form-item>
		     <el-form-item label="纬度:">
		      <el-input v-model="postionParams.y" placeholder="请输入经度"></el-input>
		     </el-form-item>
		     <el-form-item>
		       <el-button type="primary" @click="toPostion">定位</el-button>
		     </el-form-item>
		   </el-form>
	   </div>
    </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"

export default {
    props:{
        viewId:{
            type:String,
            default:"mainView"
        }
    },
    mixins:[draw,identifyUtils,measure,mapTools],
    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:[],
			postionParams:{
				x:"",
				y:""
			},
			isPostion:false
        }
    },
    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();
			this.$parent.closeBufferDialog();
			//清除定位 关闭定位
			this.clearPostionLayer(this.viewId);
			this.isPostion = false;
        },
        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("暂无数据!!!");
						self.$parent.closeResultDialog();
                    }
                },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);
            })
          });
        },
		//定位
		pointPostion(){
			//清除参数 清除图层
			this.clearPostionLayer(this.viewId);
			for(var key in this.postionParams){
				this.postionParams[key] = "";
			}
			this.isPostion = true;
		},
		toPostion(){
			if(!this.postionParams.x){
				this.$message.warning("请输入经度!!!!");
				return;
			}else if(!this.postionParams.y){
				this.$message.warning("请输入纬度!!!!");
				return;
			}
			this.postionToPoint(this.viewId,this.postionParams.x,this.postionParams.y);
		}
    }

    
}
</script>
<style lang="less" scoped>
    .tools{
        position: relative;
		display: flex;
		justify-content: space-around;
		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:20px;
                    color: #8C8E91;
                    position: relative;
                    top: 2px;
                }
                span{
                    font-size: 12px;
                    color: #6D7278;
                }
			}
			li:last-child{
				border: 0;
			}
			li :hover{
				cursor:pointer
			}
		}
		
		.postionDialog{
		   position: absolute;
		   top: 58px;
		}
    }
 
</style>