<template>
  <el-dialog
    append-to-body
    title="选择位置"
    :visible.sync="dialogFormVisible"
  >
    <el-row>
      <el-col class="overview-map-container">
        <a-map-container
          ref="map"
          :center="center"
          :zoom="zoom"
          :base-layer="baseLayer"
          :style="{height:(bodyHeight-400)+'px'}"
          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="postionForm.longitude"
          type="text"
          placeholder="经度"
          disabled
        />
      </el-col>
      <el-col :span="5">
        <el-input
          v-model.trim="postionForm.latitude"
          type="text"
          placeholder="纬度"
          disabled
        />
      </el-col>
      <el-col :span="14">
        <el-input
          v-model.trim="postionForm.postion"
          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 AMapLoader from '@amap/amap-jsapi-loader'
import { toSize } from '@/components/Amap/utils/convert-helper'
export default {
  name: 'DetailMapLonLat',
  components: { AMapContainer },
  data() {
    return {
      searchResultIcon: require('@/assets/overview/pure-position-icon.png'), // 报警图标
      searchResultSize: [24, 30],
      marker: null,
      locationMarker: '',
      postionlatlon: '',
      postionForm: {
        longitude: '', // 经度
        latitude: '', // 纬度
        postion: '' // 详细地址
      },
      map: null, // 地图对象
      baseLayer: 'gaode_vec', // 底图图层
      center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
      zoom: 12,
      dialogFormVisible: false // 对话框是否显示
    }
  },
  computed: {
    ...mapGetters([
      'bodyHeight'
    ])
  },
  watch: {
    postionlatlon(val) {
      var _this = this
      window._AMapSecurityConfig = {
        securityJsCode: this.$store.getters.amapSecurityCode
      }
      AMapLoader.load({
        key: this.$store.getters.amapKey // 秘钥，从store中取
      }).then((AMap) => {
        AMap.plugin('AMap.Geocoder', function() {
          var geocoder = new AMap.Geocoder({
            city: ''
          })
          var lnglat = val.split(',')
          geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              _this.postionForm.postion = result.regeocode.formattedAddress
            }
          })
        })
      })
    }
  },
  methods: {
    // 初始化放这里
    mapReady(map) {
      this.map = map
      const { searchResultIcon, searchResultSize } = this
      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.$store.getters.lng, this.$store.getters.lat],
        draggable: true,
        cursor: 'move'
      })
      this.locationMarker.setMap(this.map)
      this.locationMarker.on('dragend', e => {
        this.postionForm.longitude = e.lnglat.lng
        this.postionForm.latitude = e.lnglat.lat
        this.postionlatlon = e.lnglat.lng + ',' + e.lnglat.lat
      })

      // map.on('click', function(e) {
      //   _this.postionForm.longitude = e.lnglat.lng
      //   _this.postionForm.latitude = e.lnglat.lat
      //   _this.postionlatlon = e.lnglat.lng + ',' + e.lnglat.lat

      //   var addressArr = _this.postionlatlon.split(',')
      //   _this.marker = new window.AMap.Marker()
      //   map.add(_this.marker)
      //   _this.marker.setPosition(addressArr)
      // })
    },
    initDialog(val) {
      this.dialogFormVisible = val
    },
    saveData() {
      this.$emit('getLonLat', this.postionlatlon)
      this.dialogFormVisible = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.overview-map-container{
  width: 100%;
  margin-bottom: 10px;
}
</style>