<template>
  <div class="map-tools">
    <div class="x-row tool-row">
      <div class="x-col x-col-fixed">
        <el-dropdown @command="mapDropdownClick">
          <el-button type="primary" class="left-primary">
            工具箱<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="my-dropdown">
            <el-dropdown-item command="search">搜索</el-dropdown-item>
            <el-dropdown-item command="location">坐标定位</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="x-col">
        <!--地图搜索-->
        <div v-show="mapSearch" class="map-search">
          <div class="x-row">
            <div class="x-col" style="padding-right: 0;">
              <input id="tipinput" v-model="searchWord" class="inputBox"/>
              <i class="el-icon-circle-cross clearButton" v-show="searchWord.length>0" @click="clearSearch"></i>
              <!--     <el-input v-model="searchWord" placeholder="请输入内容" icon="circle-close"
                             @keyup.native.enter="searchAddress"
                             :on-icon-click="clearSearch"
                   ></el-input>-->


            </div>
            <div class="x-col x-col-fixed" style="padding-left: 0;">
              <el-button type="primary" class="searchBtn" icon="search"
                         @click="searchAddress" :disabled="clickAddress">定位


              </el-button>
            </div>
          </div>
          <div class="search-resource">
            <ul v-show="searchResult">
              <li v-for="item in searchResource" class="res-li" @click="searchLocation(item)">
                <div class="x-row">
                  <div>
                                        <span style="line-height: 18px;font-size: 15px; padding-top: 2px;"
                                              class="el-icon-search"></span>
                  </div>
                  <div>
                    <span style="color: #333;">{{item.value1}}</span>
                    <span class="" style="color: #409eff;">({{item.belong1}})</span>
                    <span style="color: #999;">
                                            <span class="" v-if="!!item.value2">{{item.value2}}</span>
                                            <span class="" v-if="!!item.value3">{{item.value3}}</span>
                                        </span>
                  </div>
                </div>
              </li>
            </ul>
            <li v-show="noSearchData" class="noSearch">未找到相关道路</li>
          </div>
        </div>
        <!--坐标定位-->
        <div class="x-row" v-show="searchXY">
          <div class="x-col">
            <el-input v-model="searchX" class="input-control first-x" placeholder="X" clearable></el-input>
          </div>
          <div class="x-col two-y">
            <el-input v-model="searchY" class="input-control" placeholder="Y" clearable></el-input>
          </div>
          <div class="x-col x-col-fixed">
            <el-button type="primary" class="searchBtn" icon="search" :disabled="!searchX || !searchY"
                       @click="clickLocation">定位


            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import arcgisAPI from './arcgis/arcgisAPI'

  export default {
    name: 'locate-tool',
    data() {
      return {
        mapSearch: true,
        searchX: '',
        searchY: '',
        searchWord: '',
        searchResource: [],
        searchAddXY: false,
        clickAddress: true,
        searchResult: false,
        noSearchData: false,
        searchXY: false
      }
    },
    mounted() {

    },
    watch: {
      searchWord: function () {
        console.log(this.searchWord)
      }
    },
    methods: {
      clearSearch() {
        this.searchWord = '';
        this.selectedAddress = '';
        this.clickAddress = true;
      },
      init: function (mapComponent, config) {
        this.mapComponent = mapComponent;
        if (config.locateTool == 'GD') {
          //高德地图搜索引擎
          this.initGDEngine(config);
        } else if (config.locateTool == 1) {
        }
      },
      initGDEngine: function (config) {
        var auto = new AMap.Autocomplete({
          input: "tipinput",
          city: config.city//目标城市
        });
        var self = this;
        AMap.event.addListener(auto, "select", function (e) {
          //注册监听，当选中某条记录时会触发
          self.selectedAddress = e.poi;
          self.searchWord = e.poi.name;
          self.clickAddress = false;
        });
      },
      //点击搜索结果定位
      searchLocation: function (e) {

      },
      searchAddress: function (e) {
        this.$emit('locateAddress', this.selectedAddress);
        /*  this.$emit('searchAddress', this.searchWord, function (list) {
         this.searchResource = list;
         }.bind(this));*/
      },
      clickLocation() {
        this.mapComponent.setCenter(this.searchX, this.searchY);
      },
      searchXy: function () {
        this.mapSearch = false;
        this.searchXY = true;
        this.searchAddXY = false;
      },
      mapDropdownClick(command) {//显示排水户录入
        this.command = command;
        if (command == 'search') {//搜索
          this.mapSearch = true;
          this.searchXY = false;
          this.searchAddXY = false;
        } else if (command == 'location') {//坐标定位
          this.searchXy();
        }
      }
    }
  }
</script>

<style>
  .right-content {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #fff;
    width: 300px;
  }

  /*地图插件样式*/
  #topbar {
    position: absolute;
    top: 70px;
    left: 0;
    padding: 10px 0;
    box-shadow: none;
  }

  .action-button {
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #fff;
    color: #6e6e6e;
    height: 32px;
    width: 32px;
    text-align: center;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  }

  .action-button:hover,
  .action-button:focus {
    background: #409eff;
    color: #e4e4e4;
  }

  .active {
    background: #409eff;
    color: #e4e4e4;
    border-color: #409eff;
  }

  .esri-popup__feature-buttons .esri-popup__action {
    background-color: #409eff;
    color: #fff;
    padding: 8px;
    border-radius: 4px;
    margin: 5px auto;
    font-size: 15px;
    height: 30px;
    width: 95%;
    max-width: initial;
    font-size: 13px;
  }

  .esri-popup__navigation {
    display: none;
  }

  .esri-popup__action-text {
    margin: 0 auto;
  }

  /*弹出的地图搜索框*/

  .map-search .inputBox {
    border: 0;
    width: 100%;
    height: 100%;
    padding: 0 5px;
    font-size: 16px;
  }

  .map-search .clearButton {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 80px;
    top: 15px;
    color: lightgray;
  }

  .map-search {
    position: relative;
  }

  .map-tools {
    position: absolute;
    top: 20px;
    left: 70px;
    width: 400px;
  }

  .my-dropdown .el-dropdown-menu__item {
    padding: 0 10px;
  }

  .map-tools .el-input__inner {
    border-color: #fff;
    border-radius: 0;
    height: 41px;
  }

  .map-tools .tool-row {
    width: 100%;
    box-shadow: 4px 5px 15px rgba(0, 0, 0, 0.15);
  }

  .map-tools .x-row, .map-tools .x-col {
    padding: 0;
    background-color: #fff;
  }

  .map-tools .el-button {
    border-radius: 0;
    padding: 12px 9px;
  }

  .pipe-check-add .el-input__inner {
    border-radius: 0;
    border-color: #409eff;
    height: 36px;
    padding: 5px;
  }

  .tool-row .el-button {
    font-size: 15px;
  }

  .cj-btn {
    height: 36px;
    padding: 8px 10px;
  }

  .map-search .searchBtn {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }

  .x-col .left-primary {
    background: #fff;
    color: #409EFF;
    border-color: #fff;
    border-right: 1px solid #eee;
    font-weight: bold;
  }

  .search-resource {
    position: absolute;
    max-height: 500px;
    overflow-y: auto;
    top: 41px;
    width: 100%;
    left: 0;
  }

  .search-resource::-webkit-scrollbar {
    width: 4px; /*滚动条宽度*/
  }

  .search-resource::-webkit-scrollbar-track {
    background-color: #F3F3F3;
  }

  .search-resource::-webkit-scrollbar-track-piece {
    background-color: #F3F3F3;
    -webkit-border-radius: 4px;
  }

  .search-resource::-webkit-scrollbar-thumb {
    background-color: #F3F3F3;
    border: solid 1px #C0C0C0;
    border-radius: 8px;
  }

  .search-resource ul {
    background-color: #fff;
  }

  .noSearch {
    color: #999;
    text-align: center;
    background-color: #fff;
    padding: 10px;
  }

  .res-li {
    padding: 10px;
  }

  .res-li .el-icon-search {
    padding-right: 5px;
  }

  .res-li:hover {
    /*background-color: #409EFF;*/
    background-color: #eee;
    color: #555;
  }

  .x-row {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    padding: 5px;
    width: 100%;
  }

  .x-col.x-col-fixed {
    -webkit-box-flex: initial;
    -webkit-flex: initial;
    -moz-box-flex: initial;
    -moz-flex: initial;
    -ms-flex: initial;
    flex: initial;
    width: auto;
  }

  .x-col.x-col-center {
    -webkit-align-self: center;
    -moz-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
  }

  .x-col {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: block;
    padding: 5px;
    width: 100%;
  }

  /*搜索请求框*/
  .loading-content .el-icon-loading {
    color: #fff;
  }

  /*定位坐标*/
  .x-row .first-x input {
    border-right: 0;
  }

  .two-y .el-input__inner {
    border-left-color: #eee;
  }

  .search-xy {
    position: absolute;
    left: 340px;
    top: 0;
    background-color: #fff;
    padding: 15px;
  }

  .search-xy .input-control {
    display: inline-block;
    width: 120px;
    padding: 5px;
  }

  .search-xy .el-button {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-left: 10px;
    margin-right: 25px;
  }

  .search-xy .close-btn {
    position: absolute;
    right: 4px;
    top: 3px;
    padding: 5px;
    font-size: 16px;
  }

  .el-upload__tip {
    color: #999;
  }

  .upAfter {
    padding: 0 18px 10px 15px;
  }

  .inputRow {
    padding: 5px 15px;
  }

  .inputRow .el-input {
    width: 280px;
    border: 1px solid #ddd;
  }

  .inputRow .el-input .el-input__inner {
    height: 32px;
    padding: 0 25px 0 10px;
    font-size: 13px;
  }

  .inputRow .label-span {
    width: 45px;
    display: inline-block;
  }

  .inputRow .el-input .el-input__suffix {
    top: 0;
    right: 0;
    width: 30px;
  }

  .sewerage-container .el-icon-close {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 5px;
    font-size: 15px;
  }

  .uploadDiv .el-upload-list {
    max-height: 500px;
    overflow-y: auto;
  }

  /**
  *管网抽查
   */

  .pull-left {
    float: left;
  }

  .pipe-check {
    position: absolute;
    right: 10px;
    top: 10px;
    margin: auto;
    min-height: 380px;
    width: 300px;
    z-index: 1;
    display: inline-block;
    background-color: #fff;
    border: 1px solid #eee;
  }

  .pipe-check .close-Btn {
    position: absolute;
    top: 0;
    left: -48px;
    background-color: #409eff;
    padding: 7px 12px;
    font-size: 12px;
    text-align: center;
    color: #fff;
  }

  .pipe-check .check-close-btn {
    padding: 0;
    background-color: transparent;
    border: 0;
    float: right;
  }

  .el-header .addPointBtn {
    padding: 8px;
  }

  .pipe-check-home.el-container {
    height: 100%;
  }

  .pipe-check .check-close-btn .el-icon-close {
    color: #409eff;
    font-size: 20px;
  }

  .pipe-check-home .el-collapse-item {
    border: 1px solid #ebeef5;
    margin-bottom: 8px;
    padding: 0 5px;
  }

  .pipe-check-home .el-header {
    padding: 5px 10px 0;
  }

  .pipe-check-home .el-collapse-item .el-collapse-item__header {
    border: 0;
    text-align: center;
    font-size: 13px;
    line-height: 40px;
    height: 40px;
  }

  .pipe-check-home .el-collapse-item .el-collapse-item__arrow {
    line-height: 40px;
  }

  .pipe-check-home .el-collapse-item .el-collapse-item__content {
    padding-bottom: 0;
  }

  .pipe-check-home .el-collapse-item__wrap {
    border: 0;
  }

  .creat-check-work.x-row {
    padding: 0 0 5px 0;
  }

  .creat-check-work .el-button {
    padding: 7px 8px;
  }

  .creat-check-work .el-input input {
    height: 32px;
  }

  .pipe-check-home .el-collapse {
    padding: 5px 10px;
    border: 0;
  }

  .tree-li-label {
    color: #409eff;
    display: inline-block;
  }

  .search-street {
    margin-top: 5px;
  }

  .search-street input {
    background-color: #f5f5f5;
    border-color: #F5F5F5;
    color: #555;
    height: 38px;
  }

  .popup-top {
    height: 40px;
    line-height: 40px;
    background-color: #409eff;
    color: #fff;
    padding: 6px 10px;
  }

  .popup-top h6 {
    font-weight: 500;
    margin: 0;
  }

  .popup-top h6:first-child {
    margin-bottom: 5px;
  }

  .popup-input-content {
    padding: 8px;
    background-color: #eee;
    padding-bottom: 50px;
  }

  .popup-input-content .form-control {
    font-size: 12px;
  }

  .pipe-check-home .el-footer, .polygon-search-container .el-footer {
    height: 36px;
    margin: 0;
    padding: 5px 0;
  }

  .pipe-check-home .el-main, .polygon-search-container .el-main {
    padding: 0;
  }

  .pipe-check-add .el-header {
    color: #fff;
    background-color: #409eff;
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    position: relative;
  }

  .back-btn {
    position: absolute;
    left: 10px;
    top: 13px;
    font-size: 20px;
  }

  .pipe-check-add .x-col-label {
    width: 70px;
    text-align: right;
    font-size: 13px;
    margin-right: 3px;
  }

  .pipe-check-add .el-main {
    padding: 5px;
  }

  .pipe-check-add .btn-group .el-button {
    padding: 10px;
    width: 100%;
    font-size: 13px;
  }

  .pipe-check-add .check-pipe-btn {
    width: 96%;
    margin: 0 auto;
    margin-top: 5px;
  }

  .pipe-check-add .el-main .x-row {
    padding: 0 5px;
    font-size: 13px;
  }

  .btn-YorN-group {
    padding: 0 10px !important;
  }

  .btn-YorN-group .el-button {
    width: 100%;
  }

  .pipe-check .el-button.is-round.isPipActive {
    background-color: rgba(64, 158, 255, 0.15);
    color: #409eff;
  }

  .pipe-check .el-button.is-round {
    padding: 10px 0;
  }

  .clip-img-container img {
    width: 100%;
    height: 110px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .msg-pipe-check {
    padding: 0 10px;
    margin-top: 5px;
  }

  .msg-pipe-check .el-table .cell {
    padding: 0 5px;
    text-align: center;
    font-size: 12px;
  }

  .msg-pipe-check .el-button--mini, .msg-pipe-check .el-button--small {
    padding: 0 6px;
  }

  .msg-pipe-check .el-table td, .el-table th {
    padding: 7px 0;
  }

  .select-district .el-icon-arrow-down {
    float: right;
    margin-top: 3px;
    margin-right: 2px;
  }

  .select-district .el-dropdown {
    width: 100%;
    border: 1px solid #409eff;
    padding: 7px 5px;
  }

  .select-district .el-popper[x-placement^=bottom] {
    margin-top: 5px;
  }

  .select-district .el-dropdown-selfdefine {
    zoom: 1;
    width: 100%;
    display: block;
  }

  .select-district .el-dropdown-selfdefine:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
  }

  .district-dropdown.el-dropdown-menu {
    top: 190px !important;
    width: 196px !important;
  }

  /*基础功能点选*/
  .esri-popup__content::-webkit-scrollbar-thumb {
    background-color: #409eff;
  }

  .esri-view-width-xlarge .esri-popup__main-container {
    width: 250px;
  }

  .esri-popup__button.esri-popup__button--dock {
    display: none;
  }

  .esri-popup__feature-buttons {
    position: absolute;
    bottom: 5px;
    left: auto;
    width: 100%;
  }

  [class*="esri-popup--aligned-bottom-"] .esri-popup__feature-buttons {
    border-bottom: 0;
  }

  .popup-title {
    background-color: #409eff;
    color: #fff;
    padding: 5px 0;
  }

  .esri-popup__button {
    background-color: #409eff;
    height: 40px;
    color: #fff;
  }

  .esri-popup__header-buttons {
    padding: 0;
  }

  h2.esri-popup__header-title {
    padding: 0;
    margin-right: -30px;
  }

  .popup-content .x-col-fixed {
    color: #999;
    width: 100px;
    text-align: right;
    padding-right: 15px;
    font-size: 12px;
  }

  .popup-content .x-row {
    padding: 0;
  }

  .esri-popup__content {
    margin: 0;
  }

  /*线、多边形数据展示*/
  .data-container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 300px;
    min-height: 450px;
    max-height: 750px;
    display: inline-block;
    border: 1px solid #eee;
    background-color: #fff;
  }

  .map-search-container .el-header {
    padding: 10px;
    background-color: #409eff;
    color: #fff;
  }

  .map-search-container .el-main {
    padding: 0 10px;
    min-height: 370px;
  }

  .layer-li {
    border: 1px solid #ddd;
    padding: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 7px 0;
  }

  .map-search-container .el-icon-close {
    float: right;
    font-size: 20px;
  }

  span.feature-count {
    float: right;
    padding: 0px 8px;
    background-color: #409eff;
    color: #fff;
    border-radius: 30px;
    font-size: 12px;
  }

  .map-search-container .el-header .el-icon-close {
    padding: 1px 5px;
  }

  .detail-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-height: 650px;
    z-index: 10;
    background-color: #fff;
  }

  .detail-back-btn {
    float: left;
    font-size: 20px;
  }

  .detail-content .primary-id {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    color: #409eff;
    font-weight: bold;
    font-size: 12px;
  }

  .detail-content .primary-id:hover {
    cursor: pointer;
  }

  .detail-content .detail-li {
    padding: 0;
  }

  .detail-content .layer-li:hover {
    background-color: rgba(64, 158, 255, 0.1);
  }

  .detail-content .layer-li:active {
    background-color: rgba(64, 158, 255, 0.4);
    color: rgb(64, 158, 255);
  }

  .detail-li .x-row {
    padding: 0;
    font-size: 12px;
    color: #222;
  }

  .detail-li .x-row .x-col-fixed {
    color: #999;
    width: 90px;
  }

  .detail-content .el-footer {
    -webkit-box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.15);
    margin: 0 !important;
    padding: 5px 0;
  }

  /*点选*/
  .point-content {
    max-height: 700px !important;
  }

  .point-content .el-header {
    background-color: #1d9dff;
    padding: 0;
  }

  .top-header-select {
    color: #fff;
  }

  .el-header .el-icon-close {
    padding: 5px;
    font-size: 18px;
    color: #fff;
  }

  .point-content .el-header .header-layer-main {
    padding: 0 0 10px 0;
  }

  .point-content .layer-view {
    padding: 0 10px;
    min-height: 200px;
  }

  .layer-view .el-dropdown {
    font-size: 15px;
    width: 100%;
    background-color: #fff;
    padding: 5px 10px;
    margin-top: 2px;
  }

  .select-layer.el-dropdown-menu {
    top: 177px !important;
    left: 1624px !important;
    width: 275px;
  }

  .layer-view .el-dropdown .el-icon-caret-bottom {
    float: right;
  }

  .layer-view .el-dropdown i {
    font-size: 18px;
    margin-top: 2px;
  }

  .layer-view .el-collapse {
    border: 0;
  }

  .layer-view .el-collapse .el-collapse-item {
    margin-top: 6px;
  }

  .header-layer-main .loading-data {
    color: #fff;
    padding: 5px;
  }

  .loading-data {
    padding: 10px 0;
  }

  .header-layer-main .el-collapse-item__header {
    color: #fff;
    border: 0;
    background-color: #0089f3;
    height: 35px;
    padding: 0 10px;
    line-height: 35px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  .header-layer-main .el-collapse-item__header.is-active {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    color: #ddd;
    background-color: #0979d0;
  }

  .header-layer-main .el-collapse-item__arrow {
    margin: 8px 0 0 0;
    line-height: 20px;
  }

  .header-layer-main .el-collapse-item__content {
    background-color: rgba(166, 215, 255, 0.5);
    color: #295d85;
    padding: 5px 5px 5px 25px;
  }

  .header-layer-main .el-collapse-item__content:hover {
    background-color: rgba(166, 215, 255, 0.95);
  }

  .header-layer-main .el-collapse-item__wrap {
    border-bottom: 0;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  .point-attr {
    padding: 0;
  }

  .point-attr .el-main {
    padding: 0;
    max-height: 490px;
    background-color: #fff;
  }

  .point-attr .el-header {
    background-color: #e7f4fd;
    color: #295d85;
  }

  .point-content .el-collapse-item:last-child {
    margin-bottom: 0;
  }


</style>
