<template>
  <div class="statistical" id="bg-pan">
    <!-- header -->
    <Header></Header>

    <!-- mask -->
    <div id="alertOverlay" class="alert-active" ref="alertOverlay">
      <div></div>
    </div>

    <!-- charts container -->
    <ChartsContianer v-show="!isFullScreen"></ChartsContianer>

    <!-- full screen button -->
    <div class="full-screen-button" :style="{right:isFullScreen?'20px':'590px',  zIndex:isFullScreen? 100:1, }" >
      <img v-if="!isFullScreen" @click="fullScreen" src="/statistical/full-scrren-button.png" alt="">
      <img v-else @click="exitScreen" src="/statistical/full-scrren-button.png" alt="">
    </div>

    <!-- map -->
    <Map
      style="
        position: absolute;
        top: 0px;
        left: 0px;
        height: calc(100vh - 0px);
        width: 100%;
        z-index: 0;
      "
      @onload="onMapLoad"
      ref="MapboxComponent"
    ></Map>

    <div :style='{"position":"absolute","right":isFullScreen?"30px":"600px", "bottom": "120px", "z-index":1}'>
      <div :class="`button-item ${buttonSelect == 1? 'button-select': ''}`" style="margin-bottom: 10px" @click="changeLayer(1)">导航地图</div>
      <div :class="`button-item ${buttonSelect == 2? 'button-select': ''}`" style="margin-bottom: 10px" @click="changeLayer(2)">卫星地图</div>
      <div :class="`button-item ${buttonSelect == 3? 'button-select': ''}`" @click="changeLayer(3)">航飞影像</div>
    </div>


    <div class="statistical-left">
      <img
        src="/statistical/left_decorative_left.png"
        :style="{
          position: 'absolute',
          width: '73px',
          height: '100%',
          top: '0px',
          left: '0px',
        }"
      />
      <img
        src="/statistical/right_decorative_right.png"
        :style="{
          position: 'absolute',
          width: '73px',
          height: ' calc( 100% + 20px)',
          top: '0px',
          right: '-8px',
          'z-index':3
        }"
      />
      <layerButton id="layerButton" @handlerLayerChange="handlerLayerChange" />
      <statisticalType
        id="statisticalType"
        @handlerChangePolygonType="handlerChangePolygonType"
        :style="{
          position: 'absolute',
          bottom: '-10px',
          left: '48px',
          height: '180px',
          'z-index': '0',
        }"
      />
      <county
        id="county"
        @countyClick="countyClick"
        ref="countyComponent"
        :style="{
          position: 'absolute',
          bottom: '-3px',
          left: isFullScreen?'570px':'340px',
          'z-index': '0',
        }"
      />
    </div>

    <DataScreen
      v-if="false"
      :countyId="countyId"
      :currentCounty="currentCounty"
      @changeLandType="changeLandType"
    />

    <SilderCounty v-if="false"></SilderCounty>
  </div>
</template>

<script lang="ts" setup>
  import SilderCounty from './mapComponent/silder_county.vue'

  import { ref, onMounted, onUnmounted, computed } from 'vue';
  import Map from './LargeScreenMap/index.vue';
  import layerButton from './mapComponent/left_layerButton.vue';
  import statisticalType from './mapComponent/left_statisticalType.vue';
  import county from './mapComponent/left_county.vue';
  import DataScreen from './dataScreen/index.vue';
  import Header from './mapComponent/top_title.vue';
  import ChartsContianer from './ChartsContainer/index.vue';

  //
  const MapboxComponent = ref();
  const countyId = ref();
  const buttonSelect = ref(1)
  const changeLayer = (value) => {
      buttonSelect.value = value
      switch(value){
        case 1:
          MapboxComponent.value.handlerChangeLayerVisible('weixing',false)
          MapboxComponent.value.handlerChangeLayerVisible('dianzi',true)
          MapboxComponent.value.handlerChangeLayerVisible('dianzi-biaozhu',true)
          MapboxComponent.value.handlerChangeLayerVisible('yingxiang',false)
          MapboxComponent.value.handlerChangeLayerVisible('yaogan',false)
          break;
        case 2:
          MapboxComponent.value.handlerChangeLayerVisible('weixing',true)
          MapboxComponent.value.handlerChangeLayerVisible('dianzi',false)
          MapboxComponent.value.handlerChangeLayerVisible('dianzi-biaozhu',false)
          MapboxComponent.value.handlerChangeLayerVisible('yingxiang',false)
          MapboxComponent.value.handlerChangeLayerVisible('yaogan',false)
          break;
        case 3:
          MapboxComponent.value.handlerChangeLayerVisible('weixing',false)
          MapboxComponent.value.handlerChangeLayerVisible('dianzi',false)
          MapboxComponent.value.handlerChangeLayerVisible('dianzi-biaozhu',false)
          MapboxComponent.value.handlerChangeLayerVisible('yingxiang',true)
          MapboxComponent.value.handlerChangeLayerVisible('yaogan',true)
          break;
      }
    }

  // 控制图层
  function handlerLayerChange(type: number) {
    switch (type) {
      case 1:
        MapboxComponent.value.handlerChangeLayerVisible('historyLayerLine', true);
        MapboxComponent.value.handlerChangeLayerVisible('historyLayerFill', true);
        MapboxComponent.value.handlerChangeLayerVisible('heatLayer', false);
        MapboxComponent.value.handlerChangeLayerVisible('clusters', false);
        MapboxComponent.value.handlerChangeLayerVisible('cluster-count', false);
        MapboxComponent.value.handlerChangeLayerVisible('unclustered-point', false);
        break;
      case 2:
        MapboxComponent.value.handlerChangeLayerVisible('historyLayerLine', false);
        MapboxComponent.value.handlerChangeLayerVisible('historyLayerFill', false);
        MapboxComponent.value.handlerChangeLayerVisible('heatLayer', true);
        MapboxComponent.value.handlerChangeLayerVisible('clusters', false);
        MapboxComponent.value.handlerChangeLayerVisible('cluster-count', false);
        MapboxComponent.value.handlerChangeLayerVisible('unclustered-point', false);
        break;
      case 3:
        MapboxComponent.value.handlerChangeLayerVisible('historyLayerLine', false);
        MapboxComponent.value.handlerChangeLayerVisible('historyLayerFill', false);
        MapboxComponent.value.handlerChangeLayerVisible('heatLayer', false);
        MapboxComponent.value.handlerChangeLayerVisible('clusters', true);
        MapboxComponent.value.handlerChangeLayerVisible('cluster-count', true);
        MapboxComponent.value.handlerChangeLayerVisible('unclustered-point', true);
        break;
    }
  }

  // 选择区县
  const currentCounty = ref({ name: '', code: '' });

  function countyClick(data) {
    countyId.value = data.id;
    currentCounty.value = { name: data['name'], code: data['id'] };
    MapboxComponent.value.handlerChangeCounty(currentCounty.value);
  }

  // 图例点击
  function handlerChangePolygonType(data) {
    MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], data);
  }

  // 切换图斑类型
  function changeLandType(type): void {
    MapboxComponent.value.handlerLoadPolygon(currentCounty.value['code'], '', type);
  }


  const countyComponent = ref();

  function onMapLoad(){
    countyComponent.value.selectCounty();
  }









// 
const isFullScreen = ref<Boolean>(false);
// 初始化时监听全屏状态

function isPageFullscreen() {
  return !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
}
isFullScreen.value  = isPageFullscreen();

function fullScreen() {
  isFullScreen.value = true;
  return;
    var el = document.documentElement;
    var rfs =
      el.requestFullScreen ||
      el.webkitRequestFullScreen ||
      el.mozRequestFullScreen ||
      el.msRequestFullscreen;
    if (typeof rfs != "undefined" && rfs && isFullScreen.value === false) {
      rfs.call(el);
      isFullScreen.value = true;
    }
    return;
}

function exitScreen() {
  isFullScreen.value = false;
  return;
    var cfs =
      document.exitFullscreen ||
      document.mozCancelFullScreen ||
      document.webkitCancelFullScreen ||
      document.msExitFullscreen;
    if (typeof cfs != "undefined" && cfs && isFullScreen.value === true) {
      cfs.call(document);
      isFullScreen.value = false;
    }
  }


</script>

<style lang="less" scoped>
  .statistical {
    // position: relative;
    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
  }

  #bg-pan {
  }
  #alertOverlay::before,
  #alertOverlay::after {
    position: absolute;
    width: 50px;
    height: 100%;
  }

  #alertOverlay div::before,
  #alertOverlay div::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
  }

  #alertOverlay::before {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
    top: 0;
    left: 0;
    transform: rotate(0deg);
  }

  #alertOverlay::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent);
    top: 0%;
    left: 100%;
    transform: rotate(0deg) translate(calc(-1 * 50px), 0px);
  }

  #alertOverlay div::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    top: 0;
    left: 0;
    transform: rotate(180deg);
  }

  #alertOverlay div::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    top: 100%;
    left: 0;
    transform: rotate(0deg) translate(0px, calc(-1 * 50px));
  }

  #alertOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 1;
  }

  .alert-active {
    animation: blink 0s infinite;
  }

  @keyframes blink {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }

  .full-screen-button{
    width:56px;
    height:56px;
    position:absolute;
    bottom:46px;
    right:590px;
    cursor:pointer;
    img{
      width:100%;
      height:100%;
    }
  }

  .button-item{
    width: 96px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 11px;
    color: #7EBBFF;
    background: url('@/assets/statistical/blue_bg.png') no-repeat;
    background-size: cover;
  }
  .button-select{
    color: #06EBB7;
    background: url('@/assets/statistical/green_bg.png') no-repeat;
    background-size: cover;
    
  }
</style>
