<template>
  <div class="statistical" id="bg-pan" ref="container">
    <Map
      style="
        position: absolute;
        top: 0px;
        left: 0px;
        height: calc(100vh - 80px);
        width: 100%;
        z-index: 0;
      "
      ref="MapboxComponent"
    />
    <div class="legend">
      <div class="legend-item" v-for="(item, index) in legends" :key="index">
        <div class="legend-dot" :style="{ background: item.color }"></div>
        <div class="legend-label">{{ item.label }}</div>
      </div>
    </div>
    <div class="layer-center-container" 
        :style="style">
      <div class="drag-area" 
        @mousedown="startDrag"></div>
      <LayerCenter
        @drawPolygon="drawPolygon"
        @cancleDrawPolygon="cancleDrawPolygon"
        @changeTifLayer="changeTifLayer"
        ref="LayerCenterComponent"
      ></LayerCenter>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Map from './Converge/index.vue';
  import useDrag from './drag';
  import LayerCenter from './mapComponent/layers/index.vue';
  
  const { style, startDrag } = useDrag();

  const MapboxComponent = ref();
  const  legends = ref([
    { label:'房屋', color: '#F70303' },
    { label:'土地资源', color: '#0AF703' },
    { label:'水域', color: '#0382F7' },
    { label:'农业生产设施', color: '#F4E004' },
  ])
  function drawPolygon(state) {
    // 调用Map控件中的绘图方法
    MapboxComponent.value.handlerDrawPolygon();
  }
  function cancleDrawPolygon() {
    MapboxComponent.value.handlerDeletePolygon();
  }
  function changeTifLayer(layer) {
    console.log('layer', layer);

    MapboxComponent.value.handlerChangeTifLayer(layer);
  }

</script>

<style lang="less" scoped>
  .statistical{

    :deep(.ant-modal-header){
      padding: 0px;
    }
    :deep(.ant-modal-wrap){
      overflow: hidden;
      pointer-events:none;
    }
    :deep(.dragModal){
      margin: 0 !important;
      .hidden-show-icon{
        width: 28px;
        height: 28px;
        background-size: 100% 100%;
        margin-left: 20px;
        cursor: pointer;
      }
      .hidden-icon{
        background-image: url('/public/iocn/map_hidden.png');
      }
      .show-icon{
        background-image: url('/public/iocn/map_show.png');
      }
    }
  }
  .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;
  }
  .statistical {
    // position: relative;
    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
    width:100%;
    height:100vh;
    position:relative;
  }

  #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;
    }
  }

  .legend {
    width: 220px;
    padding: 10px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    border-radius: 8px;
    background-image: url('/statistical/left_statistical.png');
    background-size: 100% 100%;
    .legend-item {
      width: 120px;
      padding: 5px 0px;
      font-size: 14px;
      color: #666666;
      display: flex;
      flex: 48% 48%;
      color: #7ebbff;
      .legend-dot {
        width: 14px;
        height: 14px;
      }
      .legend-label {
        margin-left: 12px;
      }
    }
    .flh-item{
      width: 120px;
    }
  }

  /**图层控制 视频监控**/
  .layer-center-container {
    width:285px;
    position: absolute;
    z-index: 1000;
  }
  .drag-area{
    width:245px;
    height:40px;
    position:absolute;
    top:0px;
    left:0px;
    z-index:99999;
    cursor:move;
  }
  .TC-videoi-container {
    position: absolute;
    bottom: 48px;
    right: 38px;
    width: 418px;
    height: 300px;
    .close-button {
      width: 28px;
      height: 28px;
      background: rgba(0, 0, 0, 0.6);
      text-align: center;
      line-height: 28px;
      position: absolute;
      top: 4px;
      right: 4px;
      z-index: 999999;
      color: #fff;
      cursor: pointer;
    }
  }

  .selection-button {
    position: absolute;
    cursor: pointer;
    top: 20px;
    left: 220px;
    width: 140px;
    height: 40px;
    margin-left: 20px;
    background-image: url(/map/change-view-btn.png);
    background-size: 100% 100%;
    color: #efefef;
    text-align: center;
    line-height: 46px;
    font-size: 14px;
  }
</style>
