<!-- 出库详情弹窗 -->
<template>
    <ele-modal
        v-model="visible"
        title="出库详情"
        :width="800"
        @closed="handleClosed"
    >
        <div v-loading="loading" class="detail-container">
            <!-- 基本信息 -->
            <div class="info-section">
                <div class="info-row">
                    <span class="info-label">链接：</span>
                    <span class="info-value">{{
                        detailData.urlLink || '-'
                    }}</span>
                    <el-button
                        type="primary"
                        size="small"
                        @click="copyLink"
                        style="margin-left: 10px"
                    >
                        复制全部信息
                    </el-button>
                </div>
                <div class="info-row">
                    <span class="info-label">提取码：</span>
                    <span class="info-value">{{
                        detailData.extCode || '-'
                    }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">书名：</span>
                    <span class="info-value">{{
                        detailData.bookName || '-'
                    }}</span>
                </div>
                <div class="info-row">
                    <span class="info-label">数量：</span>
                    <span class="info-value">{{ detailData.num || 0 }}个</span>
                </div>
            </div>

            <!-- 图片详情 -->
            <div class="image-section">
                <h3 class="section-title">图片详情</h3>
                <div
                    v-if="detailData.imgList && detailData.imgList.length > 0"
                    class="image-grid"
                >
                    <div
                        v-for="(image, index) in detailData.imgList"
                        :key="index"
                        class="image-item"
                        @click="previewImage(image, index)"
                    >
                        <img
                            :src="image"
                            :alt="`图片${index + 1}`"
                            class="thumbnail"
                        />
                    </div>
                </div>
                <div v-else class="no-images"> 暂无图片 </div>
            </div>
        </div>

        <!-- 图片预览 -->
        <el-image-viewer
            v-if="showImageViewer"
            :url-list="detailData.imgList || []"
            :initial-index="currentImageIndex"
            @close="closeImageViewer"
        />

        <template #footer>
            <el-button @click="handleClose">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import request from '@/utils/request';

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

    /** 加载状态 */
    const loading = ref(false);

    /** 详情数据 */
    const detailData = reactive({
        isbn: '',
        bookName: '',
        num: 0,
        urlLink: '',
        extCode: '',
        imgList: []
    });

    /** 图片预览相关 */
    const showImageViewer = ref(false);
    const currentImageIndex = ref(0);

    /** 关闭弹窗 */
    const handleClose = () => {
        visible.value = false;
    };

    /** 弹窗关闭事件 */
    const handleClosed = () => {
        // 重置数据
        Object.assign(detailData, {
            isbn: '',
            bookName: '',
            num: 0,
            urlLink: '',
            extCode: '',
            imgList: []
        });
        loading.value = false;
        showImageViewer.value = false;
    };

    /** 复制完整信息 */
    const copyLink = async () => {
        if (detailData.urlLink) {
            try {
                const copyText = `链接：${detailData.urlLink}\n提取码：${detailData.extCode || ''}\n书名：${detailData.bookName || ''}\n数量：${detailData.num || 0}个`;
                await navigator.clipboard.writeText(copyText);
                EleMessage.success('信息复制成功');
            } catch (error) {
                console.error('复制失败:', error);
                EleMessage.error('复制失败');
            }
        } else {
            EleMessage.warning('暂无链接可复制');
        }
    };

    /** 预览图片 */
    const previewImage = (image, index) => {
        currentImageIndex.value = index;
        showImageViewer.value = true;
    };

    /** 关闭图片预览 */
    const closeImageViewer = () => {
        showImageViewer.value = false;
    };

    /** 获取出库详情 */
    const fetchOutDetail = async (id) => {
        try {
            loading.value = true;
            const response = await request.get(
                `/activation/bookActivationInfo/outDetail/${id}`
            );

            if (response.data.code === 200) {
                const data = response.data.data || {};
                Object.assign(detailData, {
                    isbn: data.isbn || '',
                    bookName: data.bookName || '',
                    num: data.num || 0,
                    urlLink: data.urlLink || '',
                    extCode: data.extCode || '',
                    imgList: data.imgList || []
                });
            } else {
                EleMessage.error(response.data.msg || '获取详情失败');
            }
        } catch (error) {
            console.error('获取出库详情失败:', error);
            EleMessage.error('获取详情失败');
        } finally {
            loading.value = false;
        }
    };

    /** 打开弹窗 */
    const handleOpen = (id) => {
        if (id) {
            visible.value = true;
            fetchOutDetail(id);
        } else {
            EleMessage.warning('缺少必要参数');
        }
    };

    defineExpose({
        handleOpen
    });
</script>

<style scoped>
    .detail-container {
        min-height: 300px;
    }

    .info-section {
        margin-bottom: 24px;
    }

    .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        font-size: 14px;
    }

    .info-label {
        font-weight: bold;
        color: #333;
        width: 80px;
        flex-shrink: 0;
    }

    .info-value {
        color: #666;
        flex: 1;
        word-break: break-all;
    }

    .image-section {
        border-top: 1px solid #eee;
        padding-top: 20px;
    }

    .section-title {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 16px;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }

    .image-item {
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .image-item:hover {
        border-color: #409eff;
        transform: scale(1.05);
    }

    .thumbnail {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .no-images {
        text-align: center;
        color: #999;
        padding: 40px 0;
        font-size: 14px;
    }
</style>
