<script lang="ts" setup name="showPhoto">
import { getPhotoUrl } from '@/api/system/tool'
const props = defineProps({
  minioFileName: {
    type: String,
    required: true,
  },
  height: {
    type: String,
    default: '100px',
  },
  width: {
    type: String,
    default: '100px',
  },
})
const urlList = ref()
const getPhoto = () => {
  if (props.minioFileName) {
    // getPhotoUrl(props.minioFileName).then((res) => {
    //   url.value = res.data
    // })
    const arr = props.minioFileName.split(',')
    urlList.value = arr.map((item) => {
      return {
        minioFileName: item,
        url: '',
      }
    })
    urlList.value.value.forEach((item) => {
      getPhotoUrl(item.minioFileName).then((res) => {
        item.url = res.data
      })
    })
  }
}

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

<template>
  <div class="container">
    <slot />
    <el-link :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>