<template>
<a-spin size="large" tip="图层加载中..." :spinning="spinning" wrapperClassName="solid-spin">
  <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"
      @handlerGetDetails="handlerGetDetails"
      @changeLoading="changeLoading"
    />
    <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
        @changeLayer="changeLayer"
        @changeLabel="changeLabel"
        ref="LayerCenterComponent"
      ></LayerCenter>
    </div>

    <a-modal
      title="详情"
      width="100%"
      wrap-class-name="full-modal"
      v-model:open="showInfoOpen"
      :footer="null"
      :destroyOnClose="true">
      </a-modal>
  </div>
</a-spin>
</template>

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

  
  const { style, startDrag } = useDrag();

  const MapboxComponent = ref();
  const showInfoData = ref()
  const showInfoType = ref()
  const showInfoFlyToPoint = ref()
  const showInfoOpen = ref(false)
  const spinning = ref(false)
  const  legends = ref([
    { label:'房屋', color: '#F70303' },
    { label:'土地资源', color: '#0AF703' },
    { label:'水域', color: '#0382F7' },
    { label:'农业生产设施', color: '#F4E004' },
  ])

  onMounted(() => {
    spinning.value = true
  })
  const changeLoading = (type: boolean) => {
    spinning.value = type
  }
  function changeLayer(layerList) {
    MapboxComponent.value.handlerChangeLayer(layerList);
  }
  const changeLabel = (type) => {
    MapboxComponent.value.changeTiandituLabelOpen(type);
  }
  const handlerGetDetails = (item, flyPoint) => {
    console.log('item',item)
    showInfoType.value = item.Type
    getDetail( {id:item.Id} , item.Type).then(res => {
      console.log('res',res)
      showInfoData.value = res
      showInfoOpen.value = true
      showInfoFlyToPoint.value = flyPoint
    })
  }

</script>

<style lang="less" scoped>
.full-modal {
  .ant-modal {
    min-width: 100vw;
    top: 0px;
    padding: 0px;
    margin: 0px;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
  }
  .ant-modal-body {
    flex: 1;
  }
}
  .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;
      }
    }
  }
  .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:calc(-80px + 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;
  }
  .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>
<style>
.solid-spin.ant-spin-nested-loading > .ant-spin-blur::after {
  opacity: 1;
}
.solid-spin.ant-spin-nested-loading  .ant-spin{
  max-height: none;
}
</style>
