<template>
    <div class="main" v-loading="loading">
        <!-- 条形码及信息 -->
        <div id="printArea">
            <div v-for="(item, index) in packingData" :key="index" class="barcode-section">
                {{ item.MARK_NO }}
                <div class="barcode-container">
                    <canvas :ref="(el) => setBarcodeRef(el, index)"></canvas>
                </div>
                <div class="info">
                    <p>数量: {{ item.saleNum || 1 }}</p>
                    <p>客户: {{ item.customerName || '未知' }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted, nextTick } from 'vue'
import JsBarcode from 'jsbarcode';
import { useI18n } from 'vue-i18n'
import { toast } from "~/composables/util";
import { closePopup } from "~/composables/popupManager";
import { apiService} from "~/api/order.js";

const route = useRoute()
const { t } = useI18n()

// 条形码 canvas 引用
const barcodeRefs = ref([])
const loading = ref(false)
const currentOrderNo = ref('')
const currentPACKINGSEQ = ref('')
const currentBOXNO = ref('')
const packingData = ref([])
// 设置条形码引用
const setBarcodeRef = (el, index) => {
    if (el) barcodeRefs.value[index] = el
}

// 生成所有条形码
const generateBarcodes = () => {
    packingData.value.forEach((item, index) => {
        const canvas = barcodeRefs.value[index]
        if (canvas && item.MARK_NO) {

            JsBarcode(canvas, item.MARK_NO, {
                format: "CODE128",// 条码类型：使用 CODE128 格式（支持字母、数字和符号）
                displayValue: false,       // 是否显示条码下方的文字内容
                fontSize: 16,              // 显示文字的字体大小(displayValue为true时有效)
                margin: 10,                // 条码周围的边距（上下左右均为 10px）
                width: 2,                  // 每个条形码线条的宽度（数值越大条越宽）
                height: 50,                // 条形码的高度（单位 px）
                textAlign: "center",       // 条码下方文字的对齐方式（居中）
                textMargin: 10,            // 文字与条码之间的间距（单位 px）
                fontOptions: "",           // 字体样式修饰（如 bold、italic 等）
                font: "monospace",         // 使用的字体（monospace 是等宽字体，适合打印）
                background: "#ffffff",     // 条码背景颜色（白色）
                lineColor: "#000000",      // 条码线条颜色（黑色）
                marginTop: 10,             // 条码上方额外的边距（覆盖 margin 的值）
                marginBottom: 10,          // 条码下方额外的边距（覆盖 margin 的值）
                marginLeft: 0,             // 条码左侧边距（覆盖 margin 的值）
                marginRight: 0             // 条码右侧边距（覆盖 margin 的值）
            })
        }
    })


  window.print() // 默认打开浏览器打印
}

const getCoupangDetail = async (orderNo, packingSeq, boxNO) => {
    if (!packingSeq) {
        packingSeq = ''
        boxNO = ''
    }

    try {
        loading.value = true
        const res = await apiService.getOneMarkingCode(orderNo, packingSeq, boxNO)
        if (res.code === 200) {
            packingData.value = Array.isArray(res.data) ? res.data : [res.data]
            await nextTick()
            generateBarcodes()
        } else {
            toast(`${t('common.error')}`, 'error')
            setTimeout(() => {
                handleClose()
            }, 500)
        }
    } finally {
        loading.value = false
    }
}



onMounted(() => {
       getCoupangDetail(currentOrderNo.value, 
                        currentPACKINGSEQ.value, 
                        currentBOXNO.value)
})


const handleClose = () => {
    // 关闭弹窗
}
</script>

<style scoped>
.main {
    width: 100%;
    padding: 0 8px;
    color: #313131;
}

.barcode-section {
    page-break-after: always;
    /* 确保每个条目都在新的一页 */
    margin-bottom: 20px;
}

.barcode-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.info {
    text-align: center;
}
</style>