<template>
  <el-dialog :title="true ? '编辑' : '新增'" v-model="visible" width="1000px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
    <div class="dialog-container">
      <el-form :rules="rules" ref="ruleFormRef" :model="ruleForm" label-width="auto" class="demo-ruleForm">
        <el-form-item label="辖区名称" prop="name">
          <el-input v-model="ruleForm.name" type="text" autocomplete="off" placeholder="请输入辖区名称" />
        </el-form-item>
        <el-form-item label="围栏" prop="location">
          <div id="mapcontainer">
            <div class="shape">
              <el-popover placement="top-start" width="200" trigger="hover">
                <template #default>
                  <div style="color: red">清除地图上绘制的围栏</div>
                </template>
                <template #reference>
                  <div @click="clearMap">
                    <svg
                      t="1715926362651"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="5520"
                      width="25"
                      height="25"
                    >
                      <path
                        d="M229.12 475.52l687.296 183.872-1.408 1.472-1.024 12.864c-2.56 34.048-6.4 62.976-17.92 139.52l-6.528 43.648c-3.84 26.048-6.528 46.976-8.768 66.304-4.224 36.544-23.488 65.28-54.656 81.6-15.424 8.128-32 12.672-45.824 13.44l-4.032 0.192-90.432-24.32a18.88 18.88 0 0 1-12.16-26.688l35.392-71.552-20.352 26.24a515.328 515.328 0 0 1-47.36 50.56 19.008 19.008 0 0 1-18.112 4.672l-75.456-20.16a18.88 18.88 0 0 1-12.16-26.624l35.456-71.552-20.352 26.24a510.336 510.336 0 0 1-47.36 50.56 18.944 18.944 0 0 1-18.112 4.672l-88.448-23.68a18.944 18.944 0 0 1-12.096-26.56l35.392-71.552-20.352 26.24a515.84 515.84 0 0 1-47.36 50.56 18.944 18.944 0 0 1-18.112 4.672l-62.528-16.704a18.944 18.944 0 0 1-12.096-26.688l35.392-71.488-20.352 26.24c-8.32 10.688-20.48 24-36.48 39.936a44.736 44.736 0 0 1-43.136 11.52l-78.08-20.864-23.104-8.704c-29.632-25.536-44.608-61.44-39.36-95.552 5.76-37.12 32.32-67.648 82.112-88.704 34.368-14.656 67.584-74.176 89.664-157.44l3.84-14.464-1.024-1.792z m-42.88-76.16a60.224 60.224 0 0 1 5.056-6.4l123.776-135.424c9.92-10.752 24.832-19.392 41.856-23.936 16.64-4.416 33.984-4.672 48.64-0.768l123.584 33.024 4.096-2.368 55.36-205.824c8.704-32.448 43.968-51.456 78.72-42.24l83.2 22.272c34.752 9.28 55.808 43.392 47.104 75.84l-55.36 205.824 2.368 4.096 118.528 31.68c14.592 3.84 29.568 12.8 41.728 24.96 12.416 12.352 21.12 27.2 24.192 41.472l39.36 179.072a58.688 58.688 0 0 1 1.28 9.856c-0.704 6.592-5.312 10.304-13.696 11.2L194.944 418.048c-10.432-2.944-13.376-9.216-8.768-18.752z"
                        fill="#5B9CF8"
                        p-id="5521"
                      ></path>
                    </svg>
                  </div>
                </template>
              </el-popover>
              <el-popover placement="top-start" width="200" trigger="hover">
                <template #default>
                  <div style="color: red">1.点击图标, 进入绘制状态<br />2.在地图上多次移动并点击<br />3.双击地图结束, 完成围栏绘制</div>
                </template>
                <template #reference>
                  <div @click="draw">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 34.295 30">
                      <g id="组_608" data-name="组 608" transform="translate(-1304 -128.546)">
                        <path
                          id="路径_489"
                          data-name="路径 489"
                          d="M9578.717-2601.595l-7.533-10.334,10.141-10.334,14.391,8.982-5.986,9.658Z"
                          transform="translate(-8262.102 2755.512)"
                          fill="#0091ff"
                        />
                        <path
                          id="路径_490"
                          data-name="路径 490"
                          d="M9580.671-2596.235l-9.486-13.014,12.771-13.014,18.123,11.312-7.54,12.162Z"
                          transform="translate(-8265.283 2752.833)"
                          fill="none"
                          stroke="#0091ff"
                          stroke-linejoin="round"
                          stroke-width="1"
                          stroke-dasharray="2 2"
                        />
                        <circle id="椭圆_31" data-name="椭圆 31" cx="1.5" cy="1.5" r="1.5" transform="translate(1317 128.546)" fill="#0091ff" />
                        <circle id="椭圆_36" data-name="椭圆 36" cx="1.5" cy="1.5" r="1.5" transform="translate(1314 155.546)" fill="#0091ff" />
                        <circle id="椭圆_80" data-name="椭圆 80" cx="1.5" cy="1.5" r="1.5" transform="translate(1328 152.546)" fill="#0091ff" />
                        <circle id="椭圆_81" data-name="椭圆 81" cx="1.5" cy="1.5" r="1.5" transform="translate(1335.295 141.046)" fill="#0091ff" />
                        <circle id="椭圆_35" data-name="椭圆 35" cx="1.5" cy="1.5" r="1.5" transform="translate(1304 142.546)" fill="#0091ff" />
                      </g>
                    </svg>
                  </div>
                </template>
              </el-popover>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleBtn(ruleFormRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts" name="addFence">
import { ref, reactive, onMounted, nextTick } from "vue";
import { MapCustom } from "@/utils/mapCustom";
import type { FormRules, FormInstance } from "element-plus";
import { useCommonStore } from "@/store/common";

const comm = useCommonStore();
const { update, rowData } = defineProps({
  update: {
    type: Function,
    required: true,
  },
  rowData: {
    type: Object,
    dfault: () => ({}),
  },
});

const visible = ref(true);
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive(
  rowData.id
    ? { ...rowData }
    : {
        name: "",
        rails: "",
        parentId: comm.user.orgId,
      }
);
let mapInfo: any = null;

const emit = defineEmits(["closeDialog", "handleBtn"]);

const validatePass = (_: any, _1: any, callback: any) => {
  if (ruleForm.rails == "") {
    callback(new Error("请绘制围栏"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules<typeof ruleForm>>({
  name: [{ required: true, message: "请输入辖区名称" }],
  rails: [
    { required: true, message: "请绘制围栏" },
    { validator: validatePass, trigger: "blur" },
  ],
});

onMounted(() => {
  nextTick(() => {
    let center = [116.397428, 39.90923];
    if (rowData.rails && rowData.rails.length) {
      center = [rowData.rails[0].lng, rowData.rails[0].lat];
    }
    try {
      mapInfo = new MapCustom({ dom: "mapcontainer", center, zoom: 16 });
    } catch (error) {}
    mapInfo.polyEditor(ruleForm.rails, (res) => {
      ruleForm.rails = res;
    });
  });
});

const clearMap = () => {
  mapInfo.clearMap();
  ruleForm.rails = [];
};
const draw = () => {
  mapInfo.draw().then((res) => {
    ruleForm.rails = res;
  });
};
const closeDialog = () => {
  emit("closeDialog");
};
const handleBtn = (formEl?: FormInstance | undefined) => {
  if (formEl) {
    formEl.validate((valid) => {
      if (valid) {
        update(ruleForm);
      }
    });
  }
};
</script>

<style scoped>
#mapcontainer {
  width: 100%;
  height: 500px;
  position: relative;
  background: #eee;
}
.shape {
  width: 100px;
  height: 42px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  justify-content: space-around;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  cursor: pointer;
}
.el-tooltip__trigger {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.el-tooltip__trigger:active {
  background: #eee;
}

/* 隐藏掉高德logo */
:deep(.amap-logo) {
  display: none;
  opacity: 0 !important;
}
:deep(.amap-copyright) {
  opacity: 0;
}
</style>
