<script lang="ts" setup name="showPhoto">
import { getFileUrl } from '@/api/common'
const props = defineProps({
  minioFileName: {
    type: String,
    required: true,
  },
  height: {
    type: String,
    default: '100px',
  },
  width: {
    type: String,
    default: '100px',
  },
})
const isPhoto = computed(() => {
  return props.minioFileName.split('.')[1] === 'png' || props.minioFileName.split('.')[1] === 'jpg' || props.minioFileName.split('.')[1] === 'jpeg'
})
const url = ref('')
const getPhoto = () => {
  if (props.minioFileName) {
    getFileUrl(props.minioFileName).then((res) => {
      url.value = res.data
    })
  }
}

onMounted(() => {
  getPhoto()
})
onUpdated(() => {
  getPhoto()
})
</script>

<template>
  <div class="container">
    <slot />
    <el-image
      v-if="props.minioFileName && isPhoto"
      :style="{ width: props.width, height: props.height }"
      :src="url"
      :preview-src-list="[url]"
      fit="cover"
    />
    <el-link
      v-else :href="url" type="primary"
      style="margin-right: 10px;"
      target="_blank"
    >
      {{ props.minioFileName }}
    </el-link>
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: relative;

  ::v-deep {
    .el-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom: 1px solid var(--el-link-hover-text-color);
    }
  }
}
</style>