<template>
  <div>
    <div class="toper" :style="{ zIndex: 1082 }" v-if="visible">
      <span class="info-item solo">任务名称：{{ modalImage.taskName }}</span>
      <div class="info-row">
        <span class="info-item">飞手名：{{ modalImage.flyer }}</span>
        <span class="info-item">飞行时间：{{ modalImage.flyTime }}</span>
        <!-- <span class="info-item">任务位置：{{ modalImage.workPosition }}</span> -->
        <span class="info-item">地理位置：{{ modalImage.geometry?.slice(6, -1) }}</span>
      </div>
    </div>
    <div class="leftOutlined" :style="{ zIndex: 1082 }" v-if="visible && beforeImageVif">
      <LeftOutlined :style="{ fontSize: '30px' }" @click="beforeImage" />
    </div>
    <div class="rightOutlined" :style="{ zIndex: 1082 }" v-if="visible && afterImageVif">
      <RightOutlined :style="{ fontSize: '30px' }" @click="afterImage" />
    </div>

    <a-image
      :width="200"
      :style="{ display: 'none', zIndex: 1001 }"
      :preview="{
        visible,
        onVisibleChange: setVisible,
      }"
      :src="modalImage.path"
    />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
  // 图片路径拼接
  import { getAppEnvConfig } from '@/utils/env';
  const { VITE_GLOB_API_URL } = getAppEnvConfig();
  const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');

  const emits = defineEmits(['closeImageModal']);

  const props = defineProps({
    modalImage: { type: Object },
    tableData3_tupian: { type: Object },
  });

  watch(
    () => props.modalImage,
    () => {
      setTimeout(() => {
        handleOpenImage(props.modalImage);
      }, 1);
    },
    {
      deep: true,
      immediate: true,
    },
  );

  // 点击地图上的无人机图标后展示图片------------------------------------------------------------
  // 窗口
  const modalImage: any = ref({});
  const visible = ref<boolean>(false);
  // 打开窗口
  const handleOpenImage = (properties) => {
    // 正则表达式验证函数
    modalImage.value = properties;

    if (isValidUrl(properties.path)) {
      modalImage.value.path = properties.path;
    } else {
      modalImage.value.path = VITE_GLOB_API_URL_VAR.value + properties.path;
    }
    nowImgs = props.tableData3_tupian?.filter((f) => {
      return f.taskId == modalImage.value.taskId;
    });
    nowImgs?.forEach((item, index) => {
      if (item.id == modalImage.value.id) {
        if (index != 0) {
          beforeImageVif.value = true;
        } else {
          beforeImageVif.value = false;
        }
        if (index != nowImgs.length - 1) {
          afterImageVif.value = true;
        } else {
          afterImageVif.value = false;
        }
      }
    });
    setVisible(true);
  };
  const beforeImageVif = ref(false);
  const afterImageVif = ref(false);
  let nowImgs: any = [];
  // 上一张
  function beforeImage() {
    for (let index = 0; index < nowImgs.length; index++) {
      const item = nowImgs[index];
      if (item.id == modalImage.value.id) {
        modalImage.value = nowImgs[index - 1];
        if (isValidUrl(modalImage.value.path)) {
          modalImage.value.path = modalImage.value.path;
        } else {
          modalImage.value.path = VITE_GLOB_API_URL_VAR.value + modalImage.value.path;
        }
        if (index == 1) {
          beforeImageVif.value = false;
        }
        afterImageVif.value = true;
        return;
      }
    }
  }
  // 下一张
  function afterImage() {
    for (let index = 0; index < nowImgs.length; index++) {
      const item = nowImgs[index];
      if (item.id == modalImage.value.id) {
        modalImage.value = nowImgs[index + 1];
        if (isValidUrl(modalImage.value.path)) {
          modalImage.value.path = modalImage.value.path;
        } else {
          modalImage.value.path = VITE_GLOB_API_URL_VAR.value + modalImage.value.path;
        }
        if (index == nowImgs.length - 2) {
          afterImageVif.value = false;
        }
        beforeImageVif.value = true;
        return;
      }
    }
  }

  const setVisible = (value): void => {
    visible.value = value;
    if (!value) {
      emits('closeImageModal');
    }
  };
  // 正则表达式验证函数
  function isValidUrl(url: string): boolean {
    const regex =
      /^(?:http|ftp)s?:\/\/(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|localhost|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}|\[?[A-F0-9]*:[A-F0-9:]+\]?)(?::\d+)?(?:\/?|[\/?]\S+)$/i;
    return regex.test(url);
  }

  // 添加键盘事件监听器
  const addEventListener = () => {
    window.addEventListener('keydown', handleKeydown);
  };
  // 移除键盘事件监听器
  const removeEventListener = () => {
    window.removeEventListener('keydown', handleKeydown);
  };
  // 处理按键按下事件
  const handleKeydown = (event: KeyboardEvent) => {
    console.log(event.code, beforeImageVif, afterImageVif);
    if (event.code == 'ArrowLeft') {
      if (beforeImageVif.value) {
        beforeImage();
      }
    }
    if (event.code == 'ArrowRight') {
      if (afterImageVif.value) {
        afterImage();
      }
    }
  };
  // 在组件挂载时添加监听器
  onMounted(() => {
    addEventListener();
  });
  // 在组件卸载时移除监听器
  onBeforeUnmount(() => {
    removeEventListener();
  });
</script>
<style type="less" scoped>
  .toper {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 1082;
    width: 50%;
    font-size: 20px;
    top: 0px;
    height: auto; /* 自动高度，适应内容 */
    /* background: rgba(0, 0, 0, 0.4); */
  }

  .info-item {
    color: #ffffff;
    font-size: 20px; /* 后面三个项的字体大小 */
    margin-right: 30px; /* 每个 span 之间的间距 */
  }

  .info-item.solo {
    font-size: 20px; /* 第一个 span 的字体大小 */
    margin-bottom: 2px; /* 第一个 span 的底部间距 */
    height: 23px;
  }

  .info-row {
    display: flex; /* 使用 flex 布局使三个 span 排成一行 */
    flex-wrap: nowrap; /* 不允许换行 */
  }

  .info-row .info-item:last-child {
    margin-right: 0; /* 最后一个 span 不需要右边距 */
  }

  .leftOutlined {
    position: fixed;
    top: 50%;
    z-index: 1082;
    left: 0px;
    color: #ffffff;
    background-color: gray; /* 默认灰色背景 */
    border-radius: 50%; /* 圆形 */
    padding: 10px; /* 内边距 */
    margin: 5px; /* 外边距 */
    transition: background-color 0.3s ease; /* 平滑过渡 */
    cursor: pointer; /* 鼠标指针变为手型 */
    overflow: visible;
  }

  .rightOutlined {
    position: fixed;
    z-index: 1082;
    top: 50%;
    right: 0px;
    color: #ffffff;
    background-color: gray; /* 默认灰色背景 */
    border-radius: 50%; /* 圆形 */
    padding: 10px; /* 内边距 */
    margin: 5px; /* 外边距 */
    transition: background-color 0.3s ease; /* 平滑过渡 */
    cursor: pointer; /* 鼠标指针变为手型 */
  }

  .leftOutlined:hover {
    background-color: black; /* 鼠标悬停时背景颜色变为黑色 */
  }
  .rightOutlined:hover {
    background-color: black; /* 鼠标悬停时背景颜色变为黑色 */
  }
</style>
