<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"
      @showMonitor="showMonitor"
      @handlerQueryIntersectTif="handlerQueryIntersectTif"
      :layer="layerSettings"
      :defaultColor="defaultColor"
    />

    <div style="position: absolute; left: 60px; bottom: 20px; z-index: 1" v-if="false">
      <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 v-if="subject == '非法采矿'" class="button-item router-button" style="position: absolute;top: -50px;width: 200px;left: 0px;background-size: 100% 100%;height: 37px;
    font-size: 16px;cursor: pointer" @click="goRouter">汇总表</div>
      <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
      class="dragModal"
      width="100%"
      wrap-class-name="full-modal"
      v-model:open="showInfoOpen"
      title="详情"
      :footer="null"
      :maskClosable="true"
      :destroyOnClose="true"
      @cancel="showInfoOpen = false"
    >
      <div class="modal-content">
        <template v-if="showInfoOpen">
          <ShowInfoModal :showInfoData="showInfoData" v-if="subject == '违法用地'" />
          <MainShowInfoModal :id="showMainInfoId" v-if="subject == '非法采矿'" />
          <DegrainingShowInfoModal :showInfoData="showInfoData" v-if="subject == '耕地非粮化'" />
          <KeyShowInfoModal :showInfoData="showInfoData" v-if="subject == '重点问题'" />
          <InspectionAuditShowInfoModal :showInfoData="showInfoData" v-if="subject == '巡察审计'" />
          <RedLineShowInfoModal :showInfoData="showInfoData" v-if="subject == '生态保护红线监管'" />
          <RepairShowInfoModal :showInfoData="showInfoData" v-if="subject == '生态修复'" />
        </template>
      </div>
    </a-modal>

    <!-- 图层控制 视频监控-->

    <div class="layer-center-container">
      <LayerCenter
        v-if="layerCenterShow"
        @drawPolygon="drawPolygon"
        @cancleDrawPolygon="cancleDrawPolygon"
        @changeTifLayer="changeTifLayer"
        :layerInfo="layerInfo"
        ref="LayerCenterComponent"
      ></LayerCenter>
    </div>

    <div class="TC-videoi-container" v-if="showTCLPlayer" v-drag>
      <div class="close-button" @click="showTCLPlayer = false">
        <CloseOutlined></CloseOutlined>
      </div>
      <Monitor v-if="showTCLPlayer" :play-url="playUrl"></Monitor>
    </div>
  </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,
    MainShowInfoModal,
    DegrainingShowInfoModal,
    KeyShowInfoModal,
    InspectionAuditShowInfoModal,
    RedLineShowInfoModal,
    RepairShowInfoModal,
  } from './page';

  import { getLoadDroneCaseInfoDetail, getCaseInfoById } from '@/api/tiankongdi/index';
  import { useRoute } from 'vue-router';
  import { getConfig } from '@/api/sys/layerManagement';
  import { GetCaseInfoById } from '@/api/degraining/index';
  import { getInspectionAuditCaseInfoById } from '@/api/inspectionaudit/index';
  import { getRedLineCaseInfoById } from '@/api/redlinesupervision/index';
  import { getRepairCaseInfoById } from '@/api/shengtaixiufu/index';
  import { getCaseInfoByIdtotal } from '@/api/keyproblem/keyissuesI/index';

  const route: any = useRoute();
  const subject = ref(route.params.id);
  const legends: any = ref([]);
  const layerSettings = ref();
  // details
  const showInfoOpen = ref<Boolean>(false);
  const showInfoData = ref();
  const buttonSelect = ref(2);
  const showMainInfoId = ref();

  const getInfoList = (id) => {
    console.log(id);
    console.log(subject.value);
    if (subject.value == '违法用地') {
      getCaseInfoById({ id: id }).then((res) => {
        if (res) {
          showInfoData.value = res;
          showInfoOpen.value = true;
          // 添加鼠标拖动监听器
          addListener();
        }
      });
    } else if (subject.value == '非法采矿') {
      showMainInfoId.value = id;
      showInfoOpen.value = true;
      // 添加鼠标拖动监听器
      addListener();
    } else if (subject.value == '耕地非粮化') {
      GetCaseInfoById({ id: id }).then((res) => {
        showInfoData.value = res;
        showInfoOpen.value = true;
        // 添加鼠标拖动监听器
        addListener();
      });
    } else if (subject.value == '重点问题') {
      getCaseInfoByIdtotal({ id: id }).then((res) => {
        showInfoData.value = res;
        showInfoOpen.value = true;
        // 添加鼠标拖动监听器
        addListener();
      });
    } else if (subject.value == '巡察审计') {
      getInspectionAuditCaseInfoById({ id: id }).then((res) => {
        showInfoData.value = res;
        showInfoOpen.value = true;
        // 添加鼠标拖动监听器
        addListener();
      });
    } else if (subject.value == '生态保护红线监管') {
      getRedLineCaseInfoById({ id: id }).then((res) => {
        showInfoData.value = res;
        showInfoOpen.value = true;
        // 添加鼠标拖动监听器
        addListener();
      });
    } else if (subject.value == '生态修复') {
      getRepairCaseInfoById({ id: id }).then((res) => {
        showInfoData.value = res;
        showInfoOpen.value = true;
        // 添加鼠标拖动监听器
        addListener();
      });
    }
  };

  const MapboxComponent = ref();
  const countyId = ref();
  const defaultColor = ref('#FFFFFF');
  const layerCenterShow = ref(false);
  function getLayerSettings() {
    let title = '';
    switch (subject.value) {
      case '违法用地':
        title = 'Subject_WFYD';
        defaultColor.value = '#F70303';
        break;
      case '非法采矿':
        title = 'Subject_FFCK';
        // legends.value.push({
        //   label: '默认',
        //   color: '#F4E004',
        // });
        defaultColor.value = '#F4E004';
        break;
      case '耕地非粮化':
        title = 'Subject_GDFLH';
        defaultColor.value = '#F70303';
        break;
      case '重点问题':
        title = 'Subject_ZDWT';
        // legends.value.push({
        //   label: '默认',
        //   color: '#FFFFFF',
        // });
        break;
      case '巡察审计':
        title = 'Subject_XCSJ';
        defaultColor.value = '#F70303';
        break;
      case '生态保护红线监管':
        title = 'Subject_STBHHXJG';
        // legends.value.push({
        //   label: '默认',
        //   color: '#FFFFFF',
        // });
        break;
      case '生态修复':
        title = 'Subject_STXF';
        // legends.value.push({
        //   label: '默认',
        //   color: '#F70303',
        // });
        defaultColor.value = '#F70303';
        break;
    }
    getConfig({
      code: title,
    }).then((res) => {
      let obj = JSON.parse(res.codeValue);
      layerSettings.value = obj[0];
      layerInfo.value = layerSettings.value.layerinfo;
      layerCenterShow.value = true; 
      let legend = layerSettings.value.legend[0];
      for (const key in legend) {
        legends.value.push({
          label: key,
          color: legend[key].colour,
        });
      }
    });
  }
  function handlerOnMapLoad() {}

  function handlerGetDetails(e) {
    console.log(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('countyPanelLayer', false);
        break;
      case 2:
        MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles', true);
        MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles', false);
        MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer', false);
        break;
      case 3:
        MapboxComponent.value.handlerChangeLayerVisible('tdt-img-tiles', false);
        MapboxComponent.value.handlerChangeLayerVisible('tdt-vec-tiles', false);
        MapboxComponent.value.handlerChangeLayerVisible('countyPanelLayer', true);
        break;
    }
  };

  /*图层控制 视频监控*/
  import LayerCenter from './mapComponent/layers/index.vue';

  // 视频监控
  import Monitor from './mapComponent/monitor/index.vue';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { is } from '@/utils/is';

  const showTCLPlayer = ref(false);
  const playUrl = ref('');
  function showMonitor(info) {
    playUrl.value = info.playUrl;
    showTCLPlayer.value = true;
  }

  // 历史影像

  function drawPolygon(state) {
    // 调用Map控件中的绘图方法
    MapboxComponent.value.handlerDrawPolygon();
  }

  function cancleDrawPolygon() {
    MapboxComponent.value.handlerDeletePolygon();
  }

  const LayerCenterComponent = ref();
  const layerInfo = ref([]);
  function handlerQueryIntersectTif(wktStr) {
    LayerCenterComponent.value.handlerQueryIntersectTif(wktStr);
  }

  function changeTifLayer(layer) {
    console.log('layer', layer);

    MapboxComponent.value.handlerChangeTifLayer(layer);
  }


  // 鼠标拖动监听器-参数
  let isDragging = false;
  let initialMouseX;
  let initialMouseY;
  let initialModalX;
  let initialModalY;
  // 添加鼠标拖动监听器
  function addListener() {
    setTimeout(() => {
      const dragModalDocument: any = document.querySelector('.dragModal');
      if (dragModalDocument) {
        // 鼠标按下
        dragModalDocument.addEventListener('mousedown', function(event) {
          isDragging = true;
          initialMouseX = event.clientX;
          initialMouseY = event.clientY;
          initialModalX = dragModalDocument.offsetLeft;
          initialModalY = dragModalDocument.offsetTop;
          dragModalDocument.style.cursor = 'grabbing';
        });
        // 鼠标移动
        dragModalDocument.addEventListener('mousemove', function(event) {
          if (isDragging) {
            const deltaX = event.clientX - initialMouseX;
            const deltaY = event.clientY - initialMouseY;
            dragModalDocument.style.left = initialModalX + deltaX + 'px';
            dragModalDocument.style.top = initialModalY + deltaY + 'px';
          }
        });
        // 鼠标放开
        dragModalDocument.addEventListener('mouseup', function(event) {
            isDragging = false;
            dragModalDocument.style.cursor = 'default';
        });
      }
    }, 1000);
  }

  onMounted(() => {
    getLayerSettings();
  });
  const goRouter = () => {
    route.push({ path: '/caseoffence/feifacaikuang' })
  }
</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: 200px;
    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 {
      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;
      }
    }
  }

  /**图层控制 视频监控**/
  .layer-center-container {
    width: 208px;
    position: absolute;
    bottom: 0px;
    left: 20px;
    z-index: 1000;
  }

  .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>
