<template>
  <div class="statistical" id="bg-pan">
    <Header></Header>
    <div id="alertOverlay" class="alert-active" ref="alertOverlay">
      <div></div>
    </div>

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

    <div class="statistical-left">
      <img
        src="/statistical/left_decorative_left.png"
        :style="{
          position: 'absolute',
          width: '73px',
          height: '100%',
          top: '0px',
          left: '0px',
        }"
      />
      <layerButton id="layerButton" @handlerLayerChange="handlerLayerChange" />
      <statisticalType
        id="statisticalType"
        @handlerChangePolygonType="handlerChangePolygonType"
        :style="{
          position: 'absolute',
          bottom: '-10px',
          left: '48px',
          height: '180px',
          'z-index': '8',
        }"
      />
      <county
        id="county"
        @countyClick="countyClick"
        :style="{
          position: 'absolute',
          bottom: '-3px',
          left: '520px',
          'z-index': '8',
        }"
      />
    </div>

    <DataScreen
      :countyId="countyId"
      :currentCounty="currentCounty"
      @changeLandType="changeLandType"
    />
  </div>
</template>

<script lang="ts" setup>
  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';

  //
  const MapboxComponent = ref();
  const countyId = ref();

  // 控制图层
  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);
  }
</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 {
    content: '';
    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;
    }
  }
</style>
