<template>
  <div class="amap-page">
    <!-- 铺开时 -->
    <template v-if="showEffect === 'tile'">
      <ht-input
        v-model="inputVal"
        :permission="permission_sub"
        :name="name"
        :data-vv-as="name"
        :title="inputVal"
        :display-style="displayStyle"
        :clearable="false"
      >
        <i
          v-if="inputWriteable"
          slot="prefix"
          class="el-input__icon"
          title="地图选点"
        >
          <ht-icon name="map" />
        </i>
        <i
          v-if="inputWriteable && inputVal"
          slot="suffix"
          title="清除地址数据"
          class="el-input__icon"
          @click="clearPosition"
        >
          <ht-icon name="close" />
        </i>
      </ht-input>
      <div class="amap-page_map_container" :style="mapStyle">
        <div v-if="plugin.length > 0">
          <el-amap-search-box
            class="search-box"
            :search-option="searchOption"
            :on-search-result="onSearchResult"
            ref="searchBox"
          ></el-amap-search-box>
          <el-amap
            vid="amap"
            :plugin="plugin"
            :center="mapCenter"
            class="amap-box"
            :zoom="zoom"
            :resize-enable="resizeEnable"
            :events="events"
          >
            <el-amap-marker
              v-for="(marker, $index) in markers"
              :key="$index"
              :position="marker"
            ></el-amap-marker>
          </el-amap>
        </div>
      </div>
    </template>
    <template v-else>
      <ht-input
        v-model="inputVal"
        :permission="permission_sub"
        :name="name"
        :data-vv-as="name"
        :title="inputVal"
        :display-style="displayStyle"
        :clearable="false"
      >
        <i
          v-if="inputWriteable"
          slot="prefix"
          class="el-input__icon"
          title="地图选点"
          @click="openMapDia"
        >
          <ht-icon name="map" />
        </i>
        <template slot="append">
          <ht-icon name="gaode" class="amap-page_map" @click="openMapDia" />
        </template>
        <i
          v-if="inputWriteable && inputVal"
          slot="suffix"
          title="清除地址数据"
          class="el-input__icon"
          @click="clearPosition"
        >
          <ht-icon name="close" />
        </i>
      </ht-input>

      <!-- 地图弹框 -->
      <div v-show="mapDiaVisible" class="amap-page_dialog">
        <div class="amap-page_dialog_container">
          <div v-if="plugin.length > 0">
            <el-amap-search-box
              class="search-box"
              :search-option="searchOption"
              :on-search-result="onSearchResult"
            ></el-amap-search-box>
            <el-amap
              vid="amap"
              :plugin="plugin"
              :center="mapCenter"
              class="amap-demo"
              :zoom="zoom"
              :resize-enable="resizeEnable"
              :events="events"
            >
              <el-amap-marker
                v-for="(marker, $index) in markers"
                :key="$index"
                :position="marker"
              ></el-amap-marker>
            </el-amap>
          </div>
        </div>
        <div class="amap-page_dialog_text">
          <div>{{ preAddress }}</div>
          <div v-if="prePosition.length">
            经度：{{ prePosition[0] }}，纬度：{{ prePosition[1] }}
          </div>
        </div>
        <div class="amap-page_dialog_footer">
          <el-button type="primary" @click="confirmAddress">确定</el-button>
          <el-button @click="mapDiaVisible = false">取消</el-button>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
  import map from '@/mixins/map.js'

  export default {
    name: 'MapPc',
    mixins: [map],
  }
</script>
<style lang="scss">
  .el-vue-search-box-container .search-tips {
    position: absolute;
    top: 100%;
    height: 280px;
    border: 0 !important;
    background: #fff;
    overflow: auto;
  }
  .amap-page {
    width: 100%;
    .amap-page_map {
      cursor: pointer;
    }
    .amap-page_content {
      border: 1px solid #ddd;
      border-radius: 5px;
      padding: 10px;
      margin-bottom: 5px;
      .amap-page_text {
        line-height: 20px;
      }
    }
    .amap-page_btn {
      width: 100%;
    }
    .amap-page_dialog {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      background: #fff;
      z-index: 10001;
      .amap-page_dialog_container {
        width: 100%;
        flex: 1;
        position: relative;
        > div {
          height: 100%;
          width: 100%;
        }
        .search-box {
          position: absolute !important;
          width: 90%;
          top: 10px;
          left: 5%;
        }
      }
      .amap-page_dialog_text {
        padding: 10px;
        font-size: 14px;
        color: #606266;
        margin-top: 5px;
        line-height: 20px;
      }
      .amap-page_dialog_footer {
        text-align: center;
        padding: 20px;
        border-top: 1px solid #ddd;
      }
    }
    .amap-page_map_container {
      position: relative;
      > div {
        width: 100%;
        height: 100%;
        .search-box {
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
      .amap-logo,
      .amap-copyright {
        z-index: 9;
      }
      .amap-geolocation-con {
        z-index: 9 !important;
      }
    }
  }
</style>
