<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 v-model="inputBsm"> <el-button slot="append" type="primary" icon="el-icon-search" @click="doSearch"></el-button> </el-input>
            <!--搜索弹出框-->
            <div class="searchResult" v-show="dialogVisible">
                <div class="-header">
                    <span class="title">地块信息</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">
                        <!-- 图层选择-->
                        <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}}</span>
                        </div>
                    </div>
                </el-card>
            </div>
        </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'

export default {
    components:{
        EsriMap,
        MapTools
    },
    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",
            dialogVisible:false,
            selectResLayerId:null,
            features:[],
            resultLayers:[],
            results:[],
            inputBsm:"",
            heighGraphic:null
        }
    },
    mixins:[mapLayerManager,findTask],
    mounted(){
      var query = this.$route.query;
      if(query && JSON.stringify(query) != "{}"){
        this.addGeoByBsm(query.bsm,query.type,this.viewId);
      }
    },
    methods:{
        addLayer(){
            var self = this;
            var view = maps[this.viewId];
            view.ui.remove('zoom');
            loadModules([
                "esri/layers/MapImageLayer",
            ]).then(([
                MapImageLayer,
                ])=>{
                var mapImageLayer = new MapImageLayer({
                    url:self.layerUrl,
                    id:"testLayer",
                    spatialReference:view.spatialReference,
                    sublayers:[{
                        id:19,
                        visible:true
                    },
                        {
                            id:8,
                            visible:true
                        },
                        {
                            id:10,
                            visible:true
                        }]
                });
                view.map.add(mapImageLayer,1);
            }).catch(err => {
                throw(err);
            })
        },
        //缩放至
        toMap(attr){
            var self = this;
            this.extentToGraphic(attr,this.heighGraphic,this.viewId,function () {
                self.heighGraphic = attr;
            });
        },
        //图层选择事件
        selectLayerChange(){
            var self = this;
            var layerAndResult = this.results.filter(function (item) {
                return item.layerId = self.selectResLayerId;
            })
            if(layerAndResult){
                this.features = layerAndResult[0].features;
            }
        },
        //属性查询
        doSearch(){
            var self = this;
            if(!this.inputBsm){
                this.$message.warning(" 请输入标识码!!!");
                return;
            }else if(this.inputBsm.length != 32){
                this.$message.warning("标识码格式输入有误!!!");
                return;
            }
            this.findByPro(this.layerUrl,[8,10],'BSM',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;
        },
        //处理数据
        delIdentifyData(data){
            var self = this;
            self.results = [];
            self.selectResLayerId =null;
            self.features = [];
            self.resultLayers = [];
            this.heighGraphic = null;
            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.features.push(feature);
                }else{
                    if(layer){
                        this.resultLayers.push({
                            id:layerId,
                            label:layer.layerLabel
                        })
                        var layerAndResult = {
                            layerId:layerId,
                            features:[]
                        }
                        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);
                    }
                }
            }
            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: 5px;
      }
      .searchDiv{
          position: absolute;
          top: 12px;
          left: 7px;
          width: 30%;
          max-height: 100%;
          /deep/ .el-input-group__append{
              background-color: #409eff;
              color: white;
          }
          .searchResult{
              margin-top: 3px;
              background: white;
              border-radius: 4px;
              max-height: 80%;
              .-header{
                  line-height: 32px;
                  padding: 3px 20px;
                  background-color: #519eff;
                  border-top-right-radius: 4px;
                  border-top-left-radius: 4px;
                  .title{
                      font-size: 14px;
                      color: white;
                      font-weight: 600;
                  }
                  .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: 23px;
                      align-items: center;
                      .key{
                          width: 30%;
                          margin: 5px 3px;
                          text-align: right;
                      }
                      .value{
                          width: 70%;
                          overflow:hidden;
                          text-overflow:ellipsis;
                          white-space:nowrap;
                          word-break:keep-all;
                      }
                  }

              }
              /deep/ .el-card__body{
                  max-height: 363px;
                  overflow: auto;
              }
          }
      }
  }
</style>