<!--
 * @Author: xiejiang
 * @Date: 2024-11-06 09:53:55
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 21:55:38
 * @Description: 图片预览
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->

<template>
  <t-image-viewer
    v-for="(img, index) in props.images"
    :key="img"
    :default-index="index"
    :images="images"
    :on-close="onClose"
  >
    <template #trigger="{ open }">
      <div class="tdesign-demo-image-viewer__ui-image tdesign-demo-image-viewer__base">
        <img alt="test" :src="img" class="tdesign-demo-image-viewer__ui-image--img" />
        <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
          <span class="flex items-center"> <BrowseIcon size="1.4em" class="mr-[4px]" /> 预览 </span>
          <template v-if="props.isDel">
            <span class="mx-[8px]"> | </span>
            <span @click.stop="handleDel" class="flex items-center">
              <DeleteIcon size="1.2em" class="!mr-[4px]" /> 删除
            </span>
          </template>
        </div>
      </div>
    </template>
  </t-image-viewer>
</template>

<script setup lang="ts">
interface imageVierwer {
  images: string[]
  isDel?: boolean //是否显示删除按钮
}
const props = withDefaults(defineProps<imageVierwer>(), {
  images: () => [],
  isDel: false
})

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'onDel'): void
}>()

const handleDel = () => {
  emit('onDel')
}
const onClose = () => {
  emit('close')
}
</script>

<style scoped lang="less">
.tdesign-demo-image-viewer__ui-image {
  width: 100%;
  height: 100%;
  display: inline-flex;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: var(--td-radius-small);
  overflow: hidden;
}

.tdesign-demo-image-viewer__ui-image--hover {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: rgb(0 0 0 / 60%);
  color: var(--td-text-color-anti);
  line-height: 22px;
  transition: 0.2s;
}

.tdesign-demo-image-viewer__ui-image:hover .tdesign-demo-image-viewer__ui-image--hover {
  opacity: 1;
  cursor: pointer;
}

.tdesign-demo-image-viewer__ui-image--img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
  position: absolute;
}

.tdesign-demo-image-viewer__ui-image--footer {
  padding: 0 16px;
  height: 56px;
  width: 100%;
  line-height: 56px;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  color: var(--td-text-color-anti);
  background-image: linear-gradient(0deg, rgb(0 0 0 / 40%) 0%, rgb(0 0 0 / 0%) 100%);
  display: flex;
  box-sizing: border-box;
}

.tdesign-demo-image-viewer__ui-image--title {
  flex: 1;
}

.tdesign-demo-popup__reference {
  margin-left: 16px;
}

.tdesign-demo-image-viewer__ui-image--icons .tdesign-demo-icon {
  cursor: pointer;
}

.tdesign-demo-image-viewer__base {
  width: 160px;
  height: 160px;
  margin: 10px;
  border: 4px solid var(--td-bg-color-secondarycontainer);
  border-radius: var(--td-radius-medium);
}
</style>
