<template>
  <div class="print" v-loading="loading">
    <div class="print-item">
      <div class="title" style="font-weight: bold;">
        <span>{{printInfo.medicalName}}(代煎中心)</span>
        <span>{{printInfo.createTime}}</span>
      </div>
      <div class="name">
        <span>{{printInfo.name}}，{{printInfo.sex}}，{{printInfo.patientBirthday}}</span>
        <span v-if="printInfo.preMzZy==1">门诊</span>
        <span v-else-if="printInfo.preMzZy==2">住院</span>
      </div>
      <div class="bar">
        <!-- <img src alt class="bar-img" /> -->
        <div style="display: flex;flex-direction: column;justify-content: center;">
          <JsBarcode
            v-if="printInfo.preNo"
            :presno="printInfo.preNo"
          ></JsBarcode>
        </div>
        <div class="bar-msg">
          <div class="flex-center">
            <span>剂数：{{printInfo.number}}</span>
            <span>包数：{{printInfo.packageNumber}}</span>
          </div>
          <div>包装量：
            <span v-if="printInfo.packageDose">{{printInfo.packageDose}}ml</span>
          </div>
          <div>处方用法：{{printInfo.prescriptionusage}}</div>
        </div>
      </div>
      <div class="title" style="margin-bottom: 0px;">
        <span>科室/病区：{{printInfo.department}}{{ printInfo.bedNo||'' }}</span>
      </div>
      <div class="title" style="margin-bottom: 0;">
        <span>备注：{{printInfo.frequency}}
          <span v-if="printInfo.medicationTime">，{{ printInfo.medicationTime }}</span>
        </span>
      </div>
    </div>
    <div>
      <div style="display: flex;align-items: center;margin-bottom: 20px;">
        <span style="flex-shrink: 0;">打印数量：</span>
        <el-input size="mini" v-model="printNum" type="number"></el-input>
      </div>
      <el-button type="primary" @click="print">打印</el-button>
    </div>
  </div>
</template>
<script>
import printer from '@/utils/printer.js'
import JsBarcode from "@/components/JsBarcode/index.vue";
import { getPrint } from "@/api/decoct/recipe";
export default {
  components: { JsBarcode },
  props: {
    id: [Number, String]
  },
  data() {
    return {
      printInfo: {},
      loading: false,
      printNum: 1
    }
  },
  mixins: [printer],
  created() {

  },
  methods: {
    getInfo() {
      this.loading = true;
      getPrint({id: this.id}).then((response) => {
        this.printInfo = response.data
        this.loading = false;
        this.printNum = this.printInfo.packageNumber
        // this.modelChange(data)
      });
    },
    print() {
      const printWidth = 215
      const px2mm = 3.75
      const mm2dot = 8
      let data = `
        SIZE 60 mm,40 mm
        GAP 2 mm,0 mm
        OFFSET 0 mm
        REFERENCE ${( 10 / px2mm + 1.5 ) * mm2dot},0
        SPEED 4
        DENSITY 8
        DIRECTION 1
        SET HEAD ON
        SET PRINTKEY OFF
        SET KEY1 ON
        SET KEY2 ON
        SHIFT 0
        SET PEEL ON
        SET TEAR ON
        BACKFEED 0
        CLS
        TEXT 0,${ 10 / px2mm * mm2dot },"TSS24.BF2",0,1,1,"${this.printInfo.medicalName}(代煎中心)"
        TEXT ${(printWidth - 62) / px2mm * mm2dot},${10 / px2mm * mm2dot},"TSS24.BF2",0,1,1,"${this.printInfo.createTime}"
        TEXT 0,${ 28 / px2mm * 8 },"TSS24.BF2",0,1,1,"${this.printInfo.name}, ${this.printInfo.sex}, ${this.printInfo.patientBirthday}"
        TEXT ${(printWidth - 28) / px2mm * mm2dot},${28 / px2mm * mm2dot},"TSS24.BF2",0,1,1,"${this.printInfo.preMzZy==1 ? '门诊' : '住院'}"
        BARCODE 0,${45 / px2mm * mm2dot},"128",${45 / px2mm * mm2dot},1,0,2,4,"${this.printInfo.preNo}"
        TEXT ${(printWidth - 104) / px2mm * mm2dot},${(45 + 2) / px2mm * mm2dot},"TSS24.BF2",0,1,1,"剂数：${this.printInfo.number}"
        TEXT ${(printWidth - 50) / px2mm * mm2dot},${(45 + 2) / px2mm * mm2dot},"TSS24.BF2",0,1,1,"包数：${this.printInfo.packageNumber}"
        TEXT ${(printWidth - 104) / px2mm * mm2dot},${(45 + 22) / px2mm * mm2dot},"TSS24.BF2",0,1,1,"包装量：${this.printInfo.packageDose}ml"
        TEXT ${(printWidth - 104) / px2mm * mm2dot},${(45 + 42) / px2mm * mm2dot},"TSS24.BF2",0,1,1,"处方用法：${this.printInfo.prescriptionusage}"
        TEXT 0,${112 / px2mm * mm2dot},"TSS24.BF2",0,1,1,"科室/病房：${this.printInfo.department}${this.printInfo.bedNo||''}"
        TEXT 0,${130 / px2mm * mm2dot},"TSS24.BF2",0,1,1,"备注：${this.printInfo.frequency||''}${this.printInfo.medicationTime ? (', ' + this.printInfo.medicationTime) : ''}"
        PRINT ${this.printNum},1
      `
      this.recipeId = this.id
      this.modelChange(data, 'recipe')
    }
  },
}
</script>
<style lang="scss" scoped>
.print {
  display: flex;
  align-items: flex-start;
  // justify-content: flex-start;
  justify-content: center;

  &-item {
    margin-right: 30px;
    width: 60mm;
    height: 40mm;
    // width: 300px;
    // height: 150px;
    border: 1px solid #000;
    box-sizing: border-box;
    padding: 5px;
    font-size: 12px;
    flex-shrink: 0;
  }

  .flex-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .name {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .bar {
    display: flex;
    // align-items: flex-start;
    align-items: center;
    justify-content: space-between;
    // margin-bottom: 5px;

    &-img {
      flex: 0 0 55%;
      background: red;
      height: 57px;
    }

    &-msg {
      flex: 1;
      // margin-left: 10px;
    }
    ::v-deep svg{
      width: 28mm !important;
      height: auto !important;
    }
  }
}
</style>
