<script setup lang="ts">
import { ref } from 'vue'

withDefaults(
  defineProps<{
    src: string
    label?: string
  }>(),
  {
    label: '点击查看示例',
  }
)

const open = ref(false)
</script>

<template>
  <div class="guide-image">
    <button type="button" class="guide-thumb" @click="open = true">
      <img :src="src" alt="示例图" loading="lazy" decoding="async" />
      <span class="guide-thumb-tip">{{ label }}</span>
    </button>

    <Teleport to="body">
      <div v-if="open" class="guide-viewer" @click="open = false">
        <button type="button" class="guide-viewer-close" @click="open = false">关闭</button>
        <img class="guide-viewer-img" :src="src" alt="示例大图" @click.stop />
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.guide-image {
  display: inline-flex;
}

.guide-thumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px dashed #c0c4cc;
  border-radius: 8px;
  background: #f7f9fc;
  cursor: zoom-in;
}

.guide-thumb img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
}

.guide-thumb-tip {
  color: #409eff;
  font-size: 12px;
  white-space: nowrap;
}

.guide-viewer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  justify-content: center;
  padding: 24px 12px;
  overflow: auto;
  background: rgba(0, 0, 0, 0.82);
}

.guide-viewer-img {
  width: min(720px, 94vw);
  height: fit-content;
  border-radius: 8px;
  cursor: default;
}

.guide-viewer-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3001;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 14px;
  cursor: pointer;
}
</style>
