<template>
    <div class="testMap">
        <div class="mapTools">
            <mapTools :viewId="viewId"></mapTools>
        </div>
        <EsriMap :viewId = "viewId" :afterLoaderFunction="addLayer"></EsriMap>
        <div class="searchDiv">
            <el-input  placeholder="请输入宗地代码或不动产单元号"  clearable @focus = "isShowCondition = true" v-model="inputBsm"> <el-button slot="append" type="primary" icon="el-icon-search" @click="doSearch"></el-button> </el-input>
            <!-- 搜索条件选择 -->
			<div class="searchCondition" v-if="isShowCondition">
				<ul>
					<li @click="fieldName = 'ZDDM'">
						<span :class="fieldName == 'ZDDM'?'active':''">
						<i class="iconfont iconzongdidaima"></i>
						<span>宗地代码</span>
						</span>
					</li>
					<li @click="fieldName = 'BDCDYH'">
						<span :class="fieldName == 'BDCDYH'?'active':''">
						<i class="iconfont iconbudongchandanyuanhao"></i>
						<span>不动产单元号</span>
						</span>
					</li>
				</ul>
			</div>
			<!--搜索弹出框-->
            <div class="searchResult" v-show="dialogVisible">
                <div class="-header">
                    <span class="title">共有搜索结果&nbsp;&nbsp;{{totalResults}}条</span>
                    <span class="closeButton">
                         <i class="close el-icon-close" @click="closeResultDialog"></i>
                    </span>
                </div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix" v-show="resultLayers.length > 1">
                        <!-- 图层选择-->
                        <span class="formTitle">图层选择:</span>
                        <el-select v-model="selectResLayerId" size="mini"  @change="selectLayerChange" placeholder="请选择">
                            <el-option
                                    v-for="(item,index) in resultLayers"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <!-- 数据结果-->
                    <div  class="text item" v-for="(item,index) in features" :key="index">
                        <P>
                            <span class="title"><i class="iconfont iconxinxi"></i> 基本信息</span>
                            <a href="#" @click="toMap(item)">缩放至</a>
                        </P>
                        <hr/>
                        <!-- <div class="contentItem" v-for="(value,key,index) in item.attributes" :key="index">
                            <span class="key">{{key}}：</span>
                            <span class="value" :title="value">{{value == 'Null' ?"":value}}</span>
                        </div> -->
						<div class="contentItem">
						    <span class="key">宗地代码：</span>
						    <span class="value" :title="item.attributes['宗地代码']">{{item.attributes['宗地代码']  == 'Null'?"":item.attributes['宗地代码']}}</span>
						</div>
						<div class="contentItem">
						    <span class="key">不动产单元号：</span>
						    <span class="value" :title="item.attributes['不动产单元号']">{{item.attributes['不动产单元号']  == 'Null'?"":item.attributes['不动产单元号']}}</span>
						</div>
						<div class="contentItem">
						    <span class="key">项目名称：</span>
						    <span class="value" :title="item.attributes['项目名称']">{{item.attributes['项目名称']  == 'Null'?"":item.attributes['项目名称']}}</span>
						</div>
						<div class="contentItem">
						    <span class="key">不动产证号：</span>
						    <span class="value" :title="item.attributes['不动产证号']">{{item.attributes['不动产证号']  == 'Null'?"":item.attributes['不动产证号']}}</span>
						</div>
						<div class="contentItem">
						    <span class="key">权利人：</span>
						    <span class="value" :title="item.attributes['QLR']">{{item.attributes['QLR']  == 'Null'?"":item.attributes['QLR']}}</span>
						</div>
						<div class="contentItem">
						    <span class="key">坐落：</span>
						    <span class="value" :title="item.attributes['坐落']">{{item.attributes['坐落']  == 'Null'?"":item.attributes['坐落']}}</span>
						</div>
                    </div>
                </el-card>
            </div>
        </div>
        <!-- 侧边栏 -->
		<div class="rightSide">
			<side-tools :viewId="viewId"></side-tools>
		</div>
		<div class="changeMap">
            <ChangeMap :viewId="viewId"></ChangeMap>
        </div>
		<!-- 底部数据展示区域 -->
		<div class="bottomResult" v-if="bottomResultDialog">
			<div class="closeButn" @click="closeBufferDialog(false)">
				<i class="el-icon-close"></i>
			</div>
			  <el-tabs v-model="activeName" >
			    <el-tab-pane v-for="(item,index) in results" :label="item.label+'('+item.features.length+')个'" :name="'tab'+index" :key="index">
					  <el-table
					    :data="item.features"
					    stripe
						border
						highlight-current-row
						@row-click="resultTabClick"
					    style="width: 100%">
						 <el-table-column
						      label="序号"
						      type="index"
						      width="50">
						    </el-table-column>
					    <el-table-column
					      label="宗地代码">
						   <template slot-scope="scope">
						          <span>{{ scope.row.attributes['宗地代码'] == 'Null'?'':scope.row.attributes['宗地代码'] }}</span>
						   </template>
					    </el-table-column>
					    <el-table-column
					      label="不动产单元号">
						  <template slot-scope="scope">
						         <span>{{ scope.row.attributes['不动产单元号'] == 'Null'?'':scope.row.attributes['不动产单元号'] }}</span>
						  </template>
					    </el-table-column>
					    <el-table-column
					      label="项目名称">
						  <template slot-scope="scope">
						         <span>{{ scope.row.attributes['项目名称'] == 'Null'?'':scope.row.attributes['项目名称'] }}</span>
						  </template>
					    </el-table-column>
						<el-table-column
						  label="不动产权证号">
						  <template slot-scope="scope">
						         <span>{{ scope.row.attributes['不动产权证号'] == 'Null'?'':scope.row.attributes['不动产权证号'] }}</span>
						  </template>
						</el-table-column>
						<el-table-column
						  label="权利人">
						  <template slot-scope="scope">
						         <span>{{ scope.row.attributes['QLR'] == 'Null'?'':scope.row.attributes['QLR'] }}</span>
						  </template>
						</el-table-column>
						<el-table-column
						  label="坐落">
						  <template slot-scope="scope">
						         <span>{{ scope.row.attributes['坐落'] == 'Null'?'':scope.row.attributes['坐落'] }}</span>
						  </template>
						</el-table-column>
					  </el-table>
				</el-tab-pane>
			  </el-tabs>
		</div>
    </div>
</template>
<script>
import EsriMap from '@/components/map/EsriMap'
import MapTools from './mapWeight/mapTools'
import {loadModules} from 'esri-loader'
import {maps} from '@/libs/map/mapUtils'
import mapLayerManager from "./mapWeight/js/mapLayerManager";
import layers from '@/assets/json/layers.json'
import findTask from '@/libs/map/findTask'
import ChangeMap from "@/components/map/ChangeMap";

import sideTools from "./mapWeight/sideTools.vue"

import mapTools from './mapWeight/js/mapTools.js'

export default {
    inject:['getRightTree','getTreeByBsm'],
    components:{
        EsriMap,
        MapTools,
        ChangeMap,
		sideTools
    },
    data(){
        return{ 
            viewId:"testMap",
            // 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",
            layerUrl: 'https://192.168.2.146:6443/arcgis/rest/services/qj/XZQH/MapServer',      // 行政区划
            bdcdyUrl: 'https://192.168.2.146:6443/arcgis/rest/services/qj/BDCDY/MapServer',     // 不动产单元
            djfqUrl: 'https://192.168.2.146:6443/arcgis/rest/services/qj/DJFQ/MapServer',       // 地籍分区
            zrdlUrl: 'https://192.168.2.146:6443/arcgis/rest/services/qj/JCDL/MapServer',       // 自然地理
            dialogVisible:false,
            selectResLayerId:null,
            features:[],
            resultLayers:[],
            results:[],
            inputBsm:"",
			fieldName:"BDCDYH",
            heighGraphic:null,
			isShowCondition:false,
			totalResults:0,
			activeName:"tab0",
			bottomResultDialog:false
        }
    },
    mixins:[mapLayerManager,findTask,mapTools],
    mounted(){

        var query = this.$route.query
        var self = this;
        setTimeout(function () {
            if(query && JSON.stringify(query) != "{}"){
                //self.addGeoByBsm(query.bsm,query.type,self.viewId);
                if(query.type == 'zd'){
                    self.getRightTree(query.bsm,'0,1,2')
                }else if(query.type == 'zrz'){
                    self.getTreeByBsm(query.bsm,'zrz','0,1,2');
                }
            }
        },500);


    },
    methods:{
        addLayer(){
            var self = this;
            var view = maps[this.viewId];
           // view.ui.remove('zoom');
            view.ui.remove("attribution");
            view.ui.move(["zoom"], "bottom-right");
            loadModules([
                "esri/layers/MapImageLayer"
            ]).then(([ MapImageLayer ])=>{
                var mapImageLayer = new MapImageLayer({
                    url:self.layerUrl,
                    id:"testLayer",
                    spatialReference:view.spatialReference
                });
                view.map.add(mapImageLayer, 1);

                let bdcdyLayer = new MapImageLayer({
                    url:self.bdcdyUrl,
                    id:"bdcdyLayer", 
                    spatialReference:view.spatialReference
                });
                view.map.add(bdcdyLayer); 

                let djfqLayer = new MapImageLayer({
                    url:self.djfqUrl,
                    id:"djfqLayer", 
                    visible: false,
                    spatialReference:view.spatialReference
                });
                view.map.add(djfqLayer); 

                let zrdlLayer = new MapImageLayer({
                    url:self.zrdlUrl,
                    id:"zrdlLayer", 
                    visible: false,
                    spatialReference:view.spatialReference
                });
                view.map.add(zrdlLayer);

                var query = self.$route.query;
                if(query && JSON.stringify(query) != "{}"){
                    self.addGeoByBsm(query.bsm,query.type,self.viewId);
                }
            }).catch(err => {
                throw(err);
            })
        },
        //缩放至
        toMap(attr){
            var self = this;
            if(attr.geometry){
                this.extentToGraphic(attr,this.heighGraphic,this.viewId,function () {
                    self.heighGraphic = attr;
                });
            }else {
                this.$message.warning("没有图形信息!!")
            }

        },
		resultTabClick(row,column,evt){
			var self = this;
			if(row.geometry){
			    this.extentToGraphic(row,this.heighGraphic,this.viewId,function () {
			        self.heighGraphic = row;
			    });
			}else {
			    this.$message.warning("没有图形信息!!")
			}
		},
        //图层选择事件
        selectLayerChange(){
            var self = this;
            this.features = [];
            var layerAndResult = this.results.filter(function (item) {
                return item.layerId == self.selectResLayerId;
            })
            if(layerAndResult){
                this.features = layerAndResult[0].features;
            }
        },
        //属性查询
        doSearch(){
			this.closeResultDialog();
            var self = this;
			if(!this.fieldName){
				this.$message.warning(" 请选择要查询的字段!!!");
				return;
			}
            if(this.fieldName == 'ZDDM'){
				if(!this.inputBsm){
					this.$message.warning("请输入宗地代码!!!");
					return;
				}else if(this.inputBsm.length != 19){
					this.$message.warning("输入宗地代码有误，请重新输入!!!");
					return;
				}
			} else if(this.fieldName == 'BDCDYH'){
				if(!this.inputBsm){
					this.$message.warning("请输入不动产单元号!!!");
					return;
				}else if(this.inputBsm.length != 28){
					this.$message.warning("输入不动产单元有误，请重新输入!!!");
					return;
				}
			}
			this.isShowCondition = false;
            this.findByPro(this.layerUrl,[8,10],this.fieldName,this.inputBsm,true,function (res) {
                var resultes = res.results;
                if(resultes && resultes.length > 0){
                    self.delIdentifyData(resultes);
                   if(!self.dialogVisible){
                       self.dialogVisible = true;
                   }
                }else {
                    self.$message.warning("查询不到相关数据!!!");
                }
            });
        },
        //关闭查询结果
        closeResultDialog(){
            //关闭时清除查询结果 清除数据
            this.results = [];
            this.selectResLayerId =null;
            this.features = [];
            this.resultLayers = [];
            this.heighGraphic = null;
            //清除查询图层
            this.clearSearchLayer(this.viewId);
            this.dialogVisible = false;
        },
		closeBufferDialog(flag){
			//关闭时清除查询结果 清除数据
			this.results = [];
			this.selectResLayerId =null;
			this.features = [];
			this.resultLayers = [];
			this.heighGraphic = null;
			//清除查询图层
			this.clearSearchLayer(this.viewId);
			this.bottomResultDialog = false;
			if(!flag){
			 this.clearBufferLayer(this.viewId);	
			}
		},
        //处理数据
        delIdentifyData(data){
            var self = this;
            self.results = [];
            self.selectResLayerId =null;
            self.features = [];
            self.resultLayers = [];
            this.heighGraphic = null;
            //清除查询图层
			this.clearSearchLayer(this.viewId);
            this.totalResults = data.length; 
            for(var i = 0;i < data.length;i++){
                var layerId = data[i].layerId;
                var layer = self.getLayerById(layerId);

                var layerResult = self.results.filter(function (item) {
                    return item.layerId == layerId;
                })
                if(layerResult && layerResult.length > 0){
                    var feature = data[i].feature,
                        attributes = {},
                        fieldAliases = layer.fieldAliases;
                    for(var key in feature.attributes){
                        if(!feature.attributes[key]){
                            delete feature.attributes[key]
                        }
                    }
                    layerResult[0].features.push(feature);
                }else{
                    if(layer){
                        this.resultLayers.push({
                            id:layerId,
                            label:layer.layerLabel
                        })
                        var layerAndResult = {
                            layerId:layerId,
                            features:[],
							label:layer.layerLabel
                        }
                        var feature = data[i].feature,
                            attributes = {},
                            fieldAliases = layer.fieldAliases;
                        for(var key in feature.attributes){
                            if(!feature.attributes[key]){
                                delete feature.attributes[key]
                            }
                        }
                        layerAndResult.features.push(feature);
                        self.results.push(layerAndResult);
                    }
                }
            }
			self.selectResLayerId = self.resultLayers.length > 0 ? self.resultLayers[0].id : null;
			this.selectLayerChange();
            this.addSearchResultToMap(this.results,this.viewId);
        },
        getLayerById(layerId){
            var parseLayers = JSON.parse(JSON.stringify(layers));
            var layer  = parseLayers.filter(function (item) {
                return item.id == layerId;
            })
            if(layer){
                return layer[0];
            }

            return  null;
        },
        //展示查询数据结果

    }
}
</script>
<style scoped lang="less">
  .testMap{
      height: 100%;
      width: 100%;
      position: relative;
      .mapTools{
              position: absolute;
            top: 12px;
            z-index: 99;
            right: 21px;
      }
      .searchDiv{
          position: absolute;
          top: 12px;
          left: 7px;
          width: 25%;
          max-height: 100%;
          /deep/ .el-input-group__append{
              background-color: #409eff;
              color: white;
          }
		  .searchCondition{
			      width: 100%;
			      line-height: 60px;
			      background-color: #FFFFFF;;
			      border-radius: 4px;
			      margin-top: 6px;
				  box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.12);
				  position: relative;
				  ul{
					      //height: 40px;
					      display: inline-flex;
					      width: 100%;
					  li{
						  width: 50%;
						  text-align: center;
					  }
					  li :hover{
						  cursor:pointer
					  }
				  }
				  i{
					  font-size: 24px;
					  margin-right: 3px;
					  position: relative;
					  top: 2px;
				  }
				  span{
					  font-size: 14px;
					  color: #4A4A4A;
				  }
				  .iconzongdidaima{
					  color: #44AEFF;
				  }
				  .iconbudongchandanyuanhao{
					  color: #F39835;
				  }
				  .active{
					  border-bottom: 2px solid #409eff;
					  padding-bottom: 10px;
				  }
			  }
          .searchResult{
              margin-top: 3px;
              background: white;
              border-radius: 4px;
              max-height: 80%;
              .-header{
                  line-height: 32px;
                  padding: 3px 20px;
                  background-color: #FFFFFF;
                  border-top-right-radius: 4px;
                  border-top-left-radius: 4px;
                  .title{
                      font-size: 14px;
                      color: #6D7278;
                  }
                  .closeButton{
                      float: right;
                      font-size: 16px;
                      color: black;
                  }
                  .closeButton :hover{
                      cursor:pointer
                  }
              }
              /deep/ .el-card__header {
                  padding: 10px 20px;
              }
             .formTitle{
                 margin-right: 5px;
                 font-size: 14px;
             }
              .item{
                  p{
                      margin: 0px 3px;
                      font-size: 14px;
                      .title{

                      }
                      a{
                          float: right;
                          color: #519eff
                      }
                  }
                  .contentItem{
                      display: flex;
                      font-size: 14px;
                      width: 100%;
                      line-height: 30px;
                      align-items: center;
					  font-weight: 400;
                      .key{
                          width: 100px;
                          margin: 3px 0px;
                          text-align: right;
						  color: #505050;
                      }
                      .value{
                          width: calc(100% - 100px);
                          overflow:hidden;
                          text-overflow:ellipsis;
                          white-space:nowrap;
                          word-break:keep-all;
						  color: #999999;
                      }
                  }

              }
              /deep/ .el-card__body{
                  max-height: 363px;
                  overflow: auto;
              }
          }
      }
      .changeMap{
          position: absolute;
              bottom: 8px;
              right: 52px;
      }
	  .rightSide{
		  position: absolute;
		  top: 10%;
		  right: 21px;
	  }
	  /deep/ .esri-ui-bottom-right{
		  bottom: -17px;
	  }
	  .bottomResult{
		  position: absolute;
		      bottom: 0px;
		      height: 26%;
		      overflow: auto;
		      width: 96%;
		      background-color: #ffffff;
		      margin: 10px;
		      border-radius: 4px;
			  .closeButn{
				  position: relative;
				      float: right;
				      font-size: 18px;
				      color: #9B9B9B;
					  z-index: 16;
			  }
			  .closeButn :hover{
				  cursor:pointer;
			  }
			  /deep/ .el-tabs__header{
				       margin: 0 0 0px;
			  }
			 /deep/ .el-table td, .el-table th{
				  text-align: center;
			  }
			  /deep/ .el-tabs__nav :first{
				  margin-left: 33px;
			  }
			  
			  /deep/ .el-tabs__item.is-active{
				  color: #505050;
				  background-color:#ffffff;
			  }
	  }
  }
</style>