<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="$t('订单号')">
                <el-input v-model="detail.orderNo" readonly></el-input>
              </el-form-item>
              <el-form-item :label="$t('起始标签')" prop="start" required>
                <el-input v-model.number="form.start" type="number"></el-input>
              </el-form-item>
              <el-form-item :label="$t('结束标签')" prop="end" required>
                <el-input v-model.number="form.end" type="number"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" @click="showPreview">{{$t('去打印')}}</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div  v-if="step=='preview'" style="height:250px; overflow-y:hidden">
            <div
                class="order-print-tag-item"
                v-for="(item, index) in tags.filter(tag => tag.num >= form.start && tag.num <= form.end)"
                style="width: 80mm; margin: 0 auto;" :id="'order-print-tag' + item.num"
                :style="{display: index == 0 ? 'block':'none' }"
                :key="item.num">
                <div style="float: left; width: 28mm; border-bottom: 0.2mm solid #333; border-right: 0.2mm solid #333; " >
                    <img :src="item.url" :alt="item.url" style="width: 26mm" />
                    <p style=" text-align: center; height: 5mm; font-size: 3mm; -webkit-margin-before: 0em; -webkit-margin-after: 0em; margin-top: 0mm; " >
                        {{item.tag}}
                    </p>
                    <p style="margin-top: -1mm; text-align: center">
                        <span style="text-align: center; font-weight: 600; font-size: 6mm" >{{item.num}}</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; " >
                        {{item.orderNo}}
                    </p>
                    <p style="padding:0; border-bottom: 0.2mm solid #333; text-align: center; line-height: 7mm; padding-top: 2mm; padding-bottom: 2mm; margin: 0px; font-weight: 600; font-size: 6mm; word-break: break-all; height: 12mm; overflow: hidden;box-sizing: content-box;">
                        {{item.marks}}
                    </p>

                    <p style=" white-space: nowrap; 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: 3mm; padding-bottom: 2.5mm;">
                        {{item.startTitleEn}} --&gt;
                        <label style="font-weight: 600; font-size: 5.5mm">{{item.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; " >
                        {{item.inTime|parseTime('{y}-{m}-{d}')}}
                    </p>
                </div>
                <div style="width: 76mm">
                    <p style="text-align: center; margin：0">
                        <!-- <label
                            style="font-size: 5mm; font-weight: 600; padding-right: 1mm"
                            >E&amp;C</label
                        > -->{{item.foot}}
                    </p>
                </div>
            </div>
        </div>
        <div v-if="step=='preview'" style="text-align:center;">
            <el-button type="primary" @click="print">{{$t('确定打印')}}</el-button>
        </div>
    </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,
            tags: [],
            step: 'form',
            form:{
                start: 1,
                end: 1
            },
            currentNo: 1
        }
    },
    computed:{
        detail(){
            return this.tags.length ? this.tags[0] : null
        },
        title(){
            let t = this.$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, 'tags', res.data)
                this.form.end = res.data.length
            })
        },
        closeDialog(){
            console.log('关闭')
            this.show = false
            this.$emit('close');
        },
        showPreview(){
            if(this.form.end > this.tags.length){
                return this.$message.error(this.$t('结束标签不对'))
            }
            this.$refs["form"].validate(valid => {
                if (!valid) {
                    return;
                }
                this.currentNo = this.form.start
                this.step = 'preview'
            })
        },
        print(){
            let items = document.getElementsByClassName('order-print-tag-item')
            if(!items.length){
                return this.$message.error(this.$t('没有可打印的内容'))
            }

            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 in items){
                    LODOP.ADD_PRINT_HTM("2mm",0,800,600, items[i].innerHTML);
                    if(i < items.length){
                        LODOP.NewPage()
                    }
                }
                LODOP.PREVIEW();

                //  // 预览
                /* LODOP.PRINTA(); // 选择打印机
                 // 直接打印 */
                console.log('打印哦')
            }).catch(err => {
                console.error('lodop异常', err)
                // alert('请检查LODOP打印控件是否安装并启动');
            })

        }
    }
}
</script>
