<template>
  <div class="ZhiChu_ModalTable">
    <div class="filterDiv">
      <a-row>
        <!-- 地图显示 -->
        <a-col :span="option.dataStyle.colLeft">
          <div class="filterTitle">地图显示</div>
        </a-col>
        <a-col :span="24 - option.dataStyle.colLeft">
          <div class="filterContentDiv">
            <n-checkbox-group v-model:value="option.dataStyle.mapListValue">
              <n-checkbox value="water">
                <template #default>
                  <span class="filterContentFont">水源</span>
                </template>
              </n-checkbox>
              <n-checkbox value="goods">
                <template #default>
                  <span class="filterContentFont">物资</span>
                </template>
              </n-checkbox>
              <n-checkbox value="barrack">
                <template #default>
                  <span class="filterContentFont">营房</span>
                </template>
              </n-checkbox>
              <n-checkbox value="fanghuotongdao">
                <template #default>
                  <span class="filterContentFont">防火通道</span>
                </template>
              </n-checkbox>
              <n-checkbox value="sanluntongdao">
                <template #default>
                  <span class="filterContentFont">三轮通道</span>
                </template>
              </n-checkbox>
              <n-checkbox value="buxingdao">
                <template #default>
                  <span class="filterContentFont">步行道</span>
                </template>
              </n-checkbox>
            </n-checkbox-group>
          </div>
        </a-col>

        <!-- 资源列表 -->
        <a-col :span="option.dataStyle.colLeft">
          <div class="filterTitle">资源列表</div>
        </a-col>
        <a-col :span="24 - option.dataStyle.colLeft">
          <div class="filterContentDiv" style="display: inline-flex">
            <div
              :class="option.dataStyle.buttonValue == '0' ? 'choose' : 'nochoose'"
              @click="option.dataStyle.buttonValue = '0'"
            >
              水源
            </div>
            <div
              :class="option.dataStyle.buttonValue == '1' ? 'choose' : 'nochoose'"
              @click="option.dataStyle.buttonValue = '1'"
            >
              物资
            </div>
            <div
              :class="option.dataStyle.buttonValue == '2' ? 'choose' : 'nochoose'"
              @click="option.dataStyle.buttonValue = '2'"
            >
              营房
            </div>
          </div>
        </a-col>

        <!-- 重点资源 -->
        <a-col :span="option.dataStyle.colLeft">
          <div class="filterTitle">重点资源</div>
        </a-col>
        <a-col :span="24 - option.dataStyle.colLeft"></a-col>
        <!-- 重点资源·搜索 -->
        <a-col :span="option.dataStyle.colLeft" v-if="option.dataStyle.buttonValue == 1"> </a-col>
        <a-col :span="24 - option.dataStyle.colLeft" v-if="option.dataStyle.buttonValue == 1">
          <div class="filterContentDiv">
            <n-input-group>
              <n-input
                v-model:value="searchValue"
                :style="{ width: '50%' }"
                placeholder="请输入要搜索的物资名称"
                clearable
              />
              <n-button type="primary" ghost> 搜索 </n-button>
            </n-input-group>
          </div>
        </a-col>
        <!-- 距离 -->
        <a-col :span="option.dataStyle.colLeft">
          <div class="filterTitle" style="text-align: center">距离</div>
        </a-col>
        <a-col :span="24 - option.dataStyle.colLeft">
          <div class="filterContentDiv">
            <n-radio-group v-model:value="option.dataStyle.distanceradio" name="radiogroup">
              <n-space>
                <n-radio value="1">
                  <span class="filterContentFont"> 1km内 </span>
                </n-radio>
                <n-radio value="2">
                  <span class="filterContentFont"> 5km内 </span>
                </n-radio>
                <n-radio value="3">
                  <span class="filterContentFont"> 10km内 </span>
                </n-radio>
                <n-radio value="4">
                  <span class="filterContentFont"> 20km内 </span>
                </n-radio>
                <n-radio value="5">
                  <span class="filterContentFont"> 全部 </span>
                </n-radio>
              </n-space>
            </n-radio-group>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="dataDiv">
      <Water
        v-if="option.dataStyle.buttonValue == '0'"
        :dataStyle="option.dataStyle"
        :dataset="option.dataset"
        :header="option.header"
        :h="h"
        :filterDivHeight="filterDivHeight"
        @moveLocation="moveLocation"
        @roamLocation="roamLocation"
      />
      <Goods
        v-if="option.dataStyle.buttonValue == '1'"
        :dataStyle="option.dataStyle"
        :dataset="option.dataset"
        :header="option.header"
        :h="h"
        :filterDivHeight="filterDivHeight"
        :searchValue="searchValue"
        @moveLocation="moveLocation"
        @roamLocation="roamLocation"
      />
      <Barrack
        v-if="option.dataStyle.buttonValue == '2'"
        :dataStyle="option.dataStyle"
        :dataset="option.dataset"
        :header="option.header"
        :h="h"
        :filterDivHeight="filterDivHeight"
        @moveLocation="moveLocation"
        @roamLocation="roamLocation"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref, onMounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import {
    getRouterFunc,
    handlerStartRoaming,
    handlerStopRoaming,
    drawRouterFunc,
    clearRouterFunc,
  } from './ts/routePath';
  import dayjs from 'dayjs';
  import { cloneDeep } from 'lodash-es';
  import * as mars3d from 'mars3d';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';
  import Water from './source/water.vue';
  import Goods from './source/goods.vue';
  import Barrack from './source/barrack.vue';

  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h } = toRefs(props.chartConfig.attr);

  const option = reactive({
    header: props.chartConfig.option.header,
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
    status: props.chartConfig.status,
  });
  // 搜索
  const searchValue = ref();

  // 表头高度
  const filterDivHeight: any = computed(() => {
    return option.dataStyle.buttonValue == '1'
      ? option.dataStyle.filterItemHeight * 5
      : option.dataStyle.filterItemHeight * 4;
  });

  let waterGraphicData: any = [];
  let waterGraphicLayers = new mars3d.layer.GraphicLayer();
  let goodsGraphicData: any = [];
  let goodsGraphicLayers = new mars3d.layer.GraphicLayer();
  let barrackGraphicData: any = [];
  let barrackGraphicLayers = new mars3d.layer.GraphicLayer();
  let fanghuotongdaoGraphicLayer: any = null;
  let sanluntongdaoGraphicLayer: any = null;
  let buxingdaoGraphicLayer: any = null;
  let heighLightPolylineGraphicLayers = new mars3d.layer.GraphicLayer();

  // 多选框-地图显示
  watch(
    () => option.dataStyle.mapListValue,
    (newValue) => {
      // 水源
      if (newValue.includes('water')) {
        mapListShow_water();
      } else {
        if (waterGraphicData.length > 0) {
          waterGraphicData?.forEach((graphicLayer) => {
            waterGraphicLayers.removeGraphic(graphicLayer);
          });
        }
      }
      // 物资
      if (newValue.includes('goods')) {
        mapListShow_goods();
      } else {
        if (goodsGraphicData.length > 0) {
          goodsGraphicData?.forEach((graphicLayer) => {
            goodsGraphicLayers.removeGraphic(graphicLayer);
          });
        }
      }
      // 营房
      if (newValue.includes('barrack')) {
        mapListShow_barrack();
      } else {
        if (barrackGraphicData.length > 0) {
          barrackGraphicData?.forEach((graphicLayer) => {
            barrackGraphicLayers.removeGraphic(graphicLayer);
          });
        }
      }
      // 防火通道
      if (newValue.includes('fanghuotongdao')) {
        if (!window.globalMap.getLayerById('ZhiChu_ModalTable' + '_fanghuotongdao')) {
          mapListShow_fanghuotongdao();
        }
      } else {
        if (fanghuotongdaoGraphicLayer != null) {
          window.globalMap.removeLayer(fanghuotongdaoGraphicLayer);
        }
      }
      // 三轮通道
      if (newValue.includes('sanluntongdao')) {
        if (!window.globalMap.getLayerById('ZhiChu_ModalTable' + '_sanluntongdao')) {
          mapListShow_sanluntongdao();
        }
      } else {
        if (sanluntongdaoGraphicLayer != null) {
          window.globalMap.removeLayer(sanluntongdaoGraphicLayer);
        }
      }
      // 步行道
      if (newValue.includes('buxingdao')) {
        if (!window.globalMap.getLayerById('ZhiChu_ModalTable' + '_buxingdao')) {
          mapListShow_buxingdao();
        }
      } else {
        if (buxingdaoGraphicLayer != null) {
          window.globalMap.removeLayer(buxingdaoGraphicLayer);
        }
      }
    },
    {
      immediate: false,
      deep: true,
    },
  );
  watch(
    () => option.status.hide,
    () => {
      if (option.status.hide) {
        // 表格隐藏，则删除地图的数据
        hideMapGraphicLayer();
      } else {
        // 表格展示，则显示地图的数据
        if (waterGraphicData.length > 0) {
          mapListShow_water();
        }
        if (goodsGraphicData.length > 0) {
          mapListShow_goods();
        }
        if (barrackGraphicData.length > 0) {
          mapListShow_barrack();
        }
        if (fanghuotongdaoGraphicLayer != null) {
          mapListShow_fanghuotongdao();
        }
        if (sanluntongdaoGraphicLayer != null) {
          mapListShow_sanluntongdao();
        }
        if (buxingdaoGraphicLayer != null) {
          mapListShow_buxingdao();
        }
      }
    },
    {
      immediate: false,
      deep: true,
    },
  );

  // 水源
  function mapListShow_water() {
    setTimeout(() => {
      let data: any = cloneDeep(option.dataset).filter((item) => parseInt(item.type) == 0);
      // switch (option.dataStyle.distanceradio) {
      //   case '1':
      //     data = data.filter((item) => parseFloat(item.distance) <= 1);
      //     break;
      //   case '2':
      //     data = data.filter((item) => parseFloat(item.distance) <= 5);
      //     break;
      //   case '3':
      //     data = data.filter((item) => parseFloat(item.distance) <= 10);
      //     break;
      //   case '4':
      //     data = data.filter((item) => parseFloat(item.distance) <= 20);
      //     break;
      //   case '5':
      //     data = data;
      //     break;
      // }
      // 删除旧数据
      waterGraphicData?.forEach((graphicLayer) => {
        waterGraphicLayers.removeGraphic(graphicLayer);
      });
      // 图层
      window.globalMap.addLayer(waterGraphicLayers);
      // 图层数据
      waterGraphicData = [];
      data.forEach((dataItem, dataIndex) => {
        let waterGraphic = new mars3d.graphic.BillboardEntity({
          id: 'ZhiChu_ModalTable' + '_water_' + dataIndex + '_' + dataItem.id,
          position: [parseFloat(dataItem.lng), parseFloat(dataItem.lat)],
          style: {
            image: '@/assets/images/chart/zhichu/component/TuLi_ShuiYuan.png',
            clampToGround: true,
            scale: 1,
            label: {
              text: dataItem.name + '： (' + dataItem.distance + ') km',
              font_size: 12,
              color: '#ffffff',
              pixelOffsetY: -30,
              pixelOffsetX: 0,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 6000,
              distanceDisplayCondition_near: 0,
            },
          },
          popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
                  <div style="postion: relative; padding: 60px; max-width: 500px; overflow: hidden;">
                      <div style="background-image: url('@/assets/images/chart/zhichu/component/ModalTable_window.png'); background-size: 100% 100%;">
                          <div class="arrow-lt"></div>
                          <div class="b-t"></div>
                          <div class="b-r"></div>
                          <div class="b-b"></div>
                          <div class="b-l"></div>
                          <div class="arrow-rb"></div>
                          <div style="padding-left: 12px; color: #ffffff; font-size: 16px; wite-space: nowrap; overflow: hidden;">
                              <div style="padding-top: 6px;padding-left: 24px;">${dataItem.name}</div>
                              <div style="display: flex; flex-direction: column;">
                                  <div style="display: inline-flex">
                                      <div class="data-label" >距离：</div>
                                      <div class="data-value">${dataItem.distance}km</div>
                                  </div>
                                  <div style="display: inline-flex">
                                      <div class="data-label" >蓄水量：</div>
                                      <div class="data-value">${dataItem.xsl > 0 ? dataItem.xsl + 'm³' : '- -'}</div>
                                  </div>
                                  <div style="display: inline-flex">
                                      <div class="data-label" >单泵抽水用时：</div>
                                      <div class="data-value">${dataItem.xsl > 0 ? (dataItem.xsl / 24).toFixed(2) + '小时' : '- -'}</div>
                                  </div>
                                  <div style="display: inline-flex">
                                      <div class="data-label" >预计用时：</div>
                                      <div class="data-value">
                                        <input value="${dataItem.estimatedTime}" placeholder="请输入预计用时" style="background:none;border:1px solid #999;border-radius:3px;" />
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="b-t-l"></div>
                      <div class="b-b-r"></div>
                  </div>
                  <div style="position: absolute; bottom: 0; left: 0; width: 85px; height: 2px; transform: rotate(-45deg) translate(15px, -25px); background-color: #15babc;" ></div>
              </div>`,
          popupOptions: {
            offsetY: 0,
            offsetX: 0,
            template: '{content}',
            horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
            verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
          },
          pointerEvents: true,
        });

        // 将新图形添加到图层中
        waterGraphicLayers.addGraphic(waterGraphic);
        waterGraphicData.push(waterGraphic);
      });
    }, 500);
  }
  // 物资
  function mapListShow_goods() {
    setTimeout(() => {
      let data: any = cloneDeep(option.dataset).filter((item) => parseInt(item.type) == 1);
      // switch (option.dataStyle.distanceradio) {
      //   case '1':
      //     data = data.filter((item) => parseFloat(item.distance) <= 1);
      //     break;
      //   case '2':
      //     data = data.filter((item) => parseFloat(item.distance) <= 5);
      //     break;
      //   case '3':
      //     data = data.filter((item) => parseFloat(item.distance) <= 10);
      //     break;
      //   case '4':
      //     data = data.filter((item) => parseFloat(item.distance) <= 20);
      //     break;
      //   case '5':
      //     data = data;
      //     break;
      // }
      // 删除旧数据
      goodsGraphicData?.forEach((graphicLayer) => {
        goodsGraphicLayers.removeGraphic(graphicLayer);
      });
      // 图层
      window.globalMap.addLayer(goodsGraphicLayers);
      // 图层数据
      goodsGraphicData = [];
      data.forEach((dataItem, dataIndex) => {
        let goodsGraphic = new mars3d.graphic.BillboardEntity({
          id: 'ZhiChu_ModalTable' + '_goods_' + dataIndex + '_' + data.id,
          position: [parseFloat(dataItem.lng), parseFloat(dataItem.lat)],
          style: {
            image: '@/assets/images/chart/zhichu/component/TuLi_WuZi.png',
            clampToGround: true,
            scale: 1,
            label: {
              text: dataItem.name + '： (' + dataItem.distance + ') km',
              font_size: 12,
              color: '#ffffff',
              pixelOffsetY: -30,
              pixelOffsetX: 0,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 6000,
              distanceDisplayCondition_near: 0,
            },
          },
          popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
                  <div style="postion: relative; padding: 60px; max-width: 500px; overflow: hidden;">
                      <div style="background-image: url('@/assets/images/chart/zhichu/component/ModalTable_window.png'); background-size: 100% 100%;">
                          <div class="arrow-lt"></div>
                          <div class="b-t"></div>
                          <div class="b-r"></div>
                          <div class="b-b"></div>
                          <div class="b-l"></div>
                          <div class="arrow-rb"></div>
                          <div style="padding-left: 12px; color: #ffffff; font-size: 16px; wite-space: nowrap; overflow: hidden;">
                              <div style="padding-top: 6px;padding-left: 24px;">${dataItem.name}</div>
                              <div style="display: flex; flex-direction: column;">
                                  <div style="display: inline-flex">
                                      <div class="data-label" >距离：</div>
                                      <div class="data-value">${dataItem.distance}km</div>
                                  </div>
                                  <div style="display: inline-flex">
                                      <div class="data-label" >预计用时：</div>
                                      <div class="data-value">
                                      <div class="data-value">${dataItem.estimatedTime}</div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="b-t-l"></div>
                      <div class="b-b-r"></div>
                  </div>
                  <div style="position: absolute; bottom: 0; left: 0; width: 85px; height: 2px; transform: rotate(-45deg) translate(15px, -25px); background-color: #15babc;" ></div>
              </div>`,
          popupOptions: {
            offsetY: 0,
            offsetX: 0,
            template: '{content}',
            horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
            verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
          },
          pointerEvents: true,
        });
        // 将新图形添加到图层中
        goodsGraphicData.push(goodsGraphic);
        goodsGraphicLayers.addGraphic(goodsGraphic);
      });
    }, 500);
  }
  // 营房
  function mapListShow_barrack() {
    setTimeout(() => {
      let data: any = cloneDeep(option.dataset).filter((item) => parseInt(item.type) == 2);
      // switch (option.dataStyle.distanceradio) {
      //   case '1':
      //     data = data.filter((item) => parseFloat(item.distance) <= 1);
      //     break;
      //   case '2':
      //     data = data.filter((item) => parseFloat(item.distance) <= 5);
      //     break;
      //   case '3':
      //     data = data.filter((item) => parseFloat(item.distance) <= 10);
      //     break;
      //   case '4':
      //     data = data.filter((item) => parseFloat(item.distance) <= 20);
      //     break;
      //   case '5':
      //     data = data;
      //     break;
      // }
      // 删除旧数据
      barrackGraphicData?.forEach((graphicLayer) => {
        barrackGraphicLayers.removeGraphic(graphicLayer);
      });
      // 图层
      window.globalMap.addLayer(barrackGraphicLayers);
      // 图层数据
      barrackGraphicData = [];
      data.forEach((dataItem, dataIndex) => {
        let barrackGraphic = new mars3d.graphic.BillboardEntity({
          id: 'ZhiChu_ModalTable' + '_barrack_' + dataIndex + '_' + data.id,
          position: [parseFloat(dataItem.lng), parseFloat(dataItem.lat)],
          style: {
            image: '@/assets/images/chart/zhichu/component/TuLi_YingFang.png',
            clampToGround: true,
            scale: 1,
            label: {
              text: dataItem.name + '： (' + dataItem.distance + ') km',
              font_size: 12,
              color: '#ffffff',
              pixelOffsetY: -30,
              pixelOffsetX: 0,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 6000,
              distanceDisplayCondition_near: 0,
            },
          },
          popup: `<div class="marsTiltPanel marsTiltPanel-theme-green">
                  <div style="postion: relative; padding: 60px; max-width: 500px; overflow: hidden;">
                      <div style="background-image: url('@/assets/images/chart/zhichu/component/ModalTable_window.png'); background-size: 100% 100%;">
                          <div class="arrow-lt"></div>
                          <div class="b-t"></div>
                          <div class="b-r"></div>
                          <div class="b-b"></div>
                          <div class="b-l"></div>
                          <div class="arrow-rb"></div>
                          <div style="padding-left: 12px; color: #ffffff; font-size: 16px; wite-space: nowrap; overflow: hidden;">
                              <div style="padding-top: 6px;padding-left: 24px;">${dataItem.name}</div>
                              <div style="display: flex; flex-direction: column;">
                                  <div style="display: inline-flex">
                                      <div class="data-label" >距离：</div>
                                      <div class="data-value">${dataItem.distance}km</div>
                                  </div>
                                  <div style="display: inline-flex">
                                      <div class="data-label" >预计用时：</div>
                                      <div class="data-value">
                                      <div class="data-value">${dataItem.estimatedTime}</div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="b-t-l"></div>
                      <div class="b-b-r"></div>
                  </div>
                  <div style="position: absolute; bottom: 0; left: 0; width: 85px; height: 2px; transform: rotate(-45deg) translate(15px, -25px); background-color: #15babc;" ></div>
              </div>`,
          popupOptions: {
            offsetY: 0,
            offsetX: 0,
            template: '{content}',
            horizontalOrigin: 'Cesium.HorizontalOrigin.LEFT',
            verticalOrigin: 'Cesium.VerticalOrigin.CENTER',
          },
          pointerEvents: true,
        });
        // 将新图形添加到图层中
        barrackGraphicData.push(barrackGraphic);
        barrackGraphicLayers.addGraphic(barrackGraphic);
      });
    }, 500);
  }
  // 防火通道
  function mapListShow_fanghuotongdao() {
    setTimeout(() => {
      // 创建 WMS 图层
      fanghuotongdaoGraphicLayer = new mars3d.layer.WmsLayer({
        id: 'ZhiChu_ModalTable' + '_fanghuotongdao',
        url: 'http://221.2.83.254:9007/geoserver/ksp/wms',
        parameters: {
          SERVICE: 'WMS',
          STYLES: '',
          VERSION: '1.1.1',
          REQUEST: 'GetMap',
          FORMAT: 'image/png',
          TRANSPARENT: 'true',
          LAYERS: 'ksp:beibushanqudaolufenlei0923',
          exceptions: 'application/vnd.ogc.se_inimage',
          CQL_FILTER: "qufen='行车路'",
          SRS: 'EPSG:4326',
        },
      });
      // 添加 WMS 图层到地图
      window.globalMap.addLayer(fanghuotongdaoGraphicLayer);

      // 获取点击的图斑
      fanghuotongdaoGraphicLayer.on(mars3d.EventType.click, function (event) {
        console.log(event);
        let clickCoordinates = event.features[0].data.geometry.coordinates[0];
        let graphic = new mars3d.graphic.CurveEntity({
          positions: clickCoordinates,
          style: {
            width: 5,
            color: '#FF0000FF',
            clampToGround: true,
            highlight: {
              color: '#ff0000',
            },
          },
        });
        heighLightPolylineGraphicLayers.addGraphic(graphic);
      });
    }, 500);
  }
  // 三轮通道
  function mapListShow_sanluntongdao() {
    setTimeout(() => {
      // 创建 WMS 图层
      sanluntongdaoGraphicLayer = new mars3d.layer.WmsLayer({
        id: 'ZhiChu_ModalTable' + '_sanluntongdao',
        url: 'http://221.2.83.254:9007/geoserver/ksp/wms',
        parameters: {
          SERVICE: 'WMS',
          STYLES: '',
          VERSION: '1.1.1',
          REQUEST: 'GetMap',
          FORMAT: 'image/png',
          TRANSPARENT: true,
          LAYERS: 'ksp:beibushanqudaolufenlei0923',
          exceptions: 'application/vnd.ogc.se_inimage',
          CQL_FILTER: "qufen='三轮车路'",
          SRS: 'EPSG:4326',
        },
      });
      // 添加 WMS 图层到地图
      window.globalMap.addLayer(sanluntongdaoGraphicLayer);
    }, 500);
  }
  // 步行道
  function mapListShow_buxingdao() {
    setTimeout(() => {
      // 创建 WMS 图层
      buxingdaoGraphicLayer = new mars3d.layer.WmsLayer({
        id: 'ZhiChu_ModalTable' + '_buxingdao',
        url: 'http://221.2.83.254:9007/geoserver/ksp/wms',
        parameters: {
          SERVICE: 'WMS',
          STYLES: '',
          VERSION: '1.1.1',
          REQUEST: 'GetMap',
          FORMAT: 'image/png',
          TRANSPARENT: true,
          LAYERS: 'ksp:beibushanqudaolufenlei0923',
          exceptions: 'application/vnd.ogc.se_inimage',
          CQL_FILTER: "qufen='步行路'",
          SRS: 'EPSG:4326',
        },
      });
      // 添加 WMS 图层到地图
      window.globalMap.addLayer(buxingdaoGraphicLayer);
    }, 500);
  }

  // 删除地图的数据
  function hideMapGraphicLayer() {
    if (waterGraphicData.length > 0) {
      waterGraphicData?.forEach((graphicLayer) => {
        waterGraphicLayers.removeGraphic(graphicLayer);
      });
    }
    if (goodsGraphicData.length > 0) {
      goodsGraphicData?.forEach((graphicLayer) => {
        goodsGraphicLayers.removeGraphic(graphicLayer);
      });
    }
    if (barrackGraphicData.length > 0) {
      barrackGraphicData?.forEach((graphicLayer) => {
        barrackGraphicLayers.removeGraphic(graphicLayer);
      });
    }
    if (fanghuotongdaoGraphicLayer != null) {
      window.globalMap.removeLayer(fanghuotongdaoGraphicLayer);
    }
    if (sanluntongdaoGraphicLayer != null) {
      window.globalMap.removeLayer(sanluntongdaoGraphicLayer);
    }
    if (buxingdaoGraphicLayer != null) {
      window.globalMap.removeLayer(buxingdaoGraphicLayer);
    }
  }

  // 移动位置
  let startCoor: any;
  function moveLocation(lngLat) {
    //  window.globalMap.flyToGraphic(lngLat);
    startCoor = lngLat;
    window.globalMap.flyToPoint(lngLat, {
      alt: 4269.7,
      heading: 359.2,
      pitch: -51.9,
    });
  }

  let endCoor = [118.031528, 35.431473];
  // 漫游
  async function roamLocation(startCoor) {
    let params: any = {
      startlng: parseFloat(startCoor[0]),
      startlat: parseFloat(startCoor[1]),
      endlng: parseFloat(endCoor[0]),
      endlat: parseFloat(endCoor[1]),
      areaname: 'feixian',
    };
    getRouterFunc(params)
      ?.then((res: any) => {
        handlerStopRoaming();
        drawRouterFunc(res);
        handlerStartRoaming(res.allCoordinates, false);
      })
      .catch((err) => {
        clearRouterFunc();
      });
  }

  onMounted(() => {
    // 组件通信
    const sql = props.chartConfig.request?.requestSQLContent?.sql;
    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
      // 火情终点
      endCoor = [data.lng, data.lat];
      props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id });
      // 数据callback处理（预览时触发）
      useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
        option.dataset = resData;
      });
    });
  });

  // 数据callback处理（预览时触发）
  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
    option.dataset = resData;
  });
</script>

<style lang="scss" scoped>
  .ZhiChu_ModalTable {
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
  }

  .filterDiv {
    width: 100%;
    padding-top: v-bind('`${option.dataStyle.filterMarginTop}px`');
    padding-left: v-bind('`${option.dataStyle.filterMarginLeft}px`');
    padding-right: v-bind('`${option.dataStyle.filterMarginLeft}px`');
  }

  // 筛选标题
  .filterTitle {
    text-align: v-bind('`${option.dataStyle.filterTitleAlign}`');
    font-size: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
    color: v-bind('`${option.dataStyle.filterTitleFontColor}`');
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    line-height: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
    height: v-bind('`${option.dataStyle.filterItemHeight}px`');
    font-style: normal;
  }
  .filterContentDiv {
    width: 100%;
    height: v-bind('`${option.dataStyle.filterItemHeight}px`');
    justify-content: v-bind('`${option.dataStyle.filterContentAlign}`');
    text-align: v-bind('`${option.dataStyle.filterContentAlign}`');
    align-items: v-bind('`${option.dataStyle.filterContentAlign}`');
  }

  // 内容通用字体
  .filterContentFont {
    font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
    color: v-bind('`${option.dataStyle.filterChooseFontColor}`');
  }
  ::v-deep .n-checkbox-box {
    width: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
    height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
  }
  ::v-deep .n-radio__dot {
    width: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
    height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
  }

  .nochoose {
    background: #1c211f;
    color: #18d09d;
    border: 1px solid #18d09d;
    font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
    width: v-bind('`${option.dataStyle.filterChooseFontSize + 62}px`');
    height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    text-align: center;
    line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    margin-right: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
  }
  .choose {
    background: #26d1ad;
    color: #0d2822;
    font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
    width: v-bind('`${option.dataStyle.filterChooseFontSize + 62}px`');
    height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    text-align: center;
    line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    margin-right: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
  }

  .popup {
    background: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }

  .dataDiv {
    height: v-bind(
      '`${h - option.dataStyle.filterMarginTop - filterDivHeight  - option.dataStyle.tableMarginTop}px`'
    );
  }
</style>
