<template>


    <view class="top">

        <img style="width: 80rpx; height: 80rpx;" src="../../../static//logo/logo.jpg" />

        <svg id="barcodeSvg" ref="barcodeRef"></svg>

    </view>
    <view class="content mt-16">
        <p>物料：
            <span>{{ material?.materialName }}</span>
            <span v-if="material?.quantity">x {{ material?.quantity }}</span>
        </p>
        <p>描述：
            <span v-if="material?.description">{{ material?.description || '-' }}</span>
            <span v-else>
                <span v-if="material?.materialShortName">{{ material?.materialShortName }} / </span>
                <span v-if="material?.model">{{ material?.model }} / </span>
                <span v-if="material?.specification">{{ material?.specification }} / </span>
                <span v-if="material?.typeName">{{ material?.typeName }} </span>
            </span>
        </p>
        <view class="top">
            <p>备注：
                <!-- 简称/型号/规格/物料类型 -->
                <span>{{ material?.qrCodeMark || '' }}</span>

            </p>
            <img :src="qrCode" class="qrcode" />
        </view>
    </view>


</template>

<script setup>
import { onMounted, computed } from 'vue';
import JsBarcode from 'jsbarcode'

const props = defineProps({
    detail: {
        type: Object,
        default: null,
    }
})
// 条形码容器
console.log(props.detail, 'props.detail');

// 二维码
const qrCode = computed(() => props.detail?.[0]?.qrCode);
// 物料数据
const material = computed(() => props.detail?.[0]);
// 条形码
const barcodeValue = computed(() => props.detail?.[0]?.code);
const generateBarcode = () => {
    const svg = document.getElementById('barcodeSvg')
    // SVG渲染：直接调用JsBarcode，无需清空（会自动替换内容）
    JsBarcode(svg, barcodeValue.value, {
        format: 'CODE128', // 常用的CODE128格式（支持任意字符）
        width: 3,
        height: 80,
        displayValue: false,
        margin: 10 // 条形码四周留白
    })
}
onMounted(generateBarcode)

</script>

<style scoped lang="scss">
.qrcode {
    width: 120rpx;
    height: 120rpx;
}

.top {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.content {
    p {
        font-weight: 600;
        font-size: 14px;

    }

    span {
        font-weight: 400;
        font-size: 14px;
    }
}
</style>