<!-- 激活码出库单弹窗 -->
<template>
    <ele-modal
        form
        :width="600"
        v-model="visible"
        title="激活码出库单"
        @closed="handleClosed"
    >
        <div class="out-stock-info">
            <div class="info-row">
                <span class="label">ISBN:</span>
                <span class="value">{{ outStockData.isbn || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">书名:</span>
                <span class="value">{{ outStockData.bookName || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">数量:</span>
                <span class="value">{{ outStockData.num || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">链接:</span>
                <span
                    class="value link-text"
                    @click="handleRedirect(outStockData.urlLink)"
                    >{{ outStockData.urlLink || '-' }}</span
                >
            </div>

            <div class="info-row">
                <span class="label">提取码:</span>
                <span class="value">{{ outStockData.extCode || '-' }}</span>
            </div>

            <div class="info-row">
                <span class="label">备注:</span>
                <span class="value">{{ outStockData.remark || '-' }}</span>
            </div>
        </div>

        <template #footer>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleCopyAll">
                复制全部
            </el-button>
        </template>
    </ele-modal>
</template>

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

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

    /** 出库数据 */
    const outStockData = reactive({
        isbn: '',
        bookName: '',
        num: '',
        urlLink: '',
        extCode: '',
        remark: ''
    });

    /** 处理链接点击事件 */
    const handleRedirect = (url) => {
        if (url) {
            window.open(url, '_blank');
        }
    };

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

    /** 弹窗关闭事件 */
    const handleClosed = () => {
        // 重置数据
        Object.assign(outStockData, {
            isbn: '',
            bookName: '',
            num: '',
            urlLink: '',
            extCode: '',
            remark: ''
        });
    };

    /** 复制全部信息 */
    const handleCopyAll = async () => {
        try {
            // 格式化复制内容
            const copyText = `ISBN: ${outStockData.isbn || '-'}
书名: ${outStockData.bookName || '-'}
数量: ${outStockData.num || '-'}
链接: ${outStockData.urlLink || '-'}
提取码: ${outStockData.extCode || '-'}
备注: ${outStockData.remark || '-'}`;

            // 使用 Clipboard API 复制到剪贴板
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(copyText);
            } else {
                // 降级方案：使用 document.execCommand
                const textArea = document.createElement('textarea');
                textArea.value = copyText;
                textArea.style.position = 'fixed';
                textArea.style.left = '-999999px';
                textArea.style.top = '-999999px';
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                document.execCommand('copy');
                textArea.remove();
            }

            EleMessage.success('复制成功');
        } catch (error) {
            console.error('复制失败:', error);
            EleMessage.error('复制失败，请手动复制');
        }
    };

    /** 弹窗打开事件 */
    const handleOpen = (data) => {
        if (data) {
            Object.assign(outStockData, {
                isbn: data.isbn || '',
                bookName: data.bookName || '',
                num: data.num || '',
                urlLink: data.urlLink || '',
                extCode: data.extCode || '',
                remark: data.remark || ''
            });
            visible.value = true;
        }
    };

    defineExpose({
        handleOpen
    });
</script>

<style scoped>
    .out-stock-info {
        padding: 20px 0;
        padding-left: 50px;
    }

    .info-row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;
        line-height: 1.5;
    }

    .info-row:last-child {
        margin-bottom: 0;
    }

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

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

    .link-text {
        color: #1890ff;
        cursor: pointer;
    }

    .link-text:hover {
        text-decoration: underline;
    }
</style>
