<!-- 入库详情弹窗 -->
<template>
    <ele-modal
        v-model="visible"
        title="入库详情"
        :width="600"
        @closed="handleClosed"
    >
        <div v-loading="loading" class="detail-container">
            <!-- 图片详情 -->
            <div class="image-section">
                <div v-if="imageUrl" class="image-container">
                    <div class="image-item" @click="previewImage">
                        <img
                            :src="imageUrl"
                            alt="入库图片"
                            class="main-image"
                        />
                    </div>
                </div>
                <div v-else class="no-images"> 暂无图片 </div>
            </div>
        </div>

        <!-- 图片预览 -->
        <el-image-viewer
            v-if="showImageViewer"
            :url-list="[imageUrl]"
            :initial-index="0"
            @close="closeImageViewer"
        />

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

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

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

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

    /** 图片地址 */
    const imageUrl = ref('');

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

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

    /** 弹窗关闭事件 */
    const handleClosed = () => {
        // 重置数据
        imageUrl.value = '';
        loading.value = false;
        showImageViewer.value = false;
    };

    /** 预览图片 */
    const previewImage = () => {
        if (imageUrl.value) {
            showImageViewer.value = true;
        }
    };

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

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

            if (response.data.code === 200) {
                imageUrl.value = response.data.data || '';
            } 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;
            fetchInDetail(id);
        } else {
            EleMessage.warning('缺少必要参数');
        }
    };

    defineExpose({
        handleOpen
    });
</script>

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

    .image-section {
        text-align: center;
    }

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

    .image-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

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

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

    .main-image {
        width: 100%;
        max-height: 400px;
        object-fit: contain;
        display: block;
    }

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