<template>
  <div class="image-preview-demo">
    <a-card title="ImagePreviewModal 图片预览组件示例">
      <a-space direction="vertical" :size="24" style="width: 100%">
        <!-- 基础用法 -->
        <a-card title="基础用法" size="small">
          <p class="demo-desc">点击图片或按钮打开预览模态框，支持缩放、旋转、拖拽和下载功能</p>
          <a-space>
            <img
              :src="demoImages[0]"
              alt="示例图片1"
              class="thumbnail"
              @click="openPreview(demoImages[0], '风景图片')"
            />
            <a-button type="primary" @click="openPreview(demoImages[0], '风景图片')">
              <a-icon type="eye" />
              预览图片
            </a-button>
          </a-space>
        </a-card>

        <!-- 多图片切换 -->
        <a-card title="多图片预览" size="small">
          <p class="demo-desc">点击不同图片进行预览</p>
          <a-space>
            <img
              v-for="(img, index) in demoImages"
              :key="index"
              :src="img"
              :alt="`示例图片${index + 1}`"
              class="thumbnail"
              @click="openPreview(img, `示例图片${index + 1}`)"
            />
          </a-space>
        </a-card>

        <!-- 功能说明 -->
        <a-card title="功能说明" size="small">
          <a-descriptions :column="1" bordered size="small">
            <a-descriptions-item label="缩放">鼠标滚轮或点击工具栏 +/- 按钮，支持 10%-300% 缩放</a-descriptions-item>
            <a-descriptions-item label="旋转">点击工具栏旋转按钮，每次旋转 90°</a-descriptions-item>
            <a-descriptions-item label="拖拽">鼠标左键按住图片拖动</a-descriptions-item>
            <a-descriptions-item label="下载">点击下载按钮保存图片到本地</a-descriptions-item>
            <a-descriptions-item label="关闭">点击关闭按钮、遮罩层或按 ESC 键关闭</a-descriptions-item>
          </a-descriptions>
        </a-card>

        <!-- API 文档 -->
        <a-card title="API 属性" size="small">
          <a-table :columns="apiColumns" :data-source="apiData" :pagination="false" size="small" />
        </a-card>

        <!-- 事件文档 -->
        <a-card title="事件" size="small">
          <a-table :columns="eventColumns" :data-source="eventData" :pagination="false" size="small" />
        </a-card>
      </a-space>
    </a-card>

    <!-- 图片预览组件 -->
    <image-preview-modal
      :visible="previewVisible"
      :image-url="previewImage"
      :image-name="previewImageName"
      @close="previewVisible = false"
    />
  </div>
</template>

<script>
import ImagePreviewModal from './ImagePreviewModal.vue'

export default {
  name: 'ImagePreviewModalDemo',
  components: {
    ImagePreviewModal
  },
  data() {
    return {
      // 预览状态
      previewVisible: false,
      previewImage: '',
      previewImageName: '',
      // 示例图片（使用占位图服务）
      demoImages: [
        'https://picsum.photos/800/600?random=1',
        'https://picsum.photos/600/800?random=2',
        'https://picsum.photos/800/800?random=3'
      ],
      // API 表格列
      apiColumns: [
        { title: '属性', dataIndex: 'prop', width: 150 },
        { title: '说明', dataIndex: 'desc' },
        { title: '类型', dataIndex: 'type', width: 100 },
        { title: '默认值', dataIndex: 'default', width: 120 }
      ],
      // API 数据
      apiData: [
        { key: '1', prop: 'visible', desc: '是否显示预览模态框', type: 'Boolean', default: 'false' },
        { key: '2', prop: 'imageUrl', desc: '图片URL地址', type: 'String', default: "''" },
        {
          key: '3',
          prop: 'imageName',
          desc: '图片名称（用于下载时的文件名）',
          type: 'String',
          default: "'preview_image'"
        }
      ],
      // 事件表格列
      eventColumns: [
        { title: '事件名', dataIndex: 'event', width: 150 },
        { title: '说明', dataIndex: 'desc' },
        { title: '回调参数', dataIndex: 'params', width: 150 }
      ],
      // 事件数据
      eventData: [{ key: '1', event: 'close', desc: '关闭模态框时触发', params: '-' }]
    }
  },
  methods: {
    // 打开预览
    openPreview(url, name) {
      this.previewImage = url
      this.previewImageName = name
      this.previewVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.image-preview-demo {
  padding: 24px;

  .demo-desc {
    color: #666;
    margin-bottom: 16px;
  }

  .thumbnail {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #d9d9d9;
    transition: all 0.3s;

    &:hover {
      border-color: #1890ff;
      box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
    }
  }
}
</style>
