<!--
 * @Author: 曹捷
 * @Date: 2022-01-07 11:03:31
 * @LastEditors: 曹捷
 * @LastEditTime: 2022-03-11 17:02:36
 * @Description: 选择地址
-->
<template>
  <a-modal :title="title" v-if="showModal" v-model:visible="showModal" :footer="null" @cancel="closeDialog" class="mapModal" width="1080px">
    <div class="mapContainer">
      <div ref="mapContainer" class="map-info"></div>
      <div class="map-searh" id="searchPanel">
        <input id="tipinput" class="search-input" autocomplete="off" placeholder="输入关键字搜索" />
      </div>
    </div>
    <div class="ant-modal-footer">
      <span class="p-r-10" v-if="markInfo.address">
        <span class="p-r-10">当前选择：{{markInfo.address}} </span>
      </span>
      <a-button key="back" @click="closeDialog">取消</a-button>
      <a-button key="submit" type="primary" @click="saveMap">确认</a-button>
    </div>
  </a-modal>
</template>

<script>
import { reactive, toRefs, onMounted, nextTick, getCurrentInstance } from 'vue'
import MapService from './map'
export default {
  props: {
    open: {
      type: Boolean
    },
    title: {
      type: String,
      default: '选择地址'
    },
  },
  setup (props, context) {
    let mapService
    let { proxy } = getCurrentInstance()
    let _data = reactive({
      showModal: props.open,
      mapContainer: null,
      searchValue: undefined,
      searchList: [],
      markInfo: {}
    })
    let _methods = {
      initInfo () {
        mapService = new MapService(_data.mapContainer, { clickMarker: true, searchMarker: true })
        mapService.onLoad = _methods.initMap
        mapService.onMarkChange = _methods.markChange
      },
      initMap () {
        mapService.addSearchPlug('tipinput')
      },
      markChange (mark) {
        console.log('🚀 ~ file: obit-map-search.vue ~ line 58 ~ markChange ~ mark', mark)
        let info = mark[0]._originOpts
        _data.markInfo = {
          lng: info.position.lng,
          lat: info.position.lat,
        }
        mapService.getAddress([info.position.lng, info.position.lat]).then(res => {
          let addressCode = res.addressComponent.adcode
          _data.markInfo.address = res.formattedAddress
          _data.markInfo.provinceCode = addressCode.substring(0, 2) + '0000'
          _data.markInfo.cityCode = addressCode.substring(0, 4) + '00'
          _data.markInfo.districtCode = addressCode
          // _data.markInfo.province = res.formattedAddress
        })
      },
      closeDialog () {
        context.emit('update:open', false)
      },
      saveMap () {
        if (_data.markInfo.address) {
          context.emit('success', _data.markInfo)
          _methods.closeDialog()
        } else {
          proxy.$message.error('请选择一个地址')
        }
      }
    }

    onMounted(() => {
      nextTick(() => {
        _methods.initInfo()
      })

    })
    return {
      ...toRefs(_data),
      ..._methods
    }
  }
}
</script>

<style lang="less">
.mapModal {
  .ant-modal-body {
    padding: 0;
    .mapContainer {
      padding: 20px;
    }
  }
}
.amap-sug-result,
.amap-maps {
  color: #0b131f;
}
.mapContainer {
  width: 100%;
  height: 600px;
  position: relative;
  .map-info {
    width: 100%;
    height: 100%;
  }
  .map-searh {
    position: absolute;
    width: 300px;
    height: 30px;
    background: #fff;
    box-shadow: 0 2px 2px #0000003d;
    border-radius: 2px 3px 3px 2px;
    z-index: 10;
    top: 35px;
    left: 40px;
    .search-input {
      border: none;
      width: 100%;
      height: 30px;
      line-height: 30px;
      color: #000;
      padding-left: 10px;
      outline: none;
    }
    .ant-select {
      color: #000;
      .ant-select-selector {
        background-color: transparent;
        border: none;
      }
    }
  }
}
</style>