<template>
  <el-dialog title="任务" width="80%" :model-value="modelValue" destroy-on-close :close-on-click-modal="false"
    @close="close">
    <el-form ref="elform" :model="listQuery" :rules="rules" :inline="true" label-position="top">
      <el-form-item prop="bxdMc" label="点位名称" style="width: 100%">
        <el-input v-model="listQuery.bxdMc" clearable style="width: 100%" />
      </el-form-item>
      <el-form-item prop="jd" label="选择必巡点" style="width: 100%">
        <div class="latlng">
          <el-input v-model="listQuery.jd" clearable style="width: 45%" placeholder="经度" />
          <el-input v-model="listQuery.wd" clearable style="width: 45%" placeholder="纬度" />
          <el-button @click="chackLat">选取坐标</el-button>
        </div>
      </el-form-item>
      <el-form-item style="width: 100%">
        <div class="map">
          <GdMap v-if="dialogFormVisible" />
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit">保存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import emitter from "@/utils/eventBus.js";
import GdMap from "@/components/Map/GdMap/index.vue";
import { qcckGet, qcckPost, qcckPut } from "@/api/qcckApi.js";
import { ref, reactive, defineProps, defineEmits, onMounted, onUnmounted, watch, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  data: { type: Object, default: {} },
  dic: { type: Object, default: {} },
  formData: {
    type: Object,
    default: {}
  }
});
const emits = defineEmits(["update:modelValue", "submit"]);
const dialogFormVisible = ref(false); //表单禁用
const listQuery = ref({}); //表单
const rules = reactive({
  bxdMc: [{ required: true, message: "请输入点位名称", trigger: "blur" }],
  jd: [{ required: true, message: "请输入经度", trigger: ["blur", 'change'] }],
  wd: [{ required: true, message: "请输入纬度", trigger: ["blur", 'change'] }],
});

onMounted(() => {
  emitter.on("coordString", (res) => {
    if (res.type === "point") {
      listQuery.value.jd = res.coord[0];
      listQuery.value.wd = res.coord[1];
    }
  });
});
watch(() => props.modelValue, (val) => {
  setTimeout(() => {
    dialogFormVisible.value = true;
    showFg()
  }, 500);
},{
    deep: true, immediate: true
});

function showFg() {
  setTimeout(() => {
    const position = [
      [Number(props.data[0].x1), Number(props.data[0].y1)],
      [Number(props.data[0].x2), Number(props.data[0].y2)]
    ];
    const obj = [{ position: position, text: props.data[0].fgmc, id: 1, userData: props.data[0] }];
    emitter.emit("echoPlane", {
      fontColor: "#12fdb8",
      coords: obj,
      type: "rectangle",
      flag: "addfg",
      color: "rgba(2,20,51,0.5)",
      linecolor: "#1C97FF"
    });
    emitter.emit("setMapCenter", { location: [Number(props.data[0].zxX), Number(props.data[0].zxY)], zoomLevel: 12 })
  }, 1000)
}

//获取经纬度
function chackLat() {
  listQuery.value.jd = "";
  listQuery.value.wd = "";
  emitter.emit("drawShape", { type: "point", flag: "dw", isclear: true });
}

// 提交
const submit = () => {
  if (listQuery.value.jd && listQuery.value.wd && listQuery.value.bxdMc) {
    emits("submit", listQuery.value);
    close("新增成功");
  } else {
    proxy.$message({ type: "error", message: "请选择经纬度或者输入点位名称" });
  }
};
// 关闭
const close = () => {
  listQuery.value = {}
  dialogFormVisible.value = false;
  emits("update:modelValue", false);
};
onUnmounted(() => {
  emitter.off("coordString");
});
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.map {
  width: 100%;
  height: 400px;
}

.latlng {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

::v-deep .el-cascader__search-input {
  background: transparent;
}

.depBox {
  width: 100%;
  height: 38px;
  background-color: #062a48;
  border: 1px solid #114260;
  color: #fff;
  padding: 1px;
  box-sizing: border-box;
}

.ipt {
  border: 1px solid rgb(7, 85, 188);
  width: 100%;
  line-height: 32px;
  min-height: 32px;
  border-radius: 4px;
  position: relative;
  background: #001238;
}

.mj::after {
  content: "请选择方格";
  position: absolute;
  top: 0;
  left: 12px;
  color: #c0c4cc;
}
</style>
