<!-- 库存图片查看弹窗 -->
<template>
    <ele-modal form :width="900" v-model="visible" title="库存图片">
        <div class="stock-image-container">
            <!-- 图片网格 -->
            <div v-if="imageList.length > 0" class="image-grid">
                <div
                    v-for="(imageUrl, index) in imageList"
                    :key="index"
                    class="image-item"
                    @click="handleImageClick(imageUrl, index)"
                >
                    <el-image
                        :src="imageUrl"
                        fit="cover"
                        class="stock-image"
                        :preview-src-list="imageList"
                        :initial-index="index"
                        :preview-teleported="true"
                        @error="handleImageError"
                    />
                </div>
            </div>

            <!-- 空状态 -->
            <div v-else-if="!loading" class="empty-state">
                <el-empty description="暂无库存图片" />
            </div>

            <!-- 加载状态 -->
            <div v-if="loading" class="loading-state">
                <el-skeleton :rows="3" animated />
            </div>
        </div>

        <template #footer>
            <!-- 分页 -->
            <div class="pagination-container" v-if="total > 10">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
            <el-button @click="handleCancel">关闭</el-button>
        </template>
    </ele-modal>
</template>

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

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

    /** 当前ISBN */
    const currentIsbn = ref('');

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

    /** 图片列表 */
    const imageList = ref([]);

    /** 分页信息 */
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);

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

    /** 图片点击处理 */
    const handleImageClick = (imageUrl, index) => {
        // Element Plus 的 el-image 组件会自动处理预览
        console.log('点击图片:', imageUrl, '索引:', index);
    };

    /** 图片加载错误处理 */
    const handleImageError = (e) => {
        console.warn('图片加载失败:', e);
    };

    /** 分页大小改变 */
    const handleSizeChange = (newSize) => {
        pageSize.value = newSize;
        currentPage.value = 1;
        fetchStockImages();
    };

    /** 当前页改变 */
    const handleCurrentChange = (newPage) => {
        currentPage.value = newPage;
        fetchStockImages();
    };

    /** 获取库存图片 */
    const fetchStockImages = async () => {
        if (!currentIsbn.value) return;

        loading.value = true;
        try {
            const response = await request.get(
                `/activation/bookActivationInfo/stockImgPage/${currentIsbn.value}`,
                {
                    params: {
                        pageNum: currentPage.value,
                        pageSize: pageSize.value
                    }
                }
            );

            if (response.data.code === 200) {
                const data = response.data;
                imageList.value = data.rows || [];
                total.value = data.total || 0;
            } else {
                EleMessage.error(response.data.msg || '获取库存图片失败');
                imageList.value = [];
                total.value = 0;
            }
        } catch (error) {
            console.error('获取库存图片失败:', error);
            EleMessage.error('获取库存图片失败');
            imageList.value = [];
            total.value = 0;
        } finally {
            loading.value = false;
        }
    };

    /** 弹窗打开事件 */
    const handleOpen = (isbn) => {
        if (isbn) {
            currentIsbn.value = isbn;
            visible.value = true;
            currentPage.value = 1;
            pageSize.value = 24;
            total.value = 0;
            imageList.value = [];

            nextTick(() => {
                fetchStockImages();
            });
        }
    };

    /** 监听弹窗关闭，清理数据 */
    watch(visible, (newVal) => {
        if (!newVal) {
            currentIsbn.value = '';
            imageList.value = [];
            total.value = 0;
            currentPage.value = 1;
            loading.value = false;
        }
    });

    defineExpose({
        handleOpen
    });
</script>

<style scoped>
    .stock-image-container {
        height: 400px;
        overflow: auto;
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        height: 150px;
        gap: 16px;
        margin-bottom: 20px;
    }

    .image-item {
        position: relative;
        cursor: pointer;
        border-radius: 8px;
        overflow: hidden;
        transition: transform 0.2s ease;
        height: 150px;
    }

    .image-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .stock-image {
        width: 100%;
        height: 150px;
        border-radius: 8px;
    }

    .empty-state {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 300px;
    }

    .loading-state {
        padding: 20px;
    }

    .pagination-container {
        background: white;
        display: flex;
        justify-content: center;
        padding: 0 0;
        z-index: 10;
    }
</style>
