<template>
  <el-dialog :model-value="modelValue" :title="title" width="60%" @close="closeDialog" destroy-on-close append-to-body
    :close-on-click-modal="false">
    <div style="width: 100%;height: 650px;">
      <FormMessage v-model="listQuery" :formList="formData" ref="elform" :rules="rules">
      </FormMessage>
      <div style="display: flex;justify-content: flex-end;">
        <el-button type="primary" style="margin-left: 10px;" @click="drawShape()">选择坐标</el-button>
      </div>
      <div style="height: 300px;width: 96%; position: absolute;">
        <GdMap :mapid="'map-92'" v-if="showMap"></GdMap>
      </div>

    </div>
    <template #footer>
      <div class="flex just-center">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>


</template>
<script setup>
import GdMap from "@/components/GdMap/index.vue";
import FormMessage from "@/components/aboutTable/FormMessage.vue";
import { ref, reactive, onMounted, watch, onUnmounted, getCurrentInstance } from 'vue'
import emitter from "@/utils/eventBus.js";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
const { proxy } = getCurrentInstance()
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  dict: {
    type: Object,
    default: () => ({})
  },
  zbData: {
    type: Object,
    default: () => ({})
  }
});
const listQuery = ref({})
const elform = ref()
const emit = defineEmits(["update:modelValue",]);
const title = ref("新增重点事件");
const formData = ref([]);
const rules = reactive({
  sjbt: [{ required: true, message: "请输入事件标题", trigger: "blur" }],
  shms: [{ required: true, message: "请输入事件描述", trigger: "blur" }],
  jd: [{ required: true, message: "请输入经度", trigger: "blur" }],
  wd: [{ required: true, message: "请输入纬度", trigger: "blur" }],
});
const showMap = ref(false)
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    formData.value = [
      { label: "事件标题", prop: "sjbt", type: "input" },
      // { label: "事件描述", prop: "shms", type: "input" },
      { label: "事件性质", prop: "sjxz", type: "input" },
      { label: "事件地址", prop: "sjdz", type: "input" },

      // { label: "事件状态", prop: "sjzt", type: "select", options: props.dict.D_BZ_ZDSJCZJG },
      { label: "事发时间", prop: "fssj", type: "datetime" },
      { label: "事件描述", prop: "shms", type: "textarea", width: "100%" },
      { label: "处置结果", prop: "czjg", type: "textarea", width: "100%" },
      { label: "经度", prop: "jd", type: "input", disabled: true },
      { label: "纬度", prop: "wd", type: "input", disabled: true },
    ]
    setTimeout(() => {
      showMap.value = true
    }, 1000);
  }
})
const drawShape = () => {
  emitter.emit("drawShape", {
    flag: "zdsj",
    type: "point",
    isclear: true
  });
}
watch(() => props.zbData, (newVal) => {
  if (newVal) {
    listQuery.value.jd = newVal[0]
    listQuery.value.wd = newVal[1]
  }
}, { deep: true })
const closeDialog = () => {
  showMap.value = false
  elform.value.reset()
  // 关闭对话框时移除事件监听器
  emit("update:modelValue", false);
};

const submitForm = () => {
  elform.value.submit((val) => {
    qcckPost({ ...listQuery.value }, '/mosty-gsxt/zdsj/addEntity').then(res => {
      console.log(res);
      proxy.$message.success("新增成功");
      emit("update:modelValue", false);
    })
  })
};
</script>
<style lang="scss" scoped></style>
