<template>
  <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="470" :height="470" :src="get(url)" />
  <div class="footer" v-if="haveFooter">
    <slot name="footer" />
  </div>
</template>

<script setup lang="ts">
  import { ref, defineProps, computed } 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 + '/');
  // 正则表达式验证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);
  }

  const select = ref(0);
  const props = defineProps(['data', 'haveFooter']);
  const {
    data: { url, screenshotUrl },
    haveFooter = false,
  } = props;
</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);
  }
</style>
