  <template>
    <div class="statistical" id="bg-pan">
      
      <Map @onload="handlerOnMapLoad" @handlerGetDetails="handlerGetDetails" style="position: absolute; top: 0px; left: 0px;height: calc( 100vh - 80px);width:100%;z-index:0;" ref="MapboxComponent"></Map>
      
      <div style="position: absolute; right:160px; bottom: 20px; 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="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>
      
      <a-modal
        style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
        wrap-class-name="full-modal"
        v-model:open="showInfoOpen"
        title="详情"
        :footer="null"
        :maskClosable="true"
        :destroyOnClose="true"
        @cancel="showInfoOpen = false"
        >
        <div class="modal-content">
          <ShowInfoModal v-if="showInfoOpen" :showInfoData="showInfoData" />
        </div>
      </a-modal>
  
    </div>
  </template>
  
  <script lang="ts" setup>
    import { ref, onMounted, onUnmounted, computed } from 'vue';
    import Map from './Converge/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 ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
    import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
    // details
    const showInfoOpen = ref<Boolean>(false);
    const showInfoData = ref();
    const buttonSelect = ref(2)
  
    const getInfoList = (id) => {
      getCaseInfoById({id:id}).then(res => {
        if(res){
          showInfoData.value = res
          showInfoOpen.value = true;
        }else{
          
        }
      })
    };
  
    const MapboxComponent = ref();
    const countyId = ref();
  
    const legends = ref([
      {
        label:"违法",
        color:"#F70303",
      },{
        label:"合法",
        color:"#0AF703",
      },{
        label:"其他",
        color:"#0382F7",
      },{
        label:"补办手续",
        color:"#AD04F4",
      },{
        label:"拆除复耕",
        color:"#F4E004",
      },
    ])
  
    function handlerOnMapLoad(){
    }
  
    function handlerGetDetails(e){
      getInfoList(e.Id);
    }
  
    // 选择区县
    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 changeLayer = (value) => {
      buttonSelect.value = value
      switch(value){
        case 1:
          MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles',false)
          MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles',true)
          MapboxComponent.value.handlerChangeLayerVisible('tdt-wms-tiles',false)
          break;
        case 2:
          MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles',true)
          MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles',false)
          MapboxComponent.value.handlerChangeLayerVisible('tdt-wms-tiles',false)
          break;
        case 3:
          MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles',false)
          MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles',false)
          MapboxComponent.value.handlerChangeLayerVisible('tdt-wms-tiles',true)
          break;
      }
    }
  
  </script>
  
  <style lang="less" scoped>
    .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;
    }
  
    #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:120px;
    padding:10px;
    position:absolute;
    bottom:20px;
    right:20px;
    background:#fff;
    border-radius: 8px;
    .legend-item{
      padding:5px 0px;
      font-size:14px;
      color:#666666;
      display:flex;
      .legend-dot{
        width:14px;
        height:14px;
        border-radius: 50%;
      }
      .legend-label{
        margin-left:12px;
      }
    }
  }
  
  </style>
  
  