<template>
  <div class="main-container">

    <div class="search-container-box">
        <SearchComponent @handlerDraw="handlerDraw" @toPosition="toPosition" @handlerFilter="handlerFilter"></SearchComponent>
    </div>

    <!-- mask -->
    <div id="alertOverlay" class="alert-active" ref="alertOverlay">
      <div></div>
    </div>
    <!-- layout -->
    <div class="main-header">
      <div class="title">
        <img src="/statistical/logo.png" alt="" /> {{ t('sys.subject.header_title') }}
        <div class="user-info" style="z-index: 9999">
          <span style="color: #325e95">{{ fireUserLoginName }}</span>
          &nbsp;
          <span style="color: #ddd" @click="logout">退出</span>
        </div>
      </div>
    </div>
    <div class="main-bottom"></div>
    <!-- map -->
    <Map ref="MapboxComponent" @showMonitor="showMonitorFunction" @handlerGetDetails="handlerGetDetails" @handlerQueryIntersectTif="handlerQueryIntersectTif" />
    <!-- layer controller -->
    <LayerControl @handlerLayerButtonClick="handlerLayerButtonClick"></LayerControl>
   
    
    <div class="right-container">

      <div class="data-container" v-show="true">
        <div class="open-button" @click="changeUavContaienrShow">
          <ShrinkOutlined v-if="uavContaienrShow" />
          <ArrowsAltOutlined v-else />
        </div>
        <!-- tif list -->
        <!-- <TifList v-if="drawState" ref="TifListComponent" @changeTifLayer="changeTifLayer"></TifList> -->
        <!-- case list -->
        <!-- <CaseList  v-show="false" @handlerLayerButtonClick="handlerLayerButtonClick" @toPosition="toPosition"></CaseList> -->
        <!-- uav -->
        <UAV v-show="uavContaienrShow" @toPosition="toPosition" @handlerUpdateUavLayerData="handlerUpdateUavLayerData" @handlerLayerButtonClick="handlerLayerButtonClick"></UAV>
      </div>
      <!-- monitor -->
      <!-- <Monitor  :currentMonitor="monitorInfo" @register="registerModal" /> -->
      <!-- TCVideo -->
      <div class="TC-videoi-container" v-if="showTCLPlayer" v-drag>
        <div class="close-button" @click="showTCLPlayer = false;">
         <CloseOutlined></CloseOutlined>
         
        </div>
        <TCVideo v-if="showTCLPlayer" :play-url="'12334344'"></TCVideo> 
      </div>
    </div>

    <!-- layer center -->



  </div>

  <div class="layer-center-container" v-if="false">
    <LayerCenter></LayerCenter>
  </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>



</template>
<script lang="ts" setup>

import ShowInfoModal from '@/views/demo/tiankongdi/curbspotcity/MapList/ShowInfoModal/index.vue';
import SearchComponent from './VideoSupervision/search/index.vue'  
import Map from './VideoSupervision/map/map.vue';
import {PlayCircleOutlined,EnvironmentOutlined,CloseOutlined,DownOutlined,ShrinkOutlined,ArrowsAltOutlined} from "@ant-design/icons-vue"
  import LayerControl from './VideoSupervision/layercontrol/index.vue';
  import TifList from './VideoSupervision/tiflist/index.vue'
  import CaseList from './VideoSupervision/caselist/index.vue';
  import UAV from './VideoSupervision/uav/uav.vue';
  import { ref, onMounted, h } from 'vue';
  import { useRouter } from 'vue-router';
  import { PageEnum } from '@/enums/pageEnum';
  import Monitor from './VideoSupervision/monitor/Monitor.vue';
  import TCVideo from './VideoSupervision/monitor/index.vue';
  import { useModal } from '@/components/Modal';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useMultipleTabStore } from '@/store/modules/multipleTab';
  import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';

import LayerCenter from './VideoSupervision/layers/index.vue';


  const { t } = useI18n();
  const router = useRouter();
  const { createConfirm } = useMessage();
  // layer control
  const MapboxComponent = ref();
  const TifListComponent = ref();

  function handlerLayerButtonClick(item) {
    MapboxComponent.value.handlerChangeLayerVisible(item.value, item.checked);
  }

  const fireUserLoginName = ref(localStorage.getItem('fireUserLoginName'));
  function getFireUserLoginName() {
    fireUserLoginName.value = localStorage.getItem('fireUserLoginName')
      ? localStorage.getItem('fireUserLoginName')
      : '';
  }

  const tabStore = useMultipleTabStore();
  function logout() {
    createConfirm({
      iconType: 'warning',
      title: () => h('span', t('sys.navigation.logoutTip')),
      content: () => h('span', t('sys.navigation.logoutMessage')),
      onOk: async () => {
        tabStore.resetState();
        await router.replace(PageEnum.SUBJECT_HOME);
      },
    });
  }
  const monitorInfo = ref();
  const [registerModal, { openModal: openMonitorModal }] = useModal();

  // function showMonitorFunction(val) {
  //   console.log(val);
  //   monitorInfo.value = val;
  //   openMonitorModal(true, val);
  // }
  
  const showTCLPlayer = ref(false);
  function showMonitorFunction(val){

    showTCLPlayer.value = true;
  }

  const uavContaienrShow = ref(true);

  function changeUavContaienrShow (){
    uavContaienrShow.value = !uavContaienrShow.value;
  }
//   to positon
function toPosition(lngLat){
    MapboxComponent.value.handlerLocation(lngLat,17);
}

function changeTifLayer(layer){
  MapboxComponent.value.handlerChangeTifLayer(layer);
}

// 
const drawState = ref(false);
// 绘制按钮
function handlerDraw(state){
  drawState.value = state;
  if(state){
    MapboxComponent.value.handlerDrawPolygon();
  }else{
    MapboxComponent.value.handlerDeletePolygon();
  }
}

// 查询事件
function handlerQueryIntersectTif(wktStr){
  TifListComponent.value.handlerQueryIntersectTif(wktStr);
}

// update uav layer data
function handlerUpdateUavLayerData(uavlist){
  let uavLayerGeoJson = {
      "type": "FeatureCollection",
      "features": [
        
      ]
  }
  console.log("uvalist123",uavlist)
  uavlist?.forEach((item,index)=>{
    let feature = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [parseFloat(item.lng), parseFloat(item.lat)]
        },
        "properties": {
            "account":item.account,
            "ip":item.ip,
            "model":item.model,
            "lng":item.lng,
            "lat":item.lat,
        }
    }
    uavLayerGeoJson.features.push(feature)
  })
  MapboxComponent.value.handlerUpdateUavLayer(uavLayerGeoJson);
}

const showInfoOpen = ref<Boolean>(false);
const showInfoData = ref();

const getInfoList = (id) => {
  getCaseInfoById({id:id}).then(res => {
    if(res){
      showInfoData.value = res
      showInfoOpen.value = true;
    }else{
      
    }
  })
};

function handlerGetDetails(e){
    getInfoList(e.Id);
  }

onMounted(() => {
  // getWeather();
  getFireUserLoginName();
});


</script>

<style type="less" scoped>
  .main-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 0;
    .main-header {
      width: 100vw;
      height: 120px;
      background: url('/videosupervision/main-top.png');
      background-size: 100% 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 2;
      .title {
        width: 600px;
        height: 90px;
        margin: 0px auto;
        font-size: 40px;
        color: #fff;
        font-weight: bold;
        .user-info {
          width: 120px;
          color: #e1e1e1;
          position: absolute;
          top: 20px;
          right: 24px;
          font-size: 14px;
          z-index: 9;
          &:hover {
            cursor: pointer;
            color: #8be5ee;
          }
        }
      }
    }
    .main-bottom {
      height: 50px;
      width: calc(100vw - 30px);
      position: absolute;
      bottom: 10px;
      left: 15px;
      z-index: 2;
      background: url('/videosupervision/main-bottom.png');
      background-size: 100% 100%;
    }
    .right-container{
      width:418px;
      min-height:200px;
      position: absolute;
      bottom:32px;
      right: 24px;
    }
    .data-container {
      width: 418px;
      height:300px;
      z-index:9999999;
      position: relative;
      .open-button{
        width:30px;
        height:30px;
        position:absolute;
        right:5px;
        top:5px;
        z-index:9999;
        font-size:18px;
        color:#fff;
        line-height:40px;
        line-height:30px;
        text-align: center;
        background:rgba(0,0,0,0.6);
        cursor:pointer;
      }
    }
  }

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

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

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

  .search-container-box{
    position:absolute;
    width:330px;
    height:46px;
    top:115px;
    left:50px;
    z-index:9999;
}

.TC-videoi-container{
  margin-top:16px;
  position: relative;
  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;
  }
}

.layer-center-container{
  width:208px;
  position:absolute;
  bottom:20px;
  left:20px;
  z-index:99999;
}
</style>
