<!-- 展示上传-多个 -->
<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 $emits = defineEmits(['delete'])
const $route = useRoute()
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.forEach((item: any) => {
      getFileUrl(item.minioFileName).then((res) => {
        item.url = res.data
      })
    })
  }
  else {
    urlList.value = []
  }
}

onMounted(() => {
  getPhoto()
})
watch(() => props.minioFileName, (newval) => {
  getPhoto()
})
// onUpdated(() => {

// })
const close = (fileName: string) => {
  $emits('delete', fileName)
}
</script>

<template>
  <div class="container">
    <slot />
    <a v-for="item in urlList" :key="item.url + item.name" class="link" :href="item.url" type="primary" style="margin-right: 10px;" target="_blank">
      {{ item.minioFileName }}
      <span v-if="!$route.path.includes('detail')" class="close" @click.stop.capture.prevent="close(item.minioFileName)">x</span>
    </a>
  </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);
//     }
//   }
// }

.link {
  position: relative;
  color: #5d93ff;
  display: inline-block;
  font-size: 16px;
  text-decoration: none;
  // margin-right: 10px;
  padding-right: 10px;
  height: 33px;
  line-height: 33px;

  &:hover {
    text-decoration: underline;

    .close {
      display: block;
    }
  }

  .close {
    position: absolute;
    top: -20px;
    right: -10px;
    display: none;
    z-index: 99;
    height: 40px;
    width: 40px;
    color: rgb(121 118 115);
    // background-color: #ccc;
    text-align: center;
  }
  // &::before {
  //   content: "x";
  //   width: 15px;
  //   height: 15px;
  //   position: absolute;
  //   right: -4px;
  //   top: -16px;
  //   color: #817d7d;
  //   font-size: 16px;
  //   // background-color: #ccc;
  //   // border-radius: 50%;
  //   display: none;
  // }

  // &:hover {
  //   &::before {
  //     display: block;
  //   }
  // }
}
</style>