<template>
  <div id="oneMapIndex">
    <!-- 内容 -->
    <div id="oneMapBody">
      <!-- 顶部 -->
      <div
        id="oneMapHeader"
        :class="[
          'oneMapHeader',
          'animate__animated',
          showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
        ]"
      >
        <!-- 标题 -->
        <!-- <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" /> -->
        <div id="titleFont">
          {{
            userStore.ZhuanTiType == 1
              ? "延安市城市生命线安全运行监测系统"
              : "延安市海绵监测平台"
          }}
        </div>
        <!-- 标题左侧展示组件 -->
        <div class="Location">
          <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
            ><LocationFilled
          /></el-icon>
          延安
        </div>
        <div class="Timer">
          <span class="date">{{ dates }}</span>
          <span class="time">{{ times }}</span>
          <span class="date week">{{ weeks }}</span>
        </div>
        <div class="Wather"></div>
        <!-- 标题右侧功能组件 -->
        <router-link to="/index?type=FullScreen">
          <div class="goHome header_icon"></div>
        </router-link>
        <div class="goUser_com header_icon" @click="toRYBox"></div>
        <router-link to="/user/profile">
          <div class="goClose_com header_icon"></div>
        </router-link>
      </div>
      <!-- 地图组件 -->
      <OneMap
        @map-click="mapClick"
        v-if="AllData.MapShowBol"
        :loadCallback="mapLoad"
      ></OneMap>
      <!-- 桥梁BIM -->
      <WangJiaPingBIM
        v-if="!AllData.MapShowBol && AllData.ComShowID == 4"
      ></WangJiaPingBIM>
      <!-- 隧道BIM -->
      <Tunnel v-if="!AllData.MapShowBol && AllData.ComShowID == 5"></Tunnel>
      <!-- 降雨效果 -->
      <CanvasRain v-if="showRainFlow"></CanvasRain>
      <!-- 地图标注点弹窗popup -->
      <PopupInfo></PopupInfo>
      <!-- 动态信息 -->
      <dynamicInformation
        v-if="
          AllData.ComShowID != 4 &&
          AllData.ComShowID != 5 &&
          AllData.ComShowID != 6 &&
          AllData.ComShowID != 61 &&
          AllData.ComShowID != 62 &&
          AllData.ComShowID != 1 &&
          AllData.ComShowID != 7
        "
        :showPanel="showPanel"
      ></dynamicInformation>
      <!-- 左右面板展示隐藏-->
      <!-- <el-tooltip effect="dark" content="显隐面板" placement="top"> -->
      <img
        id="ShowComVs"
        :class="[showPanel ? 'ShowComVsTrue' : 'ShowComVsFalse']"
        @click="showPanel = !showPanel"
        :src="showPanel ? ZuoYou2 : ZuoYou1"
      />
      <!-- </el-tooltip> -->

      <!-- 图例 -->
      <img
        id="TuChengImg"
        src="@/assets/images/Sponge_screen/TuCheng.png"
        alt=""
        @click="ShowTuCheng = !ShowTuCheng"
        :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
        v-if="AllData.MapShowBol"
      />
      <LayerControl
        v-if="AllData.MapShowBol"
        :ShowTuCheng="ShowTuCheng"
        :showPanel="showPanel"
      ></LayerControl>
      <!-- 四色图图例 -->
      <img
        id="SiSeTu"
        src="@/assets/images/Sponge_screen/SiSeTu.png"
        :class="[showPanel ? 'SiSeTuTrue' : 'SiSeTuFalse']"
        v-if="AllData.SiSeTuBol"
      />
      <!-- 1:总体概览 -->
      <ComZTGL
        v-if="AllData.ComShowID == 1"
        :isActive="AllData.ComShowID == 1 ? true : false"
        :showPanel="showPanel"
      ></ComZTGL>
      <!-- 2:智慧燃气 -->
      <ComZHRQ
        v-if="AllData.ComShowID == 2"
        :isActive="AllData.ComShowID == 2 ? true : false"
        :showPanel="showPanel"
      ></ComZHRQ>
      <!-- 3:智慧排水 -->
      <ComZHPS
        v-if="AllData.ComShowID == 3"
        :isActive="AllData.ComShowID == 3 ? true : false"
        :showPanel="showPanel"
      ></ComZHPS>
      <!-- 4:智慧桥梁 -->
      <ComZHQL
        v-if="AllData.ComShowID == 4"
        :isActive="AllData.ComShowID == 4 ? true : false"
        :showPanel="showPanel"
      >
      </ComZHQL>
      <!-- 5:智慧隧道 -->
      <ComZHSD
        v-if="AllData.ComShowID == 5"
        :isActive="AllData.ComShowID == 5 ? true : false"
        :showPanel="showPanel"
      ></ComZHSD>
      <!-- 6:智慧海绵 -->
      <ComZHHM
        v-if="AllData.ComShowID == 6"
        :isActive="AllData.ComShowID == 6 ? true : false"
        :showPanel="showPanel"
      ></ComZHHM>
      <!-- 智慧海绵-监测分析 -->
      <ZHHMJCFX
        v-if="AllData.ComShowID == 61"
        :isActive="AllData.ComShowID == 61 ? true : false"
        :showPanel="showPanel"
      ></ZHHMJCFX>
      <!-- 智慧海绵-建设评估 -->
      <ZHHMJSPG
        v-if="AllData.ComShowID == 62"
        :isActive="AllData.ComShowID == 62 ? true : false"
        :showPanel="showPanel"
      ></ZHHMJSPG>
      <!-- 7:防洪排涝 -->
      <ComFHPL
        v-if="AllData.ComShowID == 7"
        :isActive="AllData.ComShowID == 7 ? true : false"
        :showPanel="showPanel"
      ></ComFHPL>
    </div>
    <!-- 底部菜单 -->
    <div id="BottomMenuBox">
      <Transition name="slide-fade">
        <div v-show="AllData.BottmBackGroundShow" class="BottmBackGround"></div>
      </Transition>
      <!-- 菜单List -->
      <div
        class="MenuList"
        :class="[
          'MenuList' + index,
          'animate__animated',
          showPanel2 ? 'animate__bounceInUp' : 'animate__bounceInUp',
        ]"
        v-for="(item, index) in AllData.MenuListData"
        @click="MenuClick(item, index)"
        v-if="BottomshowPanel"
        @mouseenter="handleMouseEnter(item)"
        @mouseleave="handleMouseLeave(item)"
      >
        <img class="MenuImg" v-if="AllData.AC_MenuIndex == item.id" :src="item.AC_icon" />
        <img class="MenuImg" v-else :src="item.iocn" />
        <div class="MenuFont" :class="AllData.AC_MenuIndex == item.id ? 'AC_Font' : ''">
          {{ item.name }}

          <!-- 二级菜单 -->
          <!-- <Transition name="slide-fade2"> -->
          <div
            v-show="AllData.ErJiMenuShowID == item.id && !!item.children"
            class="ErJiMenuBox"
          >
            <span
              class="ErJiMenuList"
              :class="AllData.ErJiMenuCheckID == item2.id ? 'ErJiMenuCheck' : ''"
              v-for="item2 in item.children"
              @click.stop="ErJiMenuClick(item, item2)"
            >
              {{ item2.name }}
            </span>
          </div>
          <!-- </Transition> -->
        </div>
      </div>
    </div>

    <!-- 语音组件 -->
    <Voice :ComShowID="AllData.ComShowID"></Voice>
  </div>
  <!-- 融云弹窗 -->
  <ModelRongYun
    :RYdialogShow="AllData.RYDialog"
    :ZhuDongBoHao="AllData.ZhuDongBoHao"
    @OneDialogHide="dialogHide"
  ></ModelRongYun>
  <!-- 前端组件公共弹窗 -->
  <el-dialog
    modal-class="publicDialogVisible"
    v-model="dialogConfig.visible"
    :title="dialogConfig.title"
    width="1400px"
    :append-to-body="true"
    :destroy-on-close="true"
    :draggable="true"
    @closed="handleClosed"
  >
    <DialogTabs
      :dataID="dialogConfig.getSiteId"
      :SiteNo="dialogConfig.SiteNo"
      :comIDs="dialogConfig.comIDs"
      :customComponents="dialogConfig.customData"
      :RefName="dialogConfig.RefName"
    ></DialogTabs>
  </el-dialog>
</template>

<script setup name="oneMapIndex">
import bus from "@/bus";
import request from "@/utils/request";
import { fullscreenToggel } from "@/utils/util";
import { ref, reactive, toRefs, onMounted } from "vue";

import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
// 菜单的图片资源
import ZTGL from "@/assets/images/Sponge_screen/menu/ZTGL.png";
import AC_ZTGL from "@/assets/images/Sponge_screen/menu/AC_ZTGL.png";
import ZHRQ from "@/assets/images/Sponge_screen/menu/ZHRQ.png";
import AC_ZHRQ from "@/assets/images/Sponge_screen/menu/AC_ZHRQ.png";
import ZHPS from "@/assets/images/Sponge_screen/menu/ZHPS.png";
import AC_ZHPS from "@/assets/images/Sponge_screen/menu/AC_ZHPS.png";
import ZHQL from "@/assets/images/Sponge_screen/menu/ZHQL.png";
import AC_ZHQL from "@/assets/images/Sponge_screen/menu/AC_ZHQL.png";
import ZHSD from "@/assets/images/Sponge_screen/menu/ZHSD.png";
import AC_ZHSD from "@/assets/images/Sponge_screen/menu/AC_ZHSD.png";
import ZHHM from "@/assets/images/Sponge_screen/menu/ZHHM.png";
import AC_ZHHM from "@/assets/images/Sponge_screen/menu/AC_ZHHM.png";
import JSPG from "@/assets/images/Sponge_screen/menu/JSPG.png";
import AC_JSPG from "@/assets/images/Sponge_screen/menu/AC_JSPG.png";
import JCFX from "@/assets/images/Sponge_screen/menu/JCFX.png";
import AC_JCFX from "@/assets/images/Sponge_screen/menu/AC_JCFX.png";
// 引用地图
import OneMap from "./map/newfiberMapBox.vue";

// 引用王家坪大桥BIm
import WangJiaPingBIM from "./BIM/WangJiaPIng.vue";
// 引用隧道BIm
import Tunnel from "./BIM/Tunnel.vue";
// 引用语音识别
import Voice from "./../voice/recordPage/index.vue";
// 引入融云通讯录
import ModelRongYun from "@/views/RongyunCommunication/ModelRongYun/index.vue"; //融云调用
// 子系统引入
import ComZTGL from "./components/ZTGL.vue"; //总体概览
import ComZHRQ from "./components/ZHRQ.vue"; //智慧燃气
import ComZHPS from "./components/ZHPS.vue"; //智慧排水
import ComZHQL from "./components/ZHQL.vue"; //智慧桥梁
import ComZHSD from "./components/ZHSD.vue"; //智慧隧道
import ComZHHM from "./components/ZHHM.vue"; //智慧海绵
import ComFHPL from "./components/FHPL.vue"; //防洪排涝
import ZHHMJCFX from "./components/ZHHM_JCFX.vue"; //智慧海绵-监测分析
import ZHHMJSPG from "./components/ZHHM_JSPG.vue"; //智慧海绵-建设评估
import PopupInfo from "@/views/oneMap/components/mapboxPopup.vue"; //地图标注点弹窗
import dynamicInformation from "@/views/oneMap/components/dynamicInformation.vue"; //地图标注点弹窗
// 降雨效果
import CanvasRain from "@/views/oneMap/cityGK/canvasRain.vue"; //降雨效果
// 图层控制面板
import LayerControl from "@/views/oneMap/LayerControl/LayerControl.vue"; //图层控制面板
// 前端共同弹窗
import DialogTabs from "@/views/DialogTabs/dialogTabs.vue";
// 左右滑动
import ZuoYou1 from "@/assets/images/Sponge_screen/ZuoYou1.png";
import ZuoYou2 from "@/assets/images/Sponge_screen/ZuoYou2.png";
import xtb_img from "@/assets/newImgs/selectedLocation.png";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
// 公共弹窗保存的数据
import dialogTabsStore from "@/store/modules/dialogTabs";

const useDialogTabs = dialogTabsStore();

// 时间以及天气
const timer = ref(null);
const dates = ref(null);
const weeks = ref(null);
const times = ref(null);
const weather = ref({
  temperature: null,
  imgNum: "",
  text: "",
});
const showPanel = ref(false);
const showPanel2 = ref(false);
const ShowTuCheng = ref(false); //图层面板显隐
const AllData = reactive({
  SiSeTuBol: false, //四色图图例
  MapShowBol: true, //是否展示中心地图
  MenuListData: [
    // {
    //   name: "总体概览",
    //   iocn: ZTGL,
    //   AC_icon: AC_ZTGL,
    //   id: 1,
    //   Layers: ["路网", "河流水系"],
    // },
    // {
    //   name: "智慧燃气",
    //   iocn: ZHRQ,
    //   AC_icon: AC_ZHRQ,
    //   id: 2,
    //   Layers: ["干管", "主管", "干管流向", "主管流向"],
    // },
    // {
    //   name: "智慧排水",
    //   iocn: ZHPS,
    //   AC_icon: AC_ZHPS,
    //   id: 3,
    //   Layers: ["雨水管网", "污水管网"],
    // },
    // {
    //   name: "智慧海绵",
    //   iocn: ZHHM,
    //   AC_icon: AC_ZHHM,
    //   id: 6,
    //   children: [
    //     {
    //       name: "城市概览",
    //       id: 6,
    //       Layers: [],
    //     },
    //     {
    //       name: "监测分析",
    //       id: 61,
    //       Layers: [],
    //     },
    //     {
    //       name: "建设评估",
    //       id: 62,
    //       Layers: [],
    //     },
    //   ],
    // },
    // {
    //   name: "智慧桥梁",
    //   iocn: ZHQL,
    //   AC_icon: AC_ZHQL,
    //   id: 4,
    //   Layers: [],
    // },
    // {
    //   name: "智慧隧道",
    //   iocn: ZHSD,
    //   AC_icon: AC_ZHSD,
    //   id: 5,
    //   Layers: [],
    // },
    // {
    //   name: "防汛排涝",
    //   iocn: FXPL,
    //   AC_icon: AC_FXPL,
    //   id: 7,
    //   Layers: [],
    // },
  ],
  AC_MenuIndex: 1, //一级菜单选中的ID
  BottmBackGroundShow: false,
  RYDialog: false,
  ZhuDongBoHao: false,
  ErJiMenuShowID: null,
  ErJiMenuCheckID: null, //二级菜单选中的ID
  ComShowID: 1, //最终展示组件的ID
});
// 降雨效果
const showRainFlow = ref(false);
const BottomshowPanel = ref(true);
// 公共弹窗
const dialogConfig = reactive({
  visible: false,
  getSiteId: "",
  SiteNo: "",
  data: {},
  comIDs: ["spjk"],
  customData: [],
  RefName: "",
  title: "详情",
});
onBeforeMount(() => {
  console.log("ZhuanTiType", userStore.ZhuanTiType);
  if (userStore.ZhuanTiType == 1) {
    // 城市生命线
    AllData.MenuListData = [
      {
        name: "总体概览",
        iocn: ZTGL,
        AC_icon: AC_ZTGL,
        id: 1,
        moduleType: "",
        Layers: ["路网", "河流水系", "三维建筑"],
      },
      {
        name: "燃   气",
        iocn: ZHRQ,
        AC_icon: AC_ZHRQ,
        id: 2,
        moduleType: "Gas",
        Layers: ["干管", "主管", "干管流向", "主管流向", "燃气监测"],
      },
      {
        name: "排   水",
        iocn: ZHPS,
        AC_icon: AC_ZHPS,
        id: 3,
        moduleType: "drainage",
        Layers: ["排水监测", "雨水管网流向"],
        children: [
          {
            name: "排水分析",
            id: 3,
            moduleType: "drainage",
            Layers: [],
          },
          {
            name: "防汛排涝",
            id: 7,
            moduleType: "flood_drainage",
            Layers: [],
          },
        ],
      },
      {
        name: "桥    梁",
        iocn: ZHQL,
        AC_icon: AC_ZHQL,
        id: 4,
        moduleType: "bridge",
        Layers: [],
      },
      {
        name: "隧    道",
        iocn: ZHSD,
        AC_icon: AC_ZHSD,
        id: 5,
        moduleType: "tunnel",
        Layers: [],
      },
    ];
  } else if (userStore.ZhuanTiType == 2) {
    // 海绵
    AllData.MenuListData = [
      {
        name: "城市概览",
        iocn: ZHHM,
        AC_icon: AC_ZHHM,
        id: 6,
      },
      {
        name: "监测分析",
        iocn: JCFX,
        AC_icon: AC_JCFX,
        id: 61,
      },
      {
        name: "建设评估",
        iocn: JSPG,
        AC_icon: AC_JSPG,
        id: 62,
      },
    ];
  }
  // 默认选中展示第一个菜单
  AllData.AC_MenuIndex = AllData.MenuListData[0].id;
  AllData.ComShowID = AllData.MenuListData[0].id;
});
onMounted(() => {
  fullscreenToggel();
  AllData.BottmBackGroundShow = true;
  console.log(AllData.BottmBackGroundShow, "AllData.BottmBackGroundShow");
  bus.emit("BottomHidden", AllData.BottmBackGroundShow);
  // 降雨特征点击
  bus.on("checkRainL", (params) => {
    if (params == 1) {
      showRainFlow.value = false;
    } else {
      showRainFlow.value = true;
    }
  });
  // 底部隐藏
  bus.on("checkBottom", (params) => {
    if (params == 1) {
      BottomshowPanel.value = false;
    } else {
      BottomshowPanel.value = true;
    }
  });
  // 共同弹窗触发事件
  bus.on("publicDialog", (params) => {
    dialogConfig.getSiteId = params.getSiteId;
    dialogConfig.SiteNo = params.SiteNo;
    dialogConfig.RefName = params.RefName;
    dialogConfig.title = params.title ?? "详情";
    dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
    // 打开弹窗
    dialogConfig.visible = true;
  });
  // 共同弹窗触发事件
  bus.on("publicDialog_Close", (params) => {
    // 打开弹窗
    dialogConfig.visible = false;
  });
  // 获取天气
  getWeather();
  // 获取时间
  currentTime();
  //initRainImage();
  // 打开融云通讯录主动拨号
  bus.on("OpenRY", (params) => {
    // AllData.ZhuDongBoHao = true;
    AllData.RYDialog = true;
    bus.emit("showRy");
  });

  // 切换专题图
  bus.on("ChangeZhuanTiTu", (params) => {
    if (params.num == 1) {
      // 一级
      MenuClick(params.MenuData1);
    } else if (params.num == 2) {
      // 二级
      ErJiMenuClick(params.MenuData1, params.MenuData2);
    }
  });
  // 切换面板显示隐藏
  bus.on("changeShowPanel", (params) => {
    showPanel.value = params;
  });
  // 四色图图例显示隐藏
  bus.on("SiSeTuBol", (params) => {
    AllData.SiSeTuBol = params;
  });
});
onBeforeUnmount(() => {
  bus.off("BottomHidden");
  bus.off("publicDialog");
  bus.off("publicDialog_Close");
  bus.off("OpenRY");
  bus.off("ChangeZhuanTiTu");
  bus.off("checkRainL");
  bus.off("changeShowPanel");
  bus.off("SiSeTuBol");
});
// 菜单点击
const MenuClick = (item, index) => {
  ShowTuCheng.value = false;
  showRainFlow.value = false;
  showPanel.value = false;
  // 传递模块类型
  if (item.moduleType) {
    useDialogTabs.setModuleType(item.moduleType);
  }
  // 改变菜单选中索引
  AllData.AC_MenuIndex = item.id;
  // 二级也选中一级菜单默认展示的那个
  AllData.ErJiMenuCheckID = item.id;
  // 最终展示的组件ID
  AllData.ComShowID = item.id;
  // 当选择的是智慧桥梁时 将隐藏地图展示BIM
  if (AllData.ComShowID == 4 || AllData.ComShowID == 5) {
    AllData.MapShowBol = false;
  } else {
    AllData.MapShowBol = true;
    // 点击菜单时隐藏所有图层
    bus.emit("clearAllLayer");
    // 打开默认的菜单
    bus.emit("SetLayerShow", item.Layers);
  }
};
// 二级菜单点击
const ErJiMenuClick = (item, item2) => {
  ShowTuCheng.value = false;
  showRainFlow.value = false;
  AllData.SiSeTuBol = false;
  console.log(22);
  // 传递模块类型
  if (item.moduleType) {
    useDialogTabs.setModuleType(item.moduleType);
  }
  // 改变菜单选中索引
  AllData.AC_MenuIndex = item.id;
  // 二级也选中点击的那个
  AllData.ErJiMenuCheckID = item2.id;
  // 最终展示的组件ID
  AllData.ComShowID = item2.id;
};
// 打开融云通讯录
const toRYBox = () => {
  AllData.RYDialog = true;
  AllData.ZhuDongBoHao = false;
  bus.emit("showRy");
};
// 关闭融云通讯录弹窗
const dialogHide = (val) => {
  if (!val) {
    AllData.RYDialog = false;
    AllData.ZhuDongBoHao = false;
  }
};
//地图点击事件
const mapClick = async (point, properties, feature) => {
  console.log("point", point);
  console.log("properties", properties);
  console.log("feature---", feature);
  if (!feature) {
    let currentZoom = newfiberMapbox.map.getZoom();
    console.log("currentZoom--", currentZoom);
    if (currentZoom >= 18) {
      let clickPoint = turf.point(point);
      let positionAddress = "";
      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
      console.log("clickPoint---", clickPoint, clickPoint.geometry.coordinates);
      let data = await request({
        url: `/bdApi//baiduservice/panorama`,
        method: "GET",
        params: {
          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
          fov: 180,
          height: 256,
          width: 512,
        },
      });
      if (data && data.data) {
        data.data.base64 = "data:image/jpeg;base64," + data.data.base64;
      }
      console.log("data----", data);
      gcoord.transform(clickPoint, gcoord.BD09, gcoord.WGS84);
      gcoord.transform(clickPoint, gcoord.WGS84, gcoord.GCJ02);
      let regeodata = await request({
        url: `/amap/v3/geocode/regeo`,
        method: "GET",
        params: {
          location: `${clickPoint.geometry.coordinates[0]},${clickPoint.geometry.coordinates[1]}`,
          key: "76eac14980622704ba95c1bf080f3b4c",
          radius: 100,
          extensions: "all",
          output: "json",
        },
      });
      if (regeodata.info === "OK") {
        console.log("坐标返地名data----", data);
        positionAddress = regeodata.regeocode.formatted_address;
      }
      gcoord.transform(clickPoint, gcoord.GCJ02, gcoord.WGS84);
      mapBoxVectorLayer.removeByIds(["clickPoint"]);
      mapBoxVectorLayer.addGeojsonSymbol(
        "clickPoint",
        turf.featureCollection([clickPoint]),
        xtb_img,
        0.8
      );
      data.roadName = positionAddress;
      bus.emit("popupcontent", {
        popupShow: true,
        point: point,
        popupInfo: data,
      });
    } else {
      mapBoxVectorLayer.removeByIds(["clickPoint"]);
      bus.emit("closeCesiumPopup");
    }
  }
  if (properties) {
    if (feature == "rq_pipeline_info") {
      if (!!newfiberMapbox.getLayerByName("rqLine")) {
        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
      }
      let rqLine = turf.featureCollection([
        turf.feature(Terraformer.WKT.parse(properties.geometry)),
      ]);
      let layer = new mapboxL7.LineLayer({
        name: "rqLine",
      })
        .source(rqLine)
        .size(4)
        .shape("line")
        .texture("arrow")
        .color("rgb(241, 159, 27)")
        .animate({
          interval: 2, // 间隔
          duration: 2, // 持续时间，延时
          trailLength: 3, // 流线长度
        })
        .style({
          opacity: 1,
          lineTexture: true, // 开启线的贴图功能
          iconStep: 50, // 设置贴图纹理的间距
          borderWidth: 0, // 默认文 0，最大有效值为 0.5
          borderColor: "#fff", // 默认为 #ccc
        });
      newfiberMapbox.addLayer(layer);
    }
    bus.emit("popupcontent", {
      popupShow: true,
      point: point,
      popupInfo: properties,
    });
  }
};

// 获取当前时间
const formatTime = () => {
  let date = new Date();
  let year = date.getFullYear(); // 年
  let month = date.getMonth() + 1; // 月
  let day = date.getDate(); // 日
  let hour = date.getHours(); // 时
  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
  let minute = date.getMinutes(); // 分
  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
  let second = date.getSeconds(); // 秒
  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
  let weekAry = new Array(
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  );
  weeks.value = weekAry[date.getDay()];
  dates.value = `${year}-${month}-${day}`;
  times.value = `${hour}:${minute}:${second}`;
};
const currentTime = () => {
  clearInterval(timer.value);
  timer.value = setInterval(() => {
    formatTime();
  }, 500);
};
// 获取天气
const getWeather = async () => {
  // let res = await getAppService();
  // if (res.code == 200) {
  //   weather.value.temperature = res.data.tempFc;
  //   weather.value.imgNum = new URL(
  //     `/src/assets/images/weather_icon/icon__${res.data.code}.png`,
  //     import.meta.url
  //   ).href;
  // }
};
// 二级菜单展示
const handleMouseEnter = (item) => {
  AllData.ErJiMenuShowID = item.id;
};
// 二级菜单展示
const handleMouseLeave = (item) => {
  AllData.ErJiMenuShowID = null;
};

const mapLoad = () => {
  //mapBoxVectorLayer.load3DTiles();
};

// 公共弹窗关闭后事件
const handleClosed = () => {
  console.log("clear all");

  useDialogTabs.clear();
};
</script>

<style lang="scss" scoped>
#oneMapIndex {
  width: 100%;
  height: 100vh;
  background: black;
  position: relative;

  #oneMapBody {
    width: 100%;
    height: 100vh;
    background: rgba(255, 192, 203, 0.304);
    // margin-top: -30px;
    z-index: 99;
    position: relative;

    #oneMapHeader {
      width: 100%;
      height: 100px;
      background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
      background-size: cover;
      z-index: 100;
      position: absolute;
      top: 0;
      left: 0;
      #titleFont {
        width: 634px;
        height: 47px;
        position: absolute;
        left: 50%;
        margin-left: -317px;
        top: 20px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 38px;
        color: #ffffff;
        line-height: 47px;
        // text-shadow: 0px 2px 8px rgba(0, 83, 95, 0.9);
        font-style: italic;

        background: linear-gradient(0deg, aqua 0%, #ffffff 80%, #ffffff 100%);

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
      }

      .Location {
        position: absolute;
        top: 15px;
        left: 20px;
        height: 15px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 13px;
        font-style: italic;
        height: 18px;
        line-height: 18px;
        display: inline-block;
      }
      .Timer {
        position: absolute;
        top: 15px;
        left: 90px;
        height: 18px;
        line-height: 18px;

        .time {
          display: inline-block;
          width: auto;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          height: 18px;
          line-height: 18px;
          font-style: italic;
          margin: 0 10px;
        }

        .date {
          display: inline-block;
          width: auto;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          height: 18px;
          line-height: 18px;
          font-style: italic;
        }
      }

      .header_icon {
        width: 22px;
        height: 22px;
        position: absolute;
        top: 10px;
        cursor: pointer;
      }
      .goHome {
        background: url("@/assets/images/Sponge_screen/gb_btn.png") no-repeat center;
        background-size: contain;
        right: 150px;
      }
      .goUser_com {
        background: url("@/assets/images/Sponge_screen/hs_btn.png") no-repeat center;
        background-size: contain;
        right: 100px;
      }
      .goClose_com {
        background: url("@/assets/images/Sponge_screen/sy_btn.png") no-repeat center;
        background-size: contain;
        right: 50px;
      }
    }

    #TuChengImg {
      width: 36px;
      height: 36px;
      position: absolute;
      right: 470px;
      top: 100px;
      cursor: pointer;
    }
    .TuChengImgTrue {
      transform: translateX(460px);
      transition: all 1s ease;
    }
    .TuChengImgFalse {
      transform: translateX(0px);
      transition: all 1s ease;
    }

    #SiSeTu {
      width: 37px;
      height: 126px;
      position: absolute;
      right: 480px;
      bottom: 100px;
      z-index: 90;
    }
    .SiSeTuTrue {
      transform: translateX(480px);
      transition: all 1s ease;
    }
    .SiSeTuFalse {
      transform: translateX(10px);
      transition: all 1s ease;
    }
    #ShowComVs {
      position: absolute;
      left: 0px;
      top: 300px;
      width: 40px;
      height: 40px;
      // background: #00cee0;
      cursor: pointer;
    }

    .ShowComVsTrue {
      transform: translateX(10px);
      transition: all 1s ease;
    }
    .ShowComVsFalse {
      transform: translateX(460px);
      transition: all 0.8s ease;
    }
  }
  #BottomMenuBox {
    position: absolute;
    bottom: 0;
    width: 952px;
    height: 93px;
    left: 50%;
    margin-left: -476px;
    z-index: 999;

    .BottmBackGround {
      position: absolute;
      bottom: 0;
      width: 952px;
      height: 53px;
      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
      background-size: cover;
    }
    // 图标菜单样式 从左到右按照顺序进行设定
    .MenuList {
      position: absolute;
      width: 156;
      height: 48px;
      text-align: center;
      cursor: pointer;
      .MenuImg {
        width: 156px;
        height: 48px;
        position: absolute;
      }
      .MenuFont {
        margin: 0;
        padding: 0;
        display: inline-block;
        width: 156px;
        height: 48px;
        line-height: 46px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        text-shadow: 0px 0px 20px #00303c;
        position: relative;
        box-sizing: border-box;
        padding-left: 30px;
        .ErJiMenuBox {
          position: absolute;
          bottom: 50px;
          left: 4px;
          font-size: 0;
          line-height: 0;
          text-align: center;
          display: flex;
          align-items: center;
          width: 147px;
          height: auto;
          flex-direction: column;

          .ErJiMenuList {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            text-shadow: 0px 0px 20px #00303c;
            height: 40px;
            line-height: 40px;
            display: inline-block;
            margin: 5px 0;
            width: 147px;
            background: linear-gradient(
              0deg,
              rgba(1, 86, 126, 1) 0%,
              rgba(43, 123, 159, 0.8) 100%
            );
            border-radius: 20px;
            &:hover {
              color: #ffd97f;
            }
          }
          .ErJiMenuCheck {
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #ffd97f;
            background: linear-gradient(
              0deg,
              rgba(1, 86, 126, 1) 0%,
              rgba(43, 123, 159, 1) 100%
            );
          }

          .ErJiMenuJT {
            width: 28px;
            height: 21px;
            margin-bottom: 10px;
          }
        }
      }
      .AC_Font {
        color: #ffd97f;
      }
    }
    .MenuList3 {
      left: 38px;
      top: 26px;
    }
    .MenuList1 {
      left: 218px;
      top: 13px;
    }
    .MenuList0 {
      left: 398px;
      top: 0px;
    }
    .MenuList2 {
      left: 578px;
      top: 13px;
    }
    .MenuList4 {
      left: 758px;
      top: 26px;
    }
  }
}

/*
      进入和离开动画可以使用不同
      持续时间和速度曲线。
    */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(80px);
  opacity: 0;
}
</style>

<style lang="scss">
.publicDialogVisible {
  .el-dialog {
    // background: rgba(14, 69, 89, 0.9);
    background: rgba(13, 42, 84, 0.9);
    height: 800px;
    border: 1px solid rgba(21, 140, 253, 1);
    .el-dialog__header {
      background: url("@/assets/images/Sponge_screen/DialogTitleBG.png") no-repeat center;
      background-size: cover;
      padding: 0;
      height: 60px;
      margin: 0;
      .el-dialog__title {
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 24px;
        color: #ebfeff;
        height: 60px;
        line-height: 60px;
        margin-left: 40px;
      }
    }

    .el-dialog__body {
      width: 100%;
      height: calc(100% - 60px);
    }
  }
}
</style>