<!-- 展示上传-多个 -->
<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',
  },
  showClose: {
    type: Boolean,
    default: true,
  },
})
const $emits = defineEmits(['delete'])
const $route = useRoute()
const urlList = ref()
const getPhoto = () => {
  console.log(props.minioFileName, 'props.minioFileName')
  if (props.minioFileName) {
    // getPhotoUrl(props.minioFileName).then((res) => {
    //   url.value = res.data
    // })
    const arr = props.minioFileName.split(',')
    console.log(arr, 'arrarrarr')
    if (arr.length) {
      urlList.value = arr.map((item) => {
        return {
          minioFileName: item,
          url: '',
        }
      })
      urlList.value.forEach((item: any) => {
        getPhotoUrl(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') && $props.showClose" 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 {
    // font-size: 24px;
    position: absolute;
    top: -20px;
    right: -10px;
    display: none;
    z-index: 99;
    height: 30px;
    width: 30px;
    color: rgb(245 235 228);
    // background-color: #ccc;
    // text-align: center;
    /* stylelint-disable-next-line alpha-value-notation */
    background-color: rgba($color: #000, $alpha: 0.3);
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
  }
  // &::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>