<template>
    <el-dialog :title="title" visible :before-close="closeDialog">
        <div class="" v-if="step == 'form'">
            <el-form ref="form" :model="form" label-position="left" label-width="100px">
              <el-form-item v-if="detail" label="订单号">
                <el-input v-model="detail.orderNo" readonly></el-input>
              </el-form-item>
              <el-form-item label="起始标签" prop="start" required>
                <el-input v-model.number="form.start" type="number"></el-input>
              </el-form-item>
              <el-form-item label="结束标签" prop="end" required>
                <el-input v-model.number="form.end" type="number" :max="detail ? detail.num : 1"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" @click="showPreview">去打印</el-button>
              </el-form-item>
            </el-form>
        </div>
        <template  v-if="step=='preview'">
            <div style="width: 80mm; margin: 0 auto;" id="order-print-tag" v-if="detail">
                <div style="float: left; width: 28mm; border-bottom: 0.2mm solid #333; border-right: 0.2mm solid #333; " >
                    <img :src="detail.url" alt="ECP0063704N-1" style="width: 26mm" />
                    <p style=" text-align: center; height: 5mm; font-size: 3mm; -webkit-margin-before: 0em; -webkit-margin-after: 0em; margin-top: 0mm; " >
                        {{detail.orderNo}}-{{currentNo}}
                    </p>
                    <p style="margin-top: -1mm; text-align: center">
                        <span style="text-align: center; font-weight: 600; font-size: 6mm" >{{currentNo}}</span>
                    </p>
                </div>
                <div style="float: left; width: 50mm; margin-bottom: 2mm">
                    <p style=" padding-top: 0px; border-bottom: 0.2mm solid #333; text-align: center; line-height: 6mm; padding: 0px; padding-bottom: 2.5mm; margin: 0px; font-weight: 600; font-size: 6mm; " >
                        {{detail.orderNo}}
                    </p>
                    <p style=" padding: 0px; border-bottom: 0.2mm solid #333; text-align: center; line-height: 6mm; padding: 0px; padding-top: 2.6mm; padding-bottom: 2.6mm; margin: 0px; font-weight: 600; font-size: 6mm; " >
                        {{detail.marks}}
                    </p>

                    <p style=" padding: 0px; border-bottom: 0.2mm solid #333; text-align: center; line-height: 6mm; padding: 0px; margin: 0px; font-size: 5mm; text-transform: uppercase; padding-top: 3.5mm; padding-bottom: 2.5mm; " >
                        {{detail.startTitleEn}} --&gt;
                        <label style="font-weight: 600; font-size: 5.5mm">{{detail.destTitleEn}} </label>
                    </p>
                    <p style=" padding: 0px; padding-top: 2.7mm; padding-bottom: 2.7mm; padding-left: 3mm; float: left; width: 29%; border-bottom: 0.2mm solid #333; text-align: center; line-height: 6mm; font-size: 4mm; text-transform: uppercase; margin: 0px; " >
                        LCL
                    </p>
                    <p style=" padding: 0px; padding-top: 2.7mm; padding-bottom: 2.7mm; padding-left: 4mm; float: left; border-left: 0.2mm solid #333; border-bottom: 0.2mm solid #333; text-align: center; line-height: 6mm; margin: 0px; font-size: 5mm; text-transform: uppercase; font-weight: 500; " >
                        {{detail.inTime|parseTime('{y}-{m}-{d}')}}
                    </p>
                </div>
                <div style="width: 76mm">
                    <p style="text-align: center">
                        <label
                            style="font-size: 5mm; font-weight: 600; padding-right: 1mm"
                            >E&amp;C</label
                        >{{detail.foot}}
                    </p>
                </div>
            </div>
            <div style="text-align:center;">
                <el-button type="primary" @click="print">确定打印</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import {printTag} from '@/api/ecw/order'
import {parseTime} from '@/utils/ruoyi'
import lodop from '@/utils/lodop'

export default {
    filters: {parseTime},
    props:{
        orderId: [String, Number]
    },
    data(){
        return {
            show: false,
            detail: null,
            step: 'form',
            form:{
                start: 1,
                end: 1
            },
            currentNo: 1
        }
    },
    computed:{
        title(){
            let t = '打印标签'
            if(this.detail){
                t += '-' + this.detail.orderNo
            }
            return t
        }
    },
    created(){
        this.show = true
        this.loadData()
    },
    methods:{
        loadData(){
            printTag(this.orderId).then(res => {
                this.$set(this, 'detail', res.data[0])
            })
        },
        closeDialog(){
            console.log('关闭')
            this.show = false
            this.$emit('close');
        },
        showPreview(){
            this.$refs["form"].validate(valid => {
                if (!valid) {
                    return;
                }
                this.currentNo = this.form.start
                this.step = 'preview'
            })   
        },
        print(){
            lodop().then(LODOP => {
                LODOP.PRINT_INIT(this.title);
                LODOP.SET_PRINT_STYLE("FontSize",18);
                LODOP.SET_PRINT_STYLE("Bold",1);
                // LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
                LODOP.SET_PRINT_PAGESIZE(0, 800, 600, "TAG");
                for(let i = this.form.start; i <= this.form.end; i ++){
                    LODOP.ADD_PRINT_HTM(0,0,800,600, document.getElementById("order-print-tag").innerHTML);
                    if(i < this.form.end){
                        LODOP.NewPage()
                    }
                }
                LODOP.PREVIEW();
                
                //  // 预览
                /* LODOP.PRINTA(); // 选择打印机
                 // 直接打印 */
                console.log('打印哦')
            }).catch(err => {
                console.error('lodop异常', err)
                alert('请检查LODOP打印控件是否安装并启动');
            })
            
        }
    }
}
</script>