<script>
import CLodop from '@/libs/print/CLodop';
import {getDevice, getDevices} from '@/tools/print.tool';
import {template60_40} from '@/components/print/template';
import {getPrint} from '@/api/decoct/recipe';

export default {
  name: 'print_tag_60_40',
  props: {
    id: {type: [String, Number], required: true},
    selectable: Boolean,
  },
  data() {
    return {
      loaded: false,
      preview: false,
      total: 1,

      tag: `print-preview_${Date.now()}`,
      paper: '发药标签',
      paperWidth: 60 * 10,
      paperHeight: 40 * 10,

      model: null,
      device: null,
      devices: [],
      printing: false,
    };
  },
  computed: {
    loading() {
      return !this.loaded || !this.preview;
    },
    deviceId() {
      return this.device ? this.device.index : '';
    }
  },
  mounted() {
    if (this.selectable) getDevices().then(devices => this.devices = devices);
    this.loaded = true;
  },
  methods: {
    async print(preview = false) {
      if (preview) this.loaded = false;

      const instance = await CLodop();
      const model = await this.getModel();
      const postfix = model.recipe.usageMethod;
      template60_40.call(instance, model, `${this.paper}`);

      const device = await this.getDevice(postfix);
      if (device) {
        if (device.papers.includes(this.paper)) instance['SET_PRINT_PAGESIZE'](1, 0, 0, this.paper);
        else instance['SET_PRINT_PAGESIZE'](1, this.paperWidth, this.paperHeight, 'CreateCustomPage');

        instance['SET_PRINTER_INDEX'](device.index);
        instance['SET_PRINT_COPIES'](this.total);

        if (preview) {
          instance['SET_PREVIEW_WINDOW'](1, 1, 1, 0, 0, `${this.paper}.开始打印`);
          instance['SET_SHOW_MODE']('PREVIEW_IN_BROWSE', true);
          instance['SET_PRINT_MODE']('AUTO_CLOSE_PREWINDOW', true);
          instance['PREVIEW'](this.tag);
        } else {
          if (instance['PRINT']()) this.complete();
          else this.$message.warning(`请检查打印机 (${this.device.name})`);
        }
      } else if (preview) {
        this.devices = await getDevices();
      } else {
        if (instance['PRINTA']()) this.complete();
        else this.$message.warning(`请检查打印机`);
      }

      this.printing = false;
      this.loaded = true;
    },
    delay() {
      setTimeout(() => {this.preview = true;}, 500);
    },
    complete() {
      this.$message.success(`开始打印`);
      this.$emit('close', true);
    },

    async getModel() {
      if (this.model) return this.model;

      return getPrint({id: this.id}).then((res) => {
        const data = res.data;
        this.model = {
          patient: {
            name: data['name'],
            gender: data['sex'],
            birthday: data['patientBirthday'],
          },
          recipe: {
            count: data['number'],
            total: data['packageNumber'],
            method: data['prescriptionusage'],
            usageMethod: data['usageMethod'],
            volume: data['packageDose'] ? `${data['packageDose']}ml` : '',
            delivery: data['expressExecutor'],
            decoction: data['isBehalf'] === '1' ? '代煎' : '自煎',
          },
          department: [data['department'], data['bedNo']].filter(Boolean).join(' '),
          record: {
            title: data['medicalName'],
            date: data['createTime'],
            no: data['preNo'],
            orderNo: data['orderNo'],
            recordNo: data['recipientCode'],
            category: data['preMzZy'] === '1' ? '门诊' : '住院',
            remark: data['remark'] || [data['frequency'], data['medicationTime']].filter(Boolean).join('，'),
          },
        };
        this.total = this.model.recipe.total;

        return this.model;
      });
    },

    async getDevice(postfix= '') {
      if (!this.device) this.device = await getDevice(
        `name: Six:${this.paper}-${postfix}`,
        `name: Six:${this.paperWidth}*${this.paperHeight}-${postfix}`,
        `name: Six:${this.paper}`,
        `name: Six:${this.paperWidth}*${this.paperHeight}`,
        `driver: Gprinter GP-1324D; paper: ${this.paper}`,
        `paper:${this.paper}`,
        `driver: Gprinter GP-1324D;`,
      );
      return this.device;
    },

    selected(value) {
      this.device = this.devices.find(device => device.index === value);
      this.print(true);
    }
  },
};
</script>

<template>
  <div class="print-preview" v-loading="loading">
    <div v-loading="loading">
      <div class="top" :style="{backgroundColor: preview ? '#f0f0f0' : 'transparent'}">
        {{ device && device.name }}
      </div>
      <iframe :id="tag" @load="delay"></iframe>
    </div>
    <div style="display: flex; align-items: center; justify-content: space-evenly;">
      <el-tooltip class="item" effect="dark" content="打印数量" placement="top">
        <el-input-number style="width: 120px;" v-model="total" :min="1" :disabled="printing"></el-input-number>
      </el-tooltip>
      <el-select v-if="devices.length" placeholder="打印机" :value="deviceId" @change="selected">
        <el-option v-for="item in devices" :key="item.index" :label="item.name" :value="item.index"></el-option>
      </el-select>
      <el-button type="primary" :loading="printing" @click="printing = true;print()">打印</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.print-preview {
  margin: auto;
  width: 300px;

  .top {
    height: 40px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
  }

  iframe {
    border: none;
    width: 100%;
    height: 240px;
  }

  .el-select {
    margin: 0 12px;
    flex: 1;
  }
}
</style>
