<template>
  <div id="oneMapIndex">
    <!-- 顶部 -->
    <div
      id="oneMapHeader"
      :class="['oneMapHeader', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']"
    >
      <!-- 标题 -->
      <img id="titleFont" src="@/assets/images/Sponge_screen/oneMapTitleFont.png" />
      <!-- 标题左侧展示组件 -->
      <div class="Timer"></div>
      <div class="Wather"></div>
      <!-- 标题右侧功能组件 -->
      <router-link to="/index">
        <div class="goHome header_icon"></div>
      </router-link>
      <div class="goUser_com header_icon" @click="toRYBox"></div>
      <div class="goClose_com header_icon"></div>
    </div>
    <!-- 内容 -->
    <div id="oneMapBody">
      <!-- 地图组件 -->
      <OneMap @map-click="mapClick" v-if="AllData.MapShowBol"></OneMap>
      <!-- 桥梁BIM -->
      <WangJiaPingBIM v-if="!AllData.MapShowBol && AllData.AC_MenuIndex == 4"></WangJiaPingBIM>
      <!-- 降雨效果 -->
      <CanvasRain v-if="showRainFlow"></CanvasRain>
      <!-- 地图标注点弹窗popup -->
      <PopupInfo></PopupInfo>
      <!-- 前端专题组件 -->
      <!-- <transition name="fade" mode="out-in"> </transition> -->
      <!-- 图例 -->
      <img id="TuChengImg" src="@/assets/images/Sponge_screen/TuCheng.png" alt="" @click="ShowTuCheng = !ShowTuCheng" />
      <LayerControl :ShowTuCheng="ShowTuCheng"></LayerControl>
      <!-- 1:总体概览 -->
      <ComZTGL
        v-if="AllData.AC_MenuIndex == 1"
        :isActive="AllData.AC_MenuIndex == 1 ? true : false"
        :showPanel="showPanel"
      ></ComZTGL>
      <!-- 2:智慧燃气 -->
      <ComZHRQ
        v-if="AllData.AC_MenuIndex == 2"
        :isActive="AllData.AC_MenuIndex == 2 ? true : false"
        :showPanel="showPanel"
      ></ComZHRQ>
      <!-- 3:智慧排水 -->
      <ComZHPS
        v-if="AllData.AC_MenuIndex == 3"
        :isActive="AllData.AC_MenuIndex == 3 ? true : false"
        :showPanel="showPanel"
      ></ComZHPS>
      <!-- 4:智慧桥梁 -->
      <ComZHQL v-if="AllData.AC_MenuIndex == 4" :isActive="AllData.AC_MenuIndex == 4 ? true : false" :showPanel="showPanel">
      </ComZHQL>
      <!-- 5:智慧隧道 -->
      <ComZHSD
        v-if="AllData.AC_MenuIndex == 5"
        :isActive="AllData.AC_MenuIndex == 5 ? true : false"
        :showPanel="showPanel"
      ></ComZHSD>
      <!-- 6:智慧海绵 -->
      <ComZHHM
        v-if="AllData.AC_MenuIndex == 6"
        :isActive="AllData.AC_MenuIndex == 6 ? true : false"
        :showPanel="showPanel"
      ></ComZHHM>
      <!-- 7:防洪排涝 -->
      <ComFHPL
        v-if="AllData.AC_MenuIndex == 7"
        :isActive="AllData.AC_MenuIndex == 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', showPanel ? 'animate__bounceInUp' : 'animate__bounceInUp']"
        v-for="(item, index) in AllData.MenuListData"
        @click="MenuClick(item, index)"
        v-if="BottomshowPanel"
      >
        <img class="MenuImg" v-if="AllData.AC_MenuIndex == item.id" :src="item.AC_icon" />
        <img class="MenuImg" v-else :src="item.iocn" />
        <p class="MenuFont" :class="AllData.AC_MenuIndex == item.id ? 'AC_Font' : ''">
          {{ item.name }}
        </p>
      </div>
    </div>

    <!-- 语音组件 -->
    <Voice></Voice>
  </div>
  <!-- 融云弹窗 -->
  <ModelRongYun :RYdialogShow="AllData.RYDialog" @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"
  >
    <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 { fullscreenToggel } from '@/utils/util';
import { ref, reactive, toRefs, onMounted } from 'vue';
// 菜单的图片资源
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 FXPL from '@/assets/images/Sponge_screen/menu/FXPL.png';
import AC_FXPL from '@/assets/images/Sponge_screen/menu/AC_FXPL.png';
import ZHHM from '@/assets/images/Sponge_screen/menu/ZHHM.png';
import AC_ZHHM from '@/assets/images/Sponge_screen/menu/AC_ZHHM.png';
// 引用地图
import OneMap from './map/newfiberMapBox.vue';
// 引用王家坪大桥BIm
import WangJiaPingBIM from './BIM/WangJiaPIng.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 PopupInfo from '@/views/oneMap/components/mapboxPopup.vue'; //地图标注点弹窗
// 降雨效果
import CanvasRain from '@/views/oneMap/cityGK/canvasRain.vue'; //降雨效果
// 图层控制面板
import LayerControl from '@/views/oneMap/LayerControl/LayerControl.vue'; //图层控制面板
// 前端共同弹窗
import DialogTabs from '@/views/DialogTabs/dialogTabs.vue';

const showPanel = ref(false);
const ShowTuCheng = ref(false); //图层面板显隐
const AllData = reactive({
  MapShowBol: true, //是否展示中心地图
  MenuListData: [
    {
      name: '总体概览',
      iocn: ZTGL,
      AC_icon: AC_ZTGL,
      id: 1,
    },
    {
      name: '智慧燃气',
      iocn: ZHRQ,
      AC_icon: AC_ZHRQ,
      id: 2,
    },
    {
      name: '智慧排水',
      iocn: ZHPS,
      AC_icon: AC_ZHPS,
      id: 3,
    },
    {
      name: '智慧海绵',
      iocn: ZHHM,
      AC_icon: AC_ZHHM,
      id: 6,
    },
    {
      name: '智慧桥梁',
      iocn: ZHQL,
      AC_icon: AC_ZHQL,
      id: 4,
    },
    {
      name: '智慧隧道',
      iocn: ZHSD,
      AC_icon: AC_ZHSD,
      id: 5,
    },
    {
      name: '防汛排涝',
      iocn: FXPL,
      AC_icon: AC_FXPL,
      id: 7,
    },
  ],
  AC_MenuIndex: 1,
  BottmBackGroundShow: false,
  RYDialog: false,
});
// 降雨效果
const showRainFlow = ref(false);
const BottomshowPanel = ref(true);
// 公共弹窗
const dialogConfig = reactive({
  visible: false,
  getSiteId: '',
  SiteNo: '',
  data: {},
  comIDs: ['spjk'],
  customData: [],
  RefName: '',
  title: '详情',
});
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.visible = true;
    dialogConfig.title = params.title ?? '详情';
    dialogConfig.comIDs = params.comIDs ?? dialogConfig.comIDs;
  });
});
onBeforeUnmount(() => {
  bus.off('BottomHidden');
  bus.off('publicDialog');
});
// 菜单点击
const MenuClick = (item, index) => {
  // 改变菜单选中索引
  AllData.AC_MenuIndex = item.id;
  // 当选择的是智慧桥梁时 将隐藏地图展示BIM
  if (AllData.AC_MenuIndex == 4) {
    AllData.MapShowBol = false;
  } else {
    AllData.MapShowBol = true;
  }
};
// 打开融云通讯录
const toRYBox = () => {
  AllData.RYDialog = true;
  bus.emit('showRy');
};
// 关闭融云通讯录弹窗
const dialogHide = val => {
  if (!val) {
    AllData.RYDialog = false;
  }
};
//地图点击事件
const mapClick = async (point, properties, feature) => {
  console.log('point', point);
  console.log('properties', properties);
  console.log('feature---', feature);
  if (properties) {
    if (feature == 'rq_pipeline_info') {
      if (!!newfiberMapbox.getLayerByName('rqLine')) {
        newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName('rqLine'));
      }
      properties.pumpName = '燃气管线';
      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,
    });
  }
};
</script>

<style lang="scss" scoped>
#oneMapIndex {
  width: 100%;
  height: 100%;
  background: black;
  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;
    }

    .header_icon {
      width: 22px;
      height: 22px;
      position: absolute;
      top: 10px;
      cursor: pointer;
    }
    .goHome {
      background: url('@/assets/images/Sponge_screen/sy_btn.png') no-repeat center;
      right: 150px;
    }
    .goUser_com {
      background: url('@/assets/images/Sponge_screen/hs_btn.png') no-repeat center;
      right: 100px;
    }
    .goClose_com {
      background: url('@/assets/images/Sponge_screen/gb_btn.png') no-repeat center;
      right: 50px;
    }
  }
  #oneMapBody {
    width: 100%;
    height: 100vh;
    // background: rgba(255, 192, 203, 0.304);
    z-index: 99;
    position: relative;
    box-sizing: border-box;

    #TuChengImg {
      width: 36px;
      height: 36px;
      position: absolute;
      right: 470px;
      top: 100px;
      cursor: pointer;
    }
  }
  #BottomMenuBox {
    position: absolute;
    bottom: 0;
    width: 952px;
    height: 162px;
    left: 50%;
    margin-left: -476px;
    z-index: 999;

    .BottmBackGround {
      position: absolute;
      bottom: 0;
      width: 952px;
      height: 62px;
      background: url('@/assets/images/Sponge_screen/menu/DB_img.png') no-repeat center;
      background-size: cover;
    }
    // 图标菜单样式 从左到右按照顺序进行设定
    .MenuList {
      position: absolute;
      width: 100px;
      height: 110px;
      text-align: center;
      cursor: pointer;
      .MenuImg {
        width: 83px;
        height: 66px;
      }
      .MenuFont {
        margin: 0;
        padding: 0;
        display: inline-block;
        width: 100%;
        height: 44px;
        line-height: 44px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        font-size: 20px;
        color: #ffffff;
        text-shadow: 0px 0px 20px #00303c;
      }
      .AC_Font {
        color: #ffd97f;
      }
    }
    .MenuList0 {
      left: 70px;
      top: 39px;
    }
    .MenuList1 {
      left: 190px;
      top: 26px;
    }
    .MenuList2 {
      left: 310px;
      top: 13px;
    }
    .MenuList3 {
      left: 430px;
      top: 0px;
    }
    .MenuList4 {
      left: 550px;
      top: 13px;
    }
    .MenuList5 {
      left: 670px;
      top: 26px;
    }
    .MenuList6 {
      left: 780px;
      top: 39px;
    }
  }
}

/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.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: linear-gradient(0deg, #03c8e5 0%, #035367 100%);
    height: 800px;

    .el-dialog__title {
      font-family: PangMenZhengDao;
      font-weight: 400;
      font-size: 24px;
      color: #ebfeff;
    }
  }
}
</style>