<template>
    <el-dialog
        title="标签打印"
        :visible.sync="visible"
        :width="col === 1 ? '550px' : '1000px'"
        @close = "close"
    >

        <div class="print-config">
            <div class="print-config-item" :class="{'full-row':col === 1}" v-for="(value, key) in printConfig">
                <span class="print-config-label">{{ key }}：</span>
                <span class="print-config-value">
                    <el-input class="print-config-input" disabled :value="value" placeholder="请输入" />
                </span>
            </div>
        </div>

        <template slot="footer" class="dialog-footer">
            <el-button  @click="close">{{ $t('form.cancel') }}</el-button>
            <el-button type="primary" @click="printTag">打印</el-button>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                printConfig: {},
                col: 1,//一行几列
            }
        },
        methods: {
            show(data) {
                const {printConfig,col} = data
                this.printConfig = printConfig
                this.col = col || 1;
                this.visible = true
            },
            close() {
                this.visible = false
            },
            printTag() {
                // 打印标签逻辑
                console.log("打印标签", this.formData)
            }
        }
    }
</script>

<style lang="scss" scoped>
.print-config {
    
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    // align-items: center;
    // justify-content: center;
}
.full-row{
    grid-column: span 2;
}
.print-config-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}
.print-config-label {
    font-weight: bold;
    width: 150px;
    text-align: right;
}
.print-config-value {
    margin-left: 10px;
}
.print-config-input{
    width: 300px;
}
</style>