<template>
  <div class="bd-container">
    <bd-map :loaded="loaded"/>
    <div class="header">北斗综合管理</div>
    <div class="menus">
      <template v-for="item in Object.keys(menus)">
        <div
          :key="item"
          :class="{'menu-item':true,'active': activeMenu[menus[item].name]} "
          :data-type="item"
          @click="menuClick"
        >
          <svg-icon :icon-class="menus[item].icon"></svg-icon>
          {{ menus[item].title }}
        </div>
      </template>
    </div>
    <video-trail v-if="activeMenu[menus.video_trail.name]"></video-trail>
    <div class="right-container" v-if="mapLoaded">
      <location v-if="activeMenu[menus.location_tail.name]"/>
      <fence v-if="activeMenu[menus.fence.name]"/>
      <fence-vio-evt v-if="activeMenu[menus.evt.name]"/>
      <realtime-location v-if="activeMenu[menus.realtime_location.name]"></realtime-location>
      <room-location v-if="activeMenu[menus.room_location.name]"></room-location>
    </div>
  </div>
</template>

<script>

import Fence from '@/views/bd/fence/index.vue';
import FenceVioEvt from '@/views/bd/fenceEvt/index.vue';
import Location from '@/views/bd/location/index.vue';
import BdMap from '@/components/map';
import RealtimeLocation from '@/views/bd/realtimeLocation/index.vue';
import RoomLocation from '@/views/bd/roomlocation/index.vue';
import menu from '@/views/system/menu/index.vue';
import VideoTrail from "@/components/VideoTrail/index.vue";

const menus = {
  evt: {
    name: 'evt',
    title: '围栏闯禁',
    icon: 'bd_evt',
  },
  fence: {
    name: 'fence',
    title: '围栏管理',
    icon: 'bd_fence',
  },
  location_tail: {
    name: 'location_tail',
    title: '轨迹回放',
    icon: 'bd_location',
  },
  realtime_location: {
    name: 'realtime_location',
    title: '实时定位',
    icon: 'bd_real_time',
  },
  room_location: {
    name: 'room_location',
    title: '室内定位',
    icon: 'bd_room_location',
  },
  video_trail: {
    name: 'video_trail',
    title: '视频跟随',
    icon: 'bd_room_location',
  },
};
export default {
  name: 'bd',
  computed: {
    menu() {
      return menu;
    },
  },
  components: {
    VideoTrail,
    RoomLocation,
    RealtimeLocation,
    FenceVioEvt,
    Fence,
    Location,
    BdMap,
  },
  data() {
    return {
      menus,
      mapLoaded: false,
      activeMenu: {
        [menus.evt.name]: true,
      },
    };
  },
  created() {
  },
  methods: {
    loaded(map) {
      window.map = map;
      const protocolAndHost = window.location.protocol + '//' + window.location.host;
      // map.setPitch(0)
      const d3tiles = new BDLayers.Lib.Layer.CB3DtilesLayer('3dtiles', {
        offet: {
          from: 'GCJ02',
          to: 'WGS84',
        },
        offset: [13.4, -3.5],
        mapView: this.mapView,
        maxCacheSize: 10000,
        loadingLimit: 10,
        services: [
          {
            url: `${protocolAndHost}${process.env.VUE_APP_BD_BASE_API}/folder/zy9/tileset.json`, //"http://resource.dvgis.cn/data/3dtiles/dayanta/tileset.json",
            maximumScreenSpaceError: 16.0,
            heightOffset: -48, //-420,
          },
        ],
      });
      if (process.env.VUE_APP_3D_SWITCH === 'true') {
        map.addCustomLayers(d3tiles, -1, true);
      }
      this.mapLoaded = true;
    },
    menuClick(e) {
      const type = e.currentTarget.dataset.type;
      this.activeMenu[type] = !this.activeMenu[type];
      const result = {
        ...this.activeMenu,
      };
      const selectedTogether = [this.menus.evt.name, this.menus.realtime_location.name, this.menus.room_location.name];
      // 选中以下的菜单，其他菜单均取消选中
      if (selectedTogether.includes(type) && this.activeMenu[type]) {
        Object.keys(result).forEach((key) => {
          if (!selectedTogether.includes(key)) {
            result[key] = false;
          }
        });
      }
      if (!selectedTogether.includes(type) && this.activeMenu[type]) {
        // 如果当前选中的菜单是实时定位，则自动选中围栏闯禁
        Object.keys(result).forEach((key) => {
          if (key !== type) {
            result[key] = false;
          }
        });
      }
      this.activeMenu = result;
    },
  },
};
</script>
<style lang="scss" src="./index.scss"/>
