<template>
  <el-dialog
    append-to-body
    title="选择位置"
    :visible.sync="dialogFormVisible"
  >
    <el-row>
      <el-col :span="24" class="overview-map-container">
        <a-map-container
          v-if="dialogFormVisible"
          ref="map"
          :center="center"
          :zoom="zoom"
          :base-layer="baseLayer"
          style="height: 300px"
          vid="choose-position"
          class="map-demo"
          @ready="mapReady"
        />
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="5">
        <el-input
          v-model.trim="positionForm.longitude"
          type="text"
          placeholder="经度"
          disabled
        />
      </el-col>
      <el-col :span="5">
        <el-input
          v-model.trim="positionForm.latitude"
          type="text"
          placeholder="纬度"
          disabled
        />
      </el-col>
      <el-col :span="14">
        <el-input
          v-model.trim="positionForm.position"
          type="text"
          placeholder="详细地址"
          disabled
        />
      </el-col>
    </el-row>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button type="primary" @click="saveData">
        确定
      </el-button>
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import AMapContainer from '@/components/Amap/AMapContainer'
import { toSize, reverseLnglat } from '@/components/Amap/utils/convert-helper'
export default {
  name: 'DetailMapLonLat',
  components: { AMapContainer },
  props: {
    position: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 图标
      searchResultSize: [24, 30],
      marker: null,
      locationMarker: '',
      positionForm: {
        longitude: '', // 经度
        latitude: '', // 纬度
        qu: '', // 区编码
        area: '', // 街道编码
        position: '' // 详细地址
      },
      map: null, // 地图对象
      baseLayer: 'gaode_vec', // 底图图层
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      zoom: 12,
      dialogFormVisible: false // 对话框是否显示
    }
  },
  computed: {
    ...mapGetters([
      'bodyHeight'
    ])
  },
  methods: {
    // 初始化放这里
    mapReady(map) {
      this.map = map
      const { searchResultIcon, searchResultSize } = this
      this.center = this.position ? this.position : [this.$store.getters.lng, this.$store.getters.lat]
      if (this.center) {
        this.positionForm.longitude = this.center[0]
        this.positionForm.latitude = this.center[1]
        reverseLnglat(this.center).then(res => {
          this.positionForm.position = res.formattedAddress
          this.positionForm.qu = res.addressComponent.adcode
        })
      }
      const icon = new window.AMap.Icon({
        size: toSize(searchResultSize), // 图标尺寸
        image: searchResultIcon, // Icon的图像
        imageSize: toSize(searchResultSize) // 根据所设置的大小拉伸或压缩图片
      })
      this.locationMarker = new window.AMap.Marker({
        icon: icon,
        position: this.position ? this.position : [this.$store.getters.lng, this.$store.getters.lat],
        draggable: true,
        cursor: 'move'
      })
      this.locationMarker.setMap(this.map)
      this.locationMarker.on('dragend', e => {
        this.positionForm.longitude = e.lnglat.lng
        this.positionForm.latitude = e.lnglat.lat
        this.reverse([e.lnglat.lng, e.lnglat.lat])
      })
    },
    // 转换地址
    reverse(lnglat) {
      reverseLnglat(lnglat).then(res => {
        this.positionForm.position = res.formattedAddress
        this.positionForm.qu = res.addressComponent.adcode // 获取区
        // TODO:目前缺根据区和街道名称获取街道号接口
      })
    },
    initDialog() {
      this.dialogFormVisible = true
    },
    saveData() {
      this.$emit('getLonLat', this.positionForm)
      this.dialogFormVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.overview-map-container{
  width: 100%;
  margin-bottom: 10px;
}
</style>