<template>
  <div>
    <div class="tag">
      <div style="display: flex;height: 160px;">
        <div style="border-right: 1px solid #999; width: 140px">
          <div style="text-align: center">
            <p style="margin-top: 1mm; text-align: center">
              <span style="text-align: center; font-weight: 600; font-size: 3mm">{{ $t('扫码查看产品数量') }}</span>
            </p>
            <img :src="tagData.qrCodeUrl" :alt="tagData.qrCodeUrl" style="width: 26mm"/>
            <p style="margin-top: -1mm; text-align: center">
              <span style="text-align: center; font-weight: 600; font-size: 4mm">{{ tagData.mergePkgNo }}</span>
            </p>
          </div>
        </div>
        <div style="width: 140px">
          <p style="margin-top: 1mm; text-align: center">
            <span style="text-align: center; font-weight: 600; font-size: 4mm">{{ tagData.mergePkgNo }}</span>
          </p>
          <div style="border-top: 1px solid #999;margin-left: 10px;"/>
          <p style="margin-top: 1mm; text-align: center">
            <span style="text-align: center; font-weight: 600; font-size: 4mm">{{ tagData.company }}</span>
          </p>
          <div style="border-top: 1px solid #999;margin-left: 10px;"/>
          <p style="margin-top: 1mm; text-align: center">
            <span style="text-align: center; font-weight: 600; font-size: 4mm">{{
                tagData.startWarehouse
              }} -> {{ tagData.endWarehouse }}</span>
          </p>
          <div style="border-top: 1px solid #999;margin-left: 10px;"/>
          <div style="display: flex;margin-top: 10px;">
            <div style="border-right: 1px solid #999;width: 45px;">
              <p style="margin-top: 1mm; text-align: center">
                <span style="text-align: center; font-weight: 600; font-size: 4mm">{{ tagData.transportName }}</span>
              </p>
            </div>
            <div style="width: 90px;">
              <p style="margin-top: 1mm; text-align: center">
                <span style="text-align: center; font-weight: 600; font-size: 4mm">{{ tagData.date }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div style="border-top: 1px solid #999;margin: 10px;"/>
      <div style="padding: 10px; width: 250px; height: 20px; text-align: center; font-size: 12px; color:#000;">
        E&C Logistics: www.groupage.com
      </div>
    </div>
    <div style="text-align:center;margin-top: 20px;">
      <el-button type="primary" @click="print">{{ $t('确定打印') }}</el-button>
    </div>
  </div>
</template>

<script>
import lodop from '@/utils/lodop'
export default {
  props: {
    tagData: Object
  },
  methods: {
    print(){
            let items = document.getElementsByClassName('tag')
            if(!items.length){
                return this.$message.error(this.$t('没有可打印的内容'))
            }
            if(items.length > 1000){
                this.$alert(this.$t('标签超过1000需要耐心等候标签生成，请稍候'))
            }
            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(0,0,800,600, items[i].outerHTML);
                    if(i < items.length){
                        LODOP.NewPage()
                    }
                }
                LODOP.PREVIEW();

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

        }
  }
}
</script>

<style scoped>
.tag {
  width: 300px;
  height: 300px;
  /* background-color: #e2dede; */
  text-align: center;
  padding: 15px;
  border: 1px solid #999;
  border-radius: 5px;
}
</style>
