<template>
  <div>
    <!-- 打印窗口 -->
    <el-dialog
      append-to-body
      title="打印条码"
      :before-close="handleClose"
      :visible.sync="openBarCode"
      width="1000px"
    >
      <div class="content-wrap">
        <div class="content" v-for="(item, index) in config" :key="index">
          <div
            ref="print_content"
            class="lengthways"
            :style="
              'width:' +
              item.sizeWide +
              'cm;' +
              'height:' +
              item.sizeLong +
              'cm;' +
              'border: 2px black solid;'
            "
          >
            <div class="vertical-top1">
              <div class="top-img">
                <div class="top-span">
                  <p
                    :style="
                      'font-size:' +
                      item.fontSizeCode1 +
                      'cm;font-family:' +
                      item.typefaceCode1
                    "
                  >
                    {{ item.code1 }}
                  </p>
                  <p
                    :style="
                      'font-size:' +
                      item.fontSizeCode2 +
                      'cm;font-family:' +
                      item.typefaceCode2
                    "
                  >
                    {{ item.code2 }}
                  </p>
                </div>
                <div class="logoImg">
                  <!-- <img src="@/assets/img/codeLogo.png" alt="" /> -->
                </div>
              </div>
              <div class="bottom-span">
                <div class="top">
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode3 +
                      'cm;font-family:' +
                      item.typefaceCode3
                    "
                    >{{ item.code3 }}</span
                  >
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode4 +
                      'cm;font-family:' +
                      item.typefaceCode4
                    "
                    >{{ item.code4 }}</span
                  >
                </div>
                <div class="bottom">
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode5 +
                      'cm;font-family:' +
                      item.typefaceCode5
                    "
                    >{{ item.code5 }}</span
                  >
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode6 +
                      'cm;font-family:' +
                      item.typefaceCode6
                    "
                    >{{ item.code6 }}</span
                  >
                </div>
              </div>
            </div>
            <div class="vertical-bottom1">
              <div class="bot-top">
                <vue-qr
                  :logoSrc="item.imagePath"
                  :text="item.qrCode ? item.qrCode : ''"
                  class="vueQrSize"
                ></vue-qr>
              </div>
              <div class="bot-bottom">
                <div class="bot-con">
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode7 +
                      'cm;font-family:' +
                      item.typefaceCode7
                    "
                    >{{ item.code7 }}</span
                  >
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode8 +
                      'cm;font-family:' +
                      item.typefaceCode8
                    "
                    >{{ item.code8 }}</span
                  >
                </div>
                <div class="bot-con">
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode9 +
                      'cm;font-family:' +
                      item.typefaceCode9
                    "
                    >{{ item.code9 }}</span
                  >
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode10 +
                      'cm;font-family:' +
                      item.typefaceCode10
                    "
                    >{{ item.code10 }}</span
                  >
                </div>
                <div class="bot-con">
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode11 +
                      'cm;font-family:' +
                      item.typefaceCode11
                    "
                    >{{ item.code11 }}</span
                  >
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode12 +
                      'cm;font-family:' +
                      item.typefaceCode12
                    "
                    >{{ item.code12 }}</span
                  >
                </div>
                <div class="bot-con">
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode13 +
                      'cm;font-family:' +
                      item.typefaceCode13
                    "
                    >{{ item.code13 }}</span
                  >
                  <span
                    :style="
                      'font-size:' +
                      item.fontSizeCode14 +
                      'cm;font-family:' +
                      item.typefaceCode14
                    "
                    >{{ item.code14 }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer" style="margin-right: 2%">
        <el-button
          size="small"
          @click="Print"
          v-loading="PrintLoading"
          v-show="!isPrint"
          type="primary"
          >打印</el-button
        >
        <el-button size="small" @click="handleClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import { downloadPDF } from '@/utils/pdf.js'
export default {
  components: {
    VueQr
  },
  props: {
    config: {
      type: Array,
      default () {
        return []
      }
    },
    openBarCode: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isPrint: false,
      dataList: [],
      PrintLoading: false
    }
  },
  methods: {
    //打印
    Print () {
      this.PrintLoading = true
      let print_content = this.config.map((n, index) => {
        return this.$refs.print_content[index]
      })
      downloadPDF(print_content, 'p').then(res => {
        this.PrintLoading = false
      })
    },
    handleClose () {
      this.$emit('update:openBarCode', false)
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  letter-spacing: 0.1px !important;
}
.content-wrap {
  height: 500px;
  overflow-y: auto;
}
.content {
  display: flex;
  justify-content: center;
  .active-top {
    width: 100%;
    height: 40%;
    display: flex;
    border-bottom: 2px black solid;
    .span-con {
      width: 80%;
      height: 100%;
      padding: 5px 10px;
      .con-top,
      .con-bottom {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-between;
        span {
          font-weight: bold;
          display: inline-block;
          margin-top: 10px;
        }
      }
    }
    .logoImg {
      width: 20%;
      height: 70%;
      margin: 10px;
      text-align: right;
      img {
        width: 100%;
        height: 80%;
      }
    }
  }
  .active-bottom {
    height: 60%;
    display: flex;
    justify-content: space-between;
    .left-con {
      padding: 5px;
      width: 70%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .span-box {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        span {
          font-weight: bold;
          display: inline-block;
          margin: 0 5px;
        }
      }
    }
    .vue-qr {
      width: 40%;
      height: 100%;
      border-left: 2px black solid;
      .vueQrSize {
        width: 100%;
      }
    }
  }
  .vertical-top1 {
    width: 100%;
    height: 40%;
    border-bottom: 2px black solid;
    .top-img {
      width: 100%;
      height: 50%;
      padding: 5px 10px;
      display: flex;
      .top-span {
        width: 70%;
        height: 100%;
        margin-top: 10px;
        p {
          font-weight: bold;
          height: 50%;
          line-height: 50%;
        }
      }
      .logoImg {
        width: 30%;
        height: 80%;
        text-align: right;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .bottom-span {
      padding: 5px 10px;
      width: 100%;
      height: 50%;
      .top,
      .bottom {
        width: 100%;
        height: 50%;
        margin-top: 2%;
        display: flex;
        justify-content: space-between;
        span {
          font-weight: bold;
          display: inline-block;
          height: 50%;
          line-height: 50%;
        }
      }
    }
  }
  .vertical-bottom1 {
    width: 100%;
    // height: 60%;
    // .bot-top {
    //   width: 100%;
    //   height: 65%;
    //   display: flex;
    //   justify-content: center;
    //   flex-wrap: wrap;
    // }
    // .bot-bottom {
    //   width: 100%;
    //   height: 45%;
    //   display: flex;
    //   .qr-span {
    //     width: 60%;
    //     height: 100%;
    //     padding: 10px;
    //     span {
    //       display: inline-block;
    //       width: 100%;
    //       height: 50%;
    //       font-weight: bold;
    //       line-height: 50%;
    //     }
    //   }
    //   .vue-qr {
    //     width: 50%;
    //     height: 100%;
    //     border-left: 2px black solid;
    //     border-top: 2px black solid;
    //     .vueQrSize {
    //       width: 100%;
    //       height: 100%;
    //     }
    //   }
    // }
  }

  .lengthways {
    img {
      height: 100%;
    }

    .vertical-top1 {
      height: 30%;
    }

    .vertical-bottom1 {
      height: 70%;
      .bot-top {
        height: 55%;
        display: flex;
        justify-content: center;
      }

      .bot-bottom {
        width: 100%;
        height: 45%;
        flex-wrap: wrap;

        .bot-con {
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          padding: 0 10px;
          & + .bot-con {
            margin-top: 2%;
          }
        }
      }
    }
  }
  .crosswise,
  .lengthways {
    transition: all 0.5s;
  }
}
</style>
