<template>
  <div class="x-image-preview-demo">
    <a-card title="XImagePreview 图片预览组件示例">
      <a-space direction="vertical" :size="24" style="width: 100%">
        <!-- 基础用法 -->
        <a-card title="1. 基础用法" size="small">
          <p class="demo-desc">点击图片可预览大图，支持缩放、旋转、拖拽和下载功能</p>
          <a-space :size="16">
            <x-image-preview
              :src="demoImages[0]"
              image-name="风景图片"
            />
            <x-image-preview
              :src="demoImages[1]"
              image-name="示例图片2"
            />
            <x-image-preview
              :src="demoImages[2]"
              image-name="示例图片3"
            />
          </a-space>
        </a-card>

        <!-- 不同尺寸 -->
        <a-card title="2. 不同尺寸" size="small">
          <p class="demo-desc">通过 size 属性设置图片尺寸（单位：px）</p>
          <a-space :size="16" align="end">
            <div class="size-demo-item">
              <x-image-preview
                :src="demoImages[0]"
                :size="40"
              />
              <div class="size-label">40px</div>
            </div>
            <div class="size-demo-item">
              <x-image-preview
                :src="demoImages[0]"
                :size="60"
              />
              <div class="size-label">60px（默认）</div>
            </div>
            <div class="size-demo-item">
              <x-image-preview
                :src="demoImages[0]"
                :size="80"
              />
              <div class="size-label">80px</div>
            </div>
            <div class="size-demo-item">
              <x-image-preview
                :src="demoImages[0]"
                :size="100"
              />
              <div class="size-label">100px</div>
            </div>
          </a-space>
        </a-card>

        <!-- 不同形状 -->
        <a-card title="3. 不同形状" size="small">
          <p class="demo-desc">通过 shape 属性设置图片形状（square 方形 / circle 圆形）</p>
          <a-space :size="16">
            <div class="shape-demo-item">
              <x-image-preview
                :src="demoImages[1]"
                shape="square"
                :size="80"
              />
              <div class="shape-label">方形（默认）</div>
            </div>
            <div class="shape-demo-item">
              <x-image-preview
                :src="demoImages[1]"
                shape="circle"
                :size="80"
              />
              <div class="shape-label">圆形</div>
            </div>
          </a-space>
        </a-card>

        <!-- 错误处理 -->
        <a-card title="4. 错误处理" size="small">
          <p class="demo-desc">图片加载失败或为空时，显示占位图标</p>
          <a-space :size="16">
            <div class="error-demo-item">
              <x-image-preview
                src=""
                :size="60"
              />
              <div class="error-label">空地址</div>
            </div>
            <div class="error-demo-item">
              <x-image-preview
                src="/invalid/path/image.jpg"
                :size="60"
              />
              <div class="error-label">无效地址</div>
            </div>
            <div class="error-demo-item">
              <x-image-preview
                src="https://invalid-domain-xyz.com/image.jpg"
                :size="60"
              />
              <div class="error-label">加载失败</div>
            </div>
          </a-space>
        </a-card>

        <!-- 表格中的应用 -->
        <a-card title="5. 在表格中使用" size="small">
          <p class="demo-desc">配置 slotType 为 'imageView' 即可在表格中展示图片</p>
          <a-table
            :columns="tableColumns"
            :data-source="tableData"
            :pagination="false"
            bordered
            size="small"
          >
            <template slot="productImage" slot-scope="text">
              <x-image-preview
                :src="text"
                :size="60"
                shape="square"
              />
            </template>
          </a-table>
        </a-card>

        <!-- 禁用预览 -->
        <a-card title="6. 禁用预览功能" size="small">
          <p class="demo-desc">设置 preview 为 false，仅展示图片不支持点击预览</p>
          <a-space :size="16">
            <div class="preview-demo-item">
              <x-image-preview
                :src="demoImages[0]"
                :size="60"
                :preview="true"
              />
              <div class="preview-label">启用预览（默认）</div>
            </div>
            <div class="preview-demo-item">
              <x-image-preview
                :src="demoImages[0]"
                :size="60"
                :preview="false"
              />
              <div class="preview-label">禁用预览</div>
            </div>
          </a-space>
        </a-card>

        <!-- API 文档 -->
        <a-card title="组件 API" size="small">
          <a-tabs>
            <a-tab-pane key="props" tab="Props 属性">
              <a-table
                :columns="apiColumns"
                :data-source="apiData"
                :pagination="false"
                size="small"
                bordered
              />
            </a-tab-pane>
            <a-tab-pane key="events" tab="Events 事件">
              <a-table
                :columns="eventColumns"
                :data-source="eventData"
                :pagination="false"
                size="small"
                bordered
              />
            </a-tab-pane>
            <a-tab-pane key="table-config" tab="表格配置示例">
              <div class="code-example">
                <pre><code>// 在 XTable 的列配置中使用
{
  title: '产品图片',
  dataIndex: 'productImage',
  slotType: 'imageView',      // 设置为 imageView
  imageSize: 60,               // 可选，图片尺寸，默认 60
  imageShape: 'square',        // 可选，图片形状，默认 'square'
  imageNameField: 'productName', // 可选，指定图片名称字段
  width: 100,
  align: 'center'
}</code></pre>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-card>

        <!-- 使用提示 -->
        <a-card title="使用提示" size="small">
          <a-alert
            message="功能特性"
            type="info"
            show-icon
          >
            <template slot="description">
              <ul class="tips-list">
                <li>点击图片可打开全屏预览模态框，支持缩放、旋转、拖拽、下载等操作</li>
                <li>鼠标悬停时显示放大图标，提示可预览</li>
                <li>图片加载失败自动显示占位图标</li>
                <li>支持阻止事件冒泡，不会触发表格行点击事件</li>
                <li>完全兼容 ImagePreviewModal 组件的所有功能</li>
              </ul>
            </template>
          </a-alert>
        </a-card>
      </a-space>
    </a-card>
  </div>
</template>

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

export default {
  name: 'XImagePreviewDemo',
  components: {
    XImagePreview
  },
  data() {
    return {
      // 示例图片（使用占位图服务）
      demoImages: [
        'https://picsum.photos/800/600?random=1',
        'https://picsum.photos/600/800?random=2',
        'https://picsum.photos/800/800?random=3'
      ],
      // 表格列配置
      tableColumns: [
        {
          title: '序号',
          dataIndex: 'id',
          width: 80,
          align: 'center'
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          width: 200
        },
        {
          title: '产品图片',
          dataIndex: 'productImage',
          width: 100,
          align: 'center',
          scopedSlots: { customRender: 'productImage' }
        },
        {
          title: '价格',
          dataIndex: 'price',
          width: 120,
          align: 'right'
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 100,
          align: 'center'
        }
      ],
      // 表格数据
      tableData: [
        {
          id: 1,
          productName: '风景摄影作品集',
          productImage: 'https://picsum.photos/800/600?random=10',
          price: '¥ 299.00',
          status: '在售'
        },
        {
          id: 2,
          productName: '人像摄影教程',
          productImage: 'https://picsum.photos/600/800?random=11',
          price: '¥ 199.00',
          status: '在售'
        },
        {
          id: 3,
          productName: '建筑摄影精选',
          productImage: 'https://picsum.photos/800/800?random=12',
          price: '¥ 399.00',
          status: '在售'
        }
      ],
      // API 表格列
      apiColumns: [
        { title: '属性', dataIndex: 'prop', width: 120 },
        { title: '说明', dataIndex: 'desc', width: 250 },
        { title: '类型', dataIndex: 'type', width: 150 },
        { title: '默认值', dataIndex: 'default', width: 120 }
      ],
      // API 数据
      apiData: [
        {
          key: '1',
          prop: 'src',
          desc: '图片 URL 地址',
          type: 'String',
          default: "''"
        },
        {
          key: '2',
          prop: 'size',
          desc: '图片尺寸（单位：px）',
          type: 'Number',
          default: '60'
        },
        {
          key: '3',
          prop: 'shape',
          desc: "图片形状：'square' 方形 / 'circle' 圆形",
          type: 'String',
          default: "'square'"
        },
        {
          key: '4',
          prop: 'preview',
          desc: '是否启用预览功能',
          type: 'Boolean',
          default: 'true'
        },
        {
          key: '5',
          prop: 'imageName',
          desc: '图片名称（用于下载时的文件名）',
          type: 'String',
          default: "''"
        }
      ],
      // 事件表格列
      eventColumns: [
        { title: '事件名', dataIndex: 'event', width: 150 },
        { title: '说明', dataIndex: 'desc', width: 300 },
        { title: '回调参数', dataIndex: 'params', width: 150 }
      ],
      // 事件数据
      eventData: [
        {
          key: '1',
          event: 'click',
          desc: '点击图片时触发（无论是否启用预览）',
          params: '-'
        }
      ]
    }
  }
}
</script>

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

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

  // 尺寸示例样式
  .size-demo-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    .size-label {
      font-size: 12px;
      color: #666;
    }
  }

  // 形状示例样式
  .shape-demo-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    .shape-label {
      font-size: 12px;
      color: #666;
    }
  }

  // 错误示例样式
  .error-demo-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    .error-label {
      font-size: 12px;
      color: #999;
    }
  }

  // 预览示例样式
  .preview-demo-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    .preview-label {
      font-size: 12px;
      color: #666;
    }
  }

  // 代码示例样式
  .code-example {
    background: #f5f5f5;
    border-radius: 4px;
    padding: 16px;

    pre {
      margin: 0;
      
      code {
        font-family: 'Courier New', Courier, monospace;
        font-size: 13px;
        line-height: 1.6;
        color: #333;
      }
    }
  }

  // 提示列表样式
  .tips-list {
    margin: 8px 0 0 0;
    padding-left: 20px;

    li {
      line-height: 1.8;
      color: #666;
    }
  }
}
</style>
