<template>
  <teleport v-if="show" to="#app">
    <div class="container">
      <el-icon class="close-icon" @click="show = false"><CircleClose /></el-icon>
      <el-drawer
        v-model="showDrawer"
        direction="ltr"
        size="20%"
        :show-close="false"
        :modal="false"
        :lock-scroll="false"
        :close-on-press-escape="false"
        style="background-color: rgba(0, 0, 0, 0.6)"
      >
        <template #header>
          <span style="color: #fff">资源详情</span>
        </template>
        <div>
          <div class="flex mb-18px">
            <div class="w-80px text-light-50">标题：</div>
            <div class="flex-1 ml-10px text-light-50">{{ info.title }}</div>
          </div>
          <div class="flex mb-18px">
            <div class="w-80px text-light-50">文件名称：</div>
            <div class="flex-1 ml-10px text-light-50 w-80px" style="word-wrap: break-word">{{
              info.files
            }}</div>
          </div>
          <div class="flex mb-18px">
            <div class="w-80px text-light-50">标签：</div>
            <div class="flex-1 ml-10px w-80px">
              <el-tag class="mr-5px" v-for="(item, index) in info.tags" :key="index">
                {{ getDictLabel('knowledge_tags', item) }}
              </el-tag>
            </div>
          </div>
          <div class="flex mb-18px">
            <div class="w-80px text-light-50">备注：</div>
            <div class="flex-1 ml-10px text-light-50">{{ info.remark }}</div>
          </div>
        </div>
        <template #footer>
          <div class="flex justify-between">
            <el-button plain :disabled="imgIndex <= 0" @click="imgIndex--">上一张</el-button>
            <el-button plain :disabled="imgIndex >= imgList.length - 1" @click="imgIndex++"
              >下一张</el-button
            >
          </div>
        </template>
      </el-drawer>

      <img :src="info.files" :alt="info.files" srcset="" class="width-fit img" />
      <div class="img-idx">{{ imgIndex + 1 }} / {{ imgList.length }}</div>
    </div>
  </teleport>
</template>

<script setup>
import { getDictLabel } from '@/utils/dict'
import { ElIcon } from 'element-plus'
import { CircleClose } from '@element-plus/icons-vue'

const show = ref(false)
const imgIndex = ref(0)
const imgList = ref([])
const showDrawer = ref(true)

function open(idx = 0, arr = []) {
  show.value = true
  imgIndex.value = idx
  imgList.value = arr
}

const info = computed(() => {
  return imgList.value[imgIndex.value]
})

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss" scoped>
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba($color: #000000, $alpha: 0.5);
  z-index: 9999999;
  max-width: 100%;

  .close-icon {
    position: absolute;
    top: 40px;
    right: 40px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 9999;
  }

  :deep(.el-form-item__label) {
    color: #fff;
  }

  .img {
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate3d(-50%, -50%, 0);
    width: 30%;
  }

  .img-idx {
    position: absolute;
    bottom: 50px;
    left: 60%;
    transform: translateX(-50%);
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    color: #fff;
    text-align: center;
    background-color: rgba($color: #000000, $alpha: 0.6);
  }
}
</style>
