<template>
  <el-dialog title="选择坐标" width="1400px" :model-value="modelValue" @close="closed">
    <div class="flex align-center ww100">
      <el-input style="width: 48%;" v-model="listQuery.jd" placeholder="请选择经度" />
      <el-input style="width: 48%;" v-model="listQuery.wd" placeholder="请选择纬度" />
      <el-button type="primary" @click="changePoint">选择点位</el-button>
    </div>
    <div class="mapBox relative">
      <GdMap mapid="mapId" v-if="mapShow"></GdMap>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import GdMap from "@/components/GdMap/index.vue";
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  tabOption: {
    type: Array,
    require: []
  },
  data: {
    type: Array,
    required: []
  },
  myId: {
    type: String,
    require: ""
  },
  title: {
    type: String,
    require: ""
  }
});
const mapShow = ref(false)
const listQuery = ref({})
const emits = defineEmits(["update:modelValue"]);
const closed = () => {
  emits("update:modelValue", false);
};
// 获取数据
onMounted(() => {
  setTimeout(() => {
    mapShow.value = true
  }, 100);
  emitter.on("coordString", (res => {
    if (res.type == 'point') {
      listQuery.value.jd = res.coord[0];
      listQuery.value.wd = res.coord[1];
      let icon = require('@/assets/point/zsd1.png');
      emitter.emit("showPoint", { coords: [{ jd: res.coord[0], wd: res.coord[1] }], icon, flag: 'bxd' });
    }
  }))
})
const { proxy } = getCurrentInstance();
// 选择点位
const changePoint = () => {
  listQuery.value.jd = ''
  listQuery.value.wd = ''
  emitter.emit("removePlot", 'point');
  emitter.emit("deletePointArea", 'bxd');
  emitter.emit("drawShape", { type: 'point', flag: 'point' });
}
function submit() {
  emits("submitFn", listQuery.value)
  closed()
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/layout.scss";

.mapBox {
  width: 100%;
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
}
</style>