<template>
  <div class="mobile-map">
    <van-field
      v-model="inputVal"
      rows="1"
      autosize
      label=""
      readonly
      type="textarea"
      placeholder=""
    >
      <template v-if="inputWriteable" #right-icon>
        <van-icon v-if="inputVal" name="clear" @click="clearPosition" />
        <van-icon
          v-if="showEffect === 'dialog'"
          name="location-o"
          class="map-icon"
          @click="openMapDia"
        />
      </template>
    </van-field>
    <van-action-sheet v-model="showDialog" class="map-action-sheet">
      <div class="top-box">
        <span class="cancel-text" @click="handleCancel">取消</span>
        <h4 class="header-title">地图</h4>
        <span class="confirm-text" @click="confirmAddress">确定</span>
      </div>
      <div
        class="amap-page_dialog_container"
        :style="{ '--mapHeight': heightMap }"
      >
        <div v-if="plugin.length > 0" class="amap-box">
          <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 class="address">{{ preAddress }}</div>
        <div v-if="prePosition.length" class="pre-position">
          经度：{{ prePosition[0] }}，纬度：{{ prePosition[1] }}
        </div>
      </div>
    </van-action-sheet>
    <div
      v-if="showEffect === 'tile'"
      class="amap-page_map_container"
      :style="{ height: heightMap }"
    >
      <template 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>
      </template>
    </div>
  </div>
</template>

<script>
  import map from '@/mixins/map.js'
  export default {
    name: 'MobileMap',
    mixins: [map],
    data() {
      return {
        showDialog: false,
      }
    },
    methods: {
      handleCancel() {
        this.showDialog = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .mobile-map {
    .map-icon {
      color: #409eff;
      font-size: 22px;
    }
    .amap-page_map_container {
      margin-left: -120px;
      ::v-deep {
        .el-vue-search-box-container {
          width: 352px;
        }
        .el-vue-amap-container {
          height: calc(100% - 46px);
          .el-vue-amap .amap-container {
            height: calc(100% - 26px);
          }
        }
      }
    }
    .search-box {
      height: 24px;
      line-height: 24px;
      box-shadow: none;
      background: none;
      margin-bottom: 8px;
      ::v-deep {
        .search-btn {
          color: #409eff;
        }
      }
    }
    .amap-page_dialog_container {
      padding: 8px 16px 16px 16px;
      .amap-box {
        height: calc(var(--mapHeight) - 16px);
      }
      .search-box {
        width: 100%;
        height: 32px;
        line-height: 32px;
        background: #f9f9f9;
        border-radius: 8px;
        ::v-deep {
          .search-box-wrapper {
            input {
              background: #f9f9f9;
            }
          }
        }
      }
    }
    .amap-page_dialog_text {
      margin-top: 30px;
      margin-left: 16px;
      .pre-position,
      .address {
        line-height: 24px;
      }
    }
    ::v-deep {
      .amap-geolocation-con,
      .amap-logo {
        z-index: 99 !important;
      }
      .van-cell {
        padding: 0;
        .van-cell__value--alone,
        .van-field__control {
          text-align: right;
        }
        &::after {
          border-bottom: none;
        }
        .van-field__body {
          min-height: 48px;
          .van-field__right-icon {
            display: flex;
            .van-icon-clear {
              color: #bfbfbf;
            }
          }
        }
      }
    }
    .top-box {
      display: flex;
      justify-content: space-between;
      height: 44px;
      align-items: center;
      padding: 0 16px;
      .cancel-text {
        color: #8c8c8c;
        font-size: 14px;
      }
      .header-title {
        color: #1a1a1a;
        font-size: 17px;
        margin: 0;
      }
      .confirm-text {
        font-size: 14px;
        color: #409eff;
      }
    }
  }
  .map-action-sheet {
    min-height: 40vh;
  }
</style>
