<template>
  <div>
    <div class="titleBox">
      <div class="title">巡逻方块管理</div>
      <div class="btnBox">
        <el-button type="primary" @click="addEdit('add', '')">
          <el-icon style="vertical-align: middle">
            <CirclePlus />
          </el-icon>
          <span style="vertical-align: middle">新增</span>
        </el-button>

        <el-button @click="batchDelete" :disabled="ids.length == 0" typeof="danger">
          <el-icon style="vertical-align: middle">
            <Delete />
          </el-icon>
          <span style="vertical-align: middle">批量删除</span>
        </el-button>
      </div>
    </div>
    <div class="searchBox" ref="searchBox">
      <el-form :model="listQuery" :inline="true">
        <el-form-item label="名称">
          <el-input v-model="listQuery.mc" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleFilter"> 查询 </el-button>
          <el-button @click="reset"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tabBox">
      <el-table :data="tableData" border row-key="id" @selection-change="handleSelectionChange"
        style="width: 100%" :height="tableHeight" :key="keyCount" v-loading="loadingTable"
        element-loading-background="rgba(0,0,0,0.3)" element-loading-text="数据加载中。。">
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" align="center" width="60px" label="序号">
        </el-table-column>
        <el-table-column prop="mc" show-overflow-tooltip align="center" label="名称">
        </el-table-column>
        <el-table-column prop="ssbm" show-overflow-tooltip align="center" label="所属部门">
        </el-table-column>
        <el-table-column prop="x1" label="X1" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="y1" label="Y1" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="x2" label="X2" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="y2" label="Y2" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="zxX" label="中心X" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="zxY" label="中心Y" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="140px">
          <template #default="{ row }">
            <el-button @click="addEdit('detail', row.id)" size="small">详情</el-button>
            <el-button @click="delDictItem(row.id)" type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent" :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div v-if="dialogFormVisible" class="dialog">
      <div class="head_box">
        <span class="title">{{ title }}</span>
        <div>
          <el-button v-if="!isDetail" :loading="loading" type="primary" size="small" @click="submit">保存</el-button>
          <el-button size="small" @click="close">关闭</el-button>
        </div>
      </div>
      <el-form ref="elform" :model="form" :rules="rules" :inline="true" label-position="top">
        <el-form-item style="width: 48%" prop="mc" label="名称">
          <el-input v-model="form.mc" placeholder="请输入名称" style="width: 100%" clearable />
        </el-form-item>
        <el-form-item style="width: 48%" prop="ssbmdm" label="所属部门">
          <MOSTY.Department width="100%" :placeholder="form.ssbm || '请选择部门'" clearable filterable v-model="form.ssbmdm"
            @getDepValue="getDepValue" />
        </el-form-item>
        <el-form-item style="width: 48%" prop="distance" label="方格大小(米)">
          <el-input-number v-model="form.distance" :min="100" :max="5000" :step="100" style="width: 100%" />
        </el-form-item>
        <el-form-item style="width: 48%" prop="x1" label="X1">
          <el-input v-model="form.x1" placeholder="X1" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item style="width: 48%" prop="y1" label="Y1">
          <el-input v-model="form.y1" placeholder="Y1" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item style="width: 48%" prop="x2" label="X2">
          <el-input v-model="form.x2" placeholder="X2" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item style="width: 48%" prop="y2" label="Y2">
          <el-input v-model="form.y2" placeholder="Y2" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item style="width: 48%" prop="zxX" label="中心X">
          <el-input v-model="form.zxX" placeholder="中心X" style="width: 100%" disabled />
        </el-form-item>
        <el-form-item style="width: 48%" prop="zxY" label="中心Y">
          <el-input v-model="form.zxY" placeholder="中心Y" style="width: 100%" disabled />
        </el-form-item>
      </el-form>
      <div style="height: 40vh; width: 100%">
        <GdMap v-if="dialogFormVisible" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, onUnmounted, nextTick } from "vue";
import { getPatrolBlockList, addPatrolBlock, updatePatrolBlock, getPatrolBlockInfo, deletePatrolBlock, getSquarePoints } from "@/api/basicsmanage/patrolBlock.js";
import GdMap from "@/components/Map/GdMap/index.vue";
import emitter from "@/utils/eventBus.js";
import * as MOSTY from "@/components/MyComponents/index";

const { proxy } = getCurrentInstance();
const ids = ref([]); //批量删除的ID
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  mc: ''
});
const tableData = ref([]); //表单数据
const searchBox = ref(null); // 搜索盒子
const keyCount = ref(0); //tabel组件刷新值
const tableHeight = ref(); // 表格高度
const loadingTable = ref(true);
const loading = ref(false);
const title = ref("新增巡逻方块");
const total = ref(0); //总数据
const dialogFormVisible = ref(false);
const formDefault = ref({});
const openType = ref(""); // 打开类型 add/edit/detail
const isDetail = ref(false); // 是否为详情模式
const mapClickSeq = ref(0);
//表单数据
const form = ref({
  mc: "",
  x1: "",
  y1: "",
  x2: "",
  y2: "",
  zxX: "",
  zxY: "",
  ssbm: "",
  ssbmdm: "",
  distance: 500
});
//表单验证
const rules = reactive({
  mc: [{ required: true, message: "请输入名称", trigger: "blur" }],
  ssbmdm: [{ required: true, message: "请选择所属部门", trigger: "blur" }]
});
const elform = ref(null);
const listQueryDefault = ref({})

// 方块颜色常量（统一管理）- 与编辑时保持一致
const BLOCK_COLORS = {
  fill: "rgba(2,20,51,0.5)",      // 填充色
  border: "#1C97FF",               // 边框色 - 蓝色
  text: "#12fdb8"                  // 文字色 - 青绿色
};

onMounted(() => {
  listQueryDefault.value = JSON.parse(JSON.stringify(listQuery.value))
  formDefault.value = JSON.parse(JSON.stringify(form.value))
  getListData();
  tabHeightFn();
  proxy.mittBus.on("mittFn", (data) => {
    keyCount.value = data;
  });

  // 监听地图点击事件返回的坐标
  emitter.on("mapClickCoordinates", (data) => {
    if (openType.value === 'add') {
      handleMapClick([data.lng, data.lat]);
    }
  });
});
onUnmounted(() => {
  proxy.mittBus.off("mittFn");
  emitter.off("mapClickCoordinates");
});

// 查询
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
};

//获取数据
const getListData = () => {
  loadingTable.value = true;
  getPatrolBlockList(listQuery.value).then((res) => {
    tableData.value = res.records || [];
    total.value = res.total || 0;
    loadingTable.value = false;
  }).catch(() => {
    loadingTable.value = false;
  });
};

// 新增/编辑/详情
function addEdit(type, id) {
  dialogFormVisible.value = true;
  openType.value = type;
  isDetail.value = type === 'detail';
  // 清除所有可能的方块图形
  emitter.emit("deletePointArea", "patrolBlock");
  emitter.emit("deletePointArea", "zdxl_fzyc");
  emitter.emit("deletePointArea", "tbZdxlFgdw");
  emitter.emit("deletePointArea", "taskFg-info");
  emitter.emit("deletePointArea", "taskFg-flag");
  emitter.emit("deletePointArea", "addfg");

  if (type === 'detail') {
    title.value = "巡逻方块详情";
    getPatrolBlockInfo(id).then((res) => {
      form.value = res;
      if (res.x1 && res.y1 && res.x2 && res.y2) {
        setTimeout(() => {
          showBlockOnMap(res);
        }, 500);
      }
    });
  } else if (type === 'edit') {
    title.value = "修改巡逻方块";
    getPatrolBlockInfo(id).then((res) => {
      form.value = res;
      form.value.distance = 500;
      if (res.x1 && res.y1 && res.x2 && res.y2) {
        setTimeout(() => {
          showBlockOnMap(res);
        }, 500);
      }
    });
  } else {
    title.value = "新增巡逻方块";
    form.value = JSON.parse(JSON.stringify(formDefault.value));
    setTimeout(() => {
      emitter.emit("getMapClickCoordinates");
    }, 500);
  }
}

// 获取部门信息
function getDepValue(val) {
  if (val) {
    form.value.ssbm = val.orgName || val.deptName || val.label;
    form.value.ssbmdm = val.orgCode || val.deptCode || val.value;
    // 清除部门字段的验证状态
    nextTick(() => {
      elform.value?.clearValidate('ssbmdm');
    });
  }
}

// 处理地图点击
function handleMapClick(coords) {
  const [longitude, latitude] = coords;
  const seq = ++mapClickSeq.value;
  form.value.zxX = longitude.toFixed(6);
  form.value.zxY = latitude.toFixed(6);

  // 调用接口获取正方形四个点位
  getSquarePoints({
    longitude: longitude,
    latitude: latitude,
    distance: form.value.distance || 500
  }).then((res) => {
    if (seq !== mapClickSeq.value) return;
    form.value.x1 = res.x1;
    form.value.y1 = res.y1;
    form.value.x2 = res.x2;
    form.value.y2 = res.y2;

    // 新增预览：固定 flag + echoPlane isclear，避免 patrolBlock_n 异步竞态导致边框图层残留
    showBlockOnMap(form.value, { preview: true });

    proxy.$message.success("已获取方格坐标");
  }).catch(() => {
    proxy.$message.error("获取方格坐标失败");
  });
}

// 在地图上显示方块；opts.preview 为 true 时表示新增选点预览
function showBlockOnMap(data, opts = {}) {
  const currentFlag = "patrolBlock";
  let position = [
    [Number(data.x1), Number(data.y1)],
    [Number(data.x2), Number(data.y2)]
  ];
  let text = data.mc;
  let obj = [{ position, text, id: data.id || 1 }];

  // 先删除同名 flag 的旧图形
  emitter.emit("deletePointArea", currentFlag);

  // 延迟绘制，等待删除完成
  setTimeout(() => {
    emitter.emit("echoPlane", {
      fontColor: BLOCK_COLORS.text,
      coords: obj,
      type: "rectangle",
      flag: currentFlag,
      isclear: true,
      color: BLOCK_COLORS.fill,
      linecolor: BLOCK_COLORS.border
    });
  }, 100);

  // 设置地图中心点
  const centerLng = data.zxX || (Number(data.x1) + Number(data.x2)) / 2;
  const centerLat = data.zxY || (Number(data.y1) + Number(data.y2)) / 2;
  emitter.emit("setMapCenter", {
    location: [Number(centerLng), Number(centerLat)],
    zoomLevel: 14
  });
}

//批量数据
const handleSelectionChange = (val) => {
  ids.value = val.map(v => { return v.id });
};

// 单个删除
function delDictItem(id) {
  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
    deletePatrolBlock(id).then((res) => {
      proxy.$message({ message: "删除成功", type: "success" });
      getListData();
    });
  }).catch(() => {
    proxy.$message.info("已取消");
  });
}

//批量删除数据
const batchDelete = () => {
  proxy.$confirm("确定要删除", "警告", { type: "warning" }).then(() => {
    // 批量删除：逐个调用删除接口
    const deletePromises = ids.value.map(id => deletePatrolBlock(id));
    Promise.all(deletePromises).then(() => {
      proxy.$message({ message: "删除成功", type: "success" });
      getListData();
    });
  }).catch(() => {
    proxy.$message.info("已取消");
  });
};

//提交
function submit() {
  elform.value.validate((valid) => {
    if (!valid) return false
    loading.value = true;

    // 新增时验证坐标
    if (openType.value === 'add' && (!form.value.x1 || !form.value.y1)) {
      proxy.$message.warning("请在地图上选择位置");
      loading.value = false;
      return;
    }

    if (title.value == "新增巡逻方块") {
      addPatrolBlock(form.value).then(() => {
        proxy.$message({ type: "success", message: "新增成功" });
        close()
        loading.value = false;
        getListData();
      }).catch(() => {
        loading.value = false;
      })
    } else {
      updatePatrolBlock(form.value).then(() => {
        proxy.$message({ type: "success", message: "修改成功" });
        close()
        loading.value = false;
        getListData();
      }).catch(() => {
        loading.value = false;
      })
    }
  });
}

//关闭弹窗
function close() {
  // 必须先清除图层再关弹窗：GdMap 用 v-if 挂载，若先 dialogFormVisible=false，
  // 子组件会卸载并 off("deletePointArea")，后面的 emit 无人处理，方块会永远留在地图上。
  emitter.emit("deletePointArea", "patrolBlock");
  emitter.emit("deletePointArea", "zdxl_fzyc");
  emitter.emit("deletePointArea", "tbZdxlFgdw");
  emitter.emit("deletePointArea", "taskFg-info");
  emitter.emit("deletePointArea", "taskFg-flag");
  emitter.emit("deletePointArea", "addfg");

  dialogFormVisible.value = false;
  form.value = JSON.parse(JSON.stringify(formDefault.value));
  mapClickSeq.value = 0;
}

// 重置
const reset = () => {
  listQuery.value = JSON.parse(JSON.stringify(listQueryDefault.value))
  getListData();
};
// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - searchBox.value.offsetHeight - 240;
  window.onresize = function () { tabHeightFn(); };
};

/**
 * size 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};

</script>

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