<!-- gis地图右侧侧边栏icon文件 -->
<script setup lang="ts">
// 引入单击Icon对应方法集合
import type { MapControlItem } from '@/gis/ol/interface/common';
import { log } from 'echarts/types/src/util/log.js';
// import { obtainScreen2D } from '@/gis/ol/screenMap';
import { addImageLabelEntity, controlEntityVisibilityByType, gisDpEvent, obtainViewer, set2DModelOr3DModel, updateViewOnZoom } from '@/gis/cesium/map';
import { getAlarmRecords, getAllAccelerator, getAllNuclearfacility, getAllNuclearFuelFacilitiy, getAllNuclearTestPlant, getAllResearchReactors, getDataProvisionEfficiency, getGlobalSiteInfo } from '@/utils/axios/gisIms';

// 图标基础集合
const baseList = ref<MapControlItem[]>([
  {
    name: 'ts3D',
    isMargin: false,
    tooltip: '二三维切换',
    isActive: false,
    activeName: '2D',
  },
  {
    name: 'fullScreen',
    isMargin: true,
    tooltip: '全屏',
    isActive: false,
    activeName: 'fullScreen_active',
  },
  {
    name: 'pointData',
    isMargin: false,
    tooltip: '数据选择',
    isActive: false,
    activeName: 'pointData_active',
  },

  {
    name: 'zoomIn',
    isMargin: false,
    tooltip: '放大',
    isActive: false,
    activeName: 'zoomIn',
  },
  {
    name: 'zoomOut',
    isMargin: true,
    tooltip: '缩小',
    isActive: false,
    activeName: 'zoomOut',
  },

]);
const globalDaTaInffalg: any = ref(false);
const globalDaTaInftitle: any = ref('信息');
const globalDaTaInfContent: any = ref({});
const globalDaTaInfContentArr: any = ref([]);

// //站点类型（1-台站、2-核设施、3-反应堆、4-后处理厂、5-核试验场、6-加速器）
const podataMenu: any = [{
  url: '/cesium/image/taizhan.svg',
  name: '台站',
  type: 1,
  active: false,
  content: [{
    key: 'stationCode',
    value: '台站编码',
  }, {
    key: 'id',
    value: '台站ID',
  }, {
    key: 'countryCode',
    value: '国家',
  }, {
    key: 'type',
    value: '台站类型',
  }, {
    key: 'lon',
    value: '经度',
  }, {
    key: 'lat',
    value: '纬度',
  }, {
    key: 'elevation',
    value: '海拔',
  }, {
    key: 'dateBegin',
    value: '开始运行日期',
  }, {
    key: 'dateEnd',
    value: '结束运行日期',
  }, {
    key: 'description',
    value: '说明',
  }, {
    key: 'status',
    value: '状态',
  }, {
    key: 'phdf',
    value: '全谱',
  }, {
    key: 'phd',
    value: '样品谱',
  }, {
    key: 'met',
    value: '气象谱',
  }, {
    key: 'soh',
    value: '健康状态谱',
  }, {
    key: 'phdMetSoh',
    value: '样品谱+气象谱+健康状态谱',
  }],
}, {
  url: '/cesium/image/hesheshi.png',
  name: '核设施',
  type: 2,
  active: false,
  content: [{
    key: 'unitName',
    value: '设施名称',
  }, {
    key: 'id',
    value: '设施ID',
  }, {
    key: 'country',
    value: '国家',
  }, {
    key: 'longitude',
    value: '经度',
  }, {
    key: 'latitude',
    value: '纬度',
  }, {
    key: 'reactorStatus',
    value: '状态',
  }, {
    key: 'reactorType',
    value: '类型',
  }, {
    key: 'model',
    value: '型号',
  }, {
    key: 'owner',
    value: '所有者',
  }, {
    key: 'operator',
    value: '运营单位',
  }, {
    key: 'referenceUnitPowerMwe',
    value: '参考净容量',
  }, {
    key: 'designNetCapacityMwe',
    value: '设计净容量',
  }, {
    key: 'grossCapacityMwe',
    value: '毛容量',
  }, {
    key: 'thermalCapacityMwt',
    value: '热功率',
  }, {
    key: 'constructionStartDate',
    value: '施工开始日期',
  }, {
    key: 'firstCriticalityDate',
    value: '首次临界日期',
  }, {
    key: 'commercialOperationDate',
    value: '首次并网日期',
  }, {
    key: 'firstCriticalityDate',
    value: '商业运行日期',
  }],
}, {
  url: '/cesium/image/fanyingdui.png',
  name: '反应堆',
  type: 3,
  active: false,
  content: [{
    key: 'facilityName',
    value: '设施名称',
  }, {
    key: 'id',
    value: '设施ID',
  }, {
    key: 'longitude',
    value: '经度',
  }, {
    key: 'latitude',
    value: '纬度',
  }, {
    key: 'country',
    value: '国家',
  }, {
    key: 'city',
    value: '城市',
  }, {
    key: 'reactorType',
    value: '物理类型',
  }, {
    key: 'thermalPower',
    value: '热功率',
  }, {
    key: 'status',
    value: '状态',
  }, {
    key: 'isIsotopeProduction',
    value: '是否用于同位素生产',
  }],
}, {
  url: '/cesium/image/houchulichang.png',
  name: '后处理厂',
  type: 4,
  active: false,
  content: [{
    key: 'facilityName',
    value: '设施名称',
  }, {
    key: 'id',
    value: '设施ID',
  }, {
    key: 'longitude',
    value: '经度',
  }, {
    key: 'latitude',
    value: '纬度',
  }, {
    key: 'country',
    value: '国家',
  }, {
    key: 'facilityType',
    value: '设施类型',
  }, {
    key: 'fuelType',
    value: '燃料类型',
  }, {
    key: 'facilityStatus',
    value: '设施状态',
  }, {
    key: 'scale',
    value: '规模',
  }, {
    key: 'designCapacity',
    value: '设计容量',
  }, {
    key: 'startOfOperation',
    value: '开始运营年份',
  }, {
    key: 'endOfOperation',
    value: '结束运营年份',
  }],
}, {
  url: '/cesium/image/heshiyanchang.png',
  name: '核试验场',
  type: 5,
  active: false,
  content: [{
    key: 'name',
    value: '地点名称',
  }, {
    key: 'id',
    value: '记录ID',
  }, {
    key: 'longitude',
    value: '经度',
  }, {
    key: 'latitude',
    value: '纬度',
  }, {
    key: 'country',
    value: '国家',
  }],
}, {
  url: '/cesium/image/jiasuchang.png',
  name: '加速器',
  type: 6,
  active: false,
  content: [{
    key: 'facility_code',
    value: '设施简称',
  }, {
    key: 'id',
    value: '记录ID',
  }, {
    key: 'longitude',
    value: '经度',
  }, {
    key: 'latitude',
    value: '纬度',
  }, {
    key: 'country',
    value: '国家',
  }, {
    key: 'category',
    value: '设施分类',
  }, {
    key: 'maxCurrentA',
    value: '最大电流',
  }, {
    key: 'maxNeutronEnergyMev',
    value: '最大中子能量',
  }, {
    key: 'target',
    value: '靶材料',
  }, {
    key: 'type',
    value: '加速器类型',
  }, {
    key: 'isOperational',
    value: '是否仍在运行',
  }],
}, {
  url: '/cesium/image/gaoj.png',
  name: '告警',
  type: 7,
  active: false,
  content: [{
    key: 'taskName',
    value: '任务名称',
  }, {
    key: 'alarmTime',
    value: '报警时间',
  }, {
    key: 'samplingTime',
    value: '采样时间',
  }, {
    key: 'longitude',
    value: '经度',
  }, {
    key: 'latitude',
    value: '纬度',
  }, {
    key: 'sourceType',
    value: '数据源',
  }],
}];

// 数据信息check选择
function podataMenuClick(menu: any) {
  menu.active = !menu.active;
  controlEntityVisibilityByType(menu.type, menu.active);
}
// 图标集合
const svgList = ref<MapControlItem[]>([...baseList.value]);
// 图标点击事件处理
function handleIconClick(item: MapControlItem) {
  // const map: any = obtainScreen2D('mapscreen');

  switch (item.name) {
    case 'fullScreen':
      if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen().catch((err) => {
          console.error(`全屏操作失败: ${err.message}`);
        });
      }
      else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }
      break;
    case 'ts3D':
      set2DModelOr3DModel('mapscreen', item.isActive ? '3D' : '2D');
      break;
    case 'pointData':
      break;
    case 'zoomIn':
      obtainViewer('mapscreen').then((viewer: any) => {
        updateViewOnZoom(viewer, 'zoomIn');
      });
      break;
    case 'zoomOut':
      obtainViewer('mapscreen').then((viewer: any) => {
        // 缩小
        updateViewOnZoom(viewer, 'zoomOut');
      });
      break;
    default:
      break;
  }
  item.isActive = !item.isActive;
}
onMounted(() => {
  obtainViewer('mapscreen').then((viewer: any) => {
    setTimeout(() => {
    // 设置选中展示信息回调事件
      gisDpEvent.checkEvent = (visit: boolean, type: number, dataInfo: any) => {
        globalDaTaInffalg.value = visit;
        if (visit) {
          const glitInf = podataMenu[type - 1];
          globalDaTaInfContent.value = dataInfo;
          globalDaTaInftitle.value = glitInf.name;
          globalDaTaInfContentArr.value = glitInf.content;
        }
      };
      // 台站 1
      getDataProvisionEfficiency((res: any) => {
        // 索引从1开始
        const itemData = podataMenu[0];
        // 1. 映射为Entity配置数组（你的原有逻辑，保留）
        const list = res.map((item: any) => {
          return {
            id: `${item.id}-${itemData.type}`,
            type: itemData.type,
            position: [item.lon, item.lat],
            imageUrl: itemData.url,
            labelText: item.unitName ?? `台站${item.id}`,
            dataInf: item, // 传递完整数据
          };
        });

        addImageLabelEntity(viewer, list);
      });
      // H设施 2
      getAllNuclearfacility((res: any) => {
        res.forEach((item: any, iIndex: number) => {
          console.log(iIndex, '数据缩影');
          if (!item.longitude || !item.latitude) {
            console.warn(item, '数据经度、纬度属性为空');
            return '';
          }
          // 索引从1开始
          const itemData = podataMenu[1];
          if (itemData) {
            addImageLabelEntity(viewer, {
              id: `${item.id}-${itemData.type}`,
              type: itemData.type,
              position: [item.longitude, item.latitude],
              imageUrl: itemData.url,
              labelText: item.unitName ?? `核设施${item.id}`,
              dataInf: item,
            });
          }
          else {
            console.log(item);
          }
        });
      });
      // 研究型反应堆 3
      getAllResearchReactors((res: any) => {
        res.forEach((item: any, iIndex: number) => {
          console.log(iIndex, '数据缩影');
          if (!item.longitude || !item.latitude) {
            console.warn(item, '数据经度、纬度属性为空');
            return '';
          }
          // 索引从1开始
          const itemData = podataMenu[2];
          if (itemData) {
            addImageLabelEntity(viewer, {
              id: `${item.id}-${itemData.type}`,
              type: itemData.type,
              position: [item.longitude, item.latitude],
              imageUrl: itemData.url,
              labelText: item.facilityName ?? `研究型反应堆${item.id}`,
              dataInf: item,
            });
          }
          else {
            console.log(item);
          }
        });
      });
      // 后处理厂 4
      getAllNuclearFuelFacilitiy((res: any) => {
        res.forEach((item: any, iIndex: number) => {
          console.log(iIndex, '数据缩影');
          if (!item.longitude || !item.latitude) {
            console.warn(item, '数据经度、纬度属性为空');
            return '';
          }
          // 索引从1开始
          const itemData = podataMenu[3];
          if (itemData) {
            addImageLabelEntity(viewer, {
              id: `${item.id}-${itemData.type}`,
              type: itemData.type,
              position: [item.longitude, item.latitude],
              imageUrl: itemData.url,
              labelText: item.facilityName ?? `后处理厂${item.id}`,
              dataInf: item,
            });
          }
          else {
            console.log(item);
          }
        });
      });
      // 核试验 5
      getAllNuclearTestPlant((res: any) => {
        res.forEach((item: any, iIndex: number) => {
          console.log(iIndex, '数据缩影');
          if (!item.longitude || !item.latitude) {
            console.warn(item, '数据经度、纬度属性为空');
            return '';
          }
          // 索引从1开始
          const itemData = podataMenu[4];
          if (itemData) {
            addImageLabelEntity(viewer, {
              id: `${item.id}-${itemData.type}`,
              type: itemData.type,
              position: [item.longitude, item.latitude],
              imageUrl: itemData.url,
              labelText: item.name ?? `核试验${item.id}`,
              dataInf: item,
            });
          }
          else {
            console.log(item);
          }
        });
      });
      // 加速器 6
      getAllAccelerator((res: any) => {
        res.forEach((item: any, iIndex: number) => {
          console.log(iIndex, '数据缩影');
          if (!item.longitude || !item.latitude) {
            console.warn(item, '数据经度、纬度属性为空');
            return '';
          }
          // 索引从1开始
          const itemData = podataMenu[5];
          if (itemData) {
            addImageLabelEntity(viewer, {
              id: `${item.id}-${itemData.type}`,
              type: itemData.type,
              position: [item.longitude, item.latitude],
              imageUrl: itemData.url,
              labelText: item.facilityName ?? `加速器${item.id}`,
              dataInf: item,
            });
          }
          else {
            console.log(item);
          }
        });
      });
      // 海洋报警 7
      getAlarmRecords((res: any) => {
        res.forEach((item: any, iIndex: number) => {
          console.log(iIndex, '数据缩影');
          if (!item.longitude || !item.latitude) {
            console.warn(item, '数据经度、纬度属性为空');
            return '';
          }
          // 索引从1开始
          const itemData = podataMenu[6];
          if (itemData) {
            addImageLabelEntity(viewer, {
              id: `${item.id}-${itemData.type}`,
              type: itemData.type,
              position: [item.longitude, item.latitude],
              imageUrl: itemData.url,
              labelText: item.taskName ?? `海洋报警${item.id}`,
              dataInf: item,
            });
          }
          else {
            console.log(item);
          }
        });
      });
    }, 5000);
  });
});
</script>

<template>
  <div class="icon_container">
    <div v-for="(item, index) in svgList" :key="index" class="icon"
      :class="{ 'has-margin': item.isMargin, 'has-active': item.isActive }" @click.stop="handleIconClick(item)">
      <el-tooltip v-if="item.name !== 'pointData'" class="box-item" effect="dark" :content="item.tooltip"
        placement="left">
        <SvgIcon :name="item.isActive ? item.activeName : item.name" width="20" height="20" />
      </el-tooltip>
      <el-popover v-else title="设施类型" content="Left Center prompts info" placement="left" trigger="click"
        popper-class="right_M_Popover">
        <template #reference>
          <SvgIcon :name="item.isActive ? item.activeName : item.name" width="20" height="20" />
        </template>
        <div class="right_M">
          <div v-for="(v, i) in podataMenu" :key="i" class="right_MItem">
            <el-image style="width: 20px; height: 20px" :src="v.url" />
            <span class="right_Mtitle"> {{ v.name }}</span>
            <el-checkbox :checked="v.active" @change="podataMenuClick(v)" />
          </div>
        </div>
      </el-popover>
    </div>
    <div v-show="globalDaTaInffalg" class="info-gloal_gis">
      <div class="info-gloal_gis-header">
        {{ globalDaTaInftitle }}
      </div>
      <div v-for="(glDptItem, glDptItemI) in globalDaTaInfContentArr" :key="glDptItemI" class="info-gloal_gis-item">
        <div class="title">
          {{ glDptItem.value }}
        </div>
        <div>
          {{ globalDaTaInfContent[glDptItem.key] ?? "--" }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.icon_container {
  width: 32px;
  position: absolute;
  right: 10px;
  top: 10vh;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;

  .icon {
    width: 30px;
    height: 30px;
    background-color: #021a1d;
    border: solid 1px #0a544e;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background-color: #0a544e;
      transform: scale(1.05);
    }

    &.has-margin {
      margin-bottom: 8px;
    }

    &.has-active {
      background-color: #14a4b8;
      border: solid 1px #0a544e;
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &:hover {
        background-color: #021a1d;
        transform: none;
      }
    }
  }
}

.info-gloal_gis {
  position: absolute;
  right: 50px;
  top: -30px;
  width: auto;
  height: auto;
  color: #fff;
  text-align: center;
  justify-items: center;
  background-color: rgba(2, 26, 29, 0.9);
  padding: 10px 2px;
  border-radius: 5px;

  .info-gloal_gis-header {
    padding: 10px 0 20px 0;
    color: rgb(178, 135, 18);
  }

  .info-gloal_gis-item {
    width: 400px;
    display: flex;
    flex-direction: row;
    padding: 0 5px;

    .title {
      color: #6ebad0;
    }

    div {
      border: 1px solid #0a544e;
      width: 50%;
      padding: 10px;
      text-align: center;
      justify-items: center;
    }
  }
}

:deep(.el-popover) {
  .el-popover__title {
    color: aliceblue;
  }

  .el-popper.is-light,
  .el-popper.is-light>.el-popper__arrow:before {
    background: #021a1d !important;
    border: 1px solid #021a1d !important;
  }
}
</style>
