<!-- 入库明细弹窗 -->
<template>
    <ele-modal :width="1200" v-model="visible" title="入库明细">
        <common-table
            ref="tableRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
            :flex-table="false"
            :bodyStyle="{ padding: 0 }"
            height="50vh"
            :show-overflow-tooltip="true"
        >
            <!-- 激活码图片插槽：避免 el-image 在表格单元格内触发组件更新异常 -->
            <template #urlLink="{ row }">
                <img
                    v-if="row.urlLink"
                    :src="row.urlLink"
                    alt="激活码图片"
                    class="code-image"
                    @click="handlePreview(row.urlLink)"
                />
                <span v-else class="no-image">暂无图片</span>
            </template>
        </common-table>

        <el-image-viewer
            v-if="showViewer"
            :url-list="previewList"
            :initial-index="0"
            @close="showViewer = false"
        />

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

<script setup>
    import { ref, reactive, watch, nextTick } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';

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

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

    /** 页面组件实例 */
    const tableRef = ref(null);

    /** 图片预览 */
    const showViewer = ref(false);
    const previewList = ref([]);

    /** 页面配置 */
    const pageConfig = reactive({
        pageUrl: '/activation/bookActivationInfo/pageInLogs',
        fileName: '入库明细',
        cacheKey: 'inDetailTable',
        rowKey: 'id',
        params: {}
    });

    /** 表格列配置 */
    const columns = ref([
        {
            label: '激活码图片',
            prop: 'urlLink',
            width: 120,
            align: 'center',
            slot: 'urlLink',
            showOverflowTooltip: false
        },
        { label: 'ISBN', prop: 'isbn', width: 140, align: 'center' },
        { label: '书名', prop: 'bookName', minWidth: 200, align: 'left' },
        {
            label: '仓库',
            prop: 'repositoryName',
            width: 120,
            align: 'center',
            formatter: (row) => row.repositoryName || '-'
        },
        {
            label: '数量',
            prop: 'num',
            width: 80,
            align: 'center',
            formatter: () => 1
        },
        {
            label: '状态',
            prop: 'status',
            width: 100,
            align: 'center',
            formatter: (row) => {
                const statusMap = {
                    1: '已入库',
                    2: '已作废'
                };
                return statusMap[row.status] || '未知';
            }
        },
        { label: '操作人', prop: 'operatorName', width: 120, align: 'center' },
        {
            label: '描述',
            prop: 'remark',
            minWidth: 150,
            align: 'left',
            formatter: (row) => row.remark || '-'
        },
        { label: '操作时间', prop: 'operatorTime', width: 160, align: 'center' }
    ]);

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

    /** 预览图片 */
    const handlePreview = (url) => {
        if (!url) return;
        previewList.value = [url];
        showViewer.value = true;
    };

    /** 弹窗打开事件 */
    const handleOpen = (isbn) => {
        if (!isbn) return;

        pageConfig.pageUrl = `/activation/bookActivationInfo/pageInLogs/${isbn}`;
        currentIsbn.value = isbn;
        pageConfig.params = { isbn };
        visible.value = true;

        nextTick(() => {
            tableRef.value?.reload();
        });
    };

    /** 监听弹窗关闭，清理数据 */
    watch(visible, (newVal) => {
        if (!newVal) {
            currentIsbn.value = '';
            pageConfig.params = {};
            showViewer.value = false;
            previewList.value = [];
        }
    });

    defineExpose({
        handleOpen
    });
</script>

<style scoped>
    .code-image {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
        display: block;
        margin: 0 auto;
    }

    .no-image {
        color: #c0c4cc;
        font-size: 12px;
    }
</style>
