<template>
  <div class="show-image-div">
    <div>
      <a-image-preview-group>
        <div class="show-image-item" v-for="(item, index) in props.data" :key="index">
          <!-- <div class="control-show">
            <a-radio-group v-model:value="select" button-style="solid" size="small">
              <a-radio-button :value="0">专题图</a-radio-button>
              <a-radio-button :value="1">截图</a-radio-button>
            </a-radio-group>
          </div> -->
          <a-image :width="460" :height="460" :src="get(item.url)" />
          <div class="footer">
            <div class="footer-div">
              <span style="margin-left: 35px">{{ item.specialText }}</span>
              <span style="margin-right: 40px">拍摄时间：{{ item.shijian }}</span>
            </div>
          </div>
        </div>
      </a-image-preview-group>
    </div>
    <div class="show-image-item" v-if="props.data.length == 0"> 暂无影像数据展示 </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineProps } from '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 props = defineProps(['data']);

  // 正则表达式验证URL
  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);
  }
  function get(url) {
    return (url = isValidUrl(url) ? url : VITE_GLOB_API_URL_VAR.value + url);
  }
</script>
<style lang="scss" scoped>
  .control-show {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index: 100;
  }

  .footer {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 50px;
    background: rgba(0, 0, 0, 0.4);
  }

  .footer-div {
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .show-image-div {
    max-height: 690px;
    overflow: auto;
    .show-image-item {
      width: 460px;
      height: 460px;
      margin-bottom: 5px;
      position: relative;
    }
  }
  .scroll-to-top {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #000000;
    border: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  ::v-deep .ant-image-mask {
    display: none !important;
  }
</style>
