<script>
import {sf_express_print} from '@/tools/print.tool';
import {getExpressRecordParams} from '@/api/prescription/prescriptionAudit';

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

      tag: `print-preview_${Date.now()}`,
      paper: '顺丰快递面单',

      model: null,
      device: null,
      printing: false,
    };
  },
  computed: {
    loading() {
      return !this.loaded || !this.preview;
    },
  },
  mounted() {
    // this.print(true);
  },
  methods: {
    async print(preview = false) {
      try {
        await this.getModel();
        if (preview) {

        } else {
          this.printing = true;
          await sf_express_print(this.model);
        }
      } catch (e) {}
      this.printing = false;
      this.loaded = true;
    },
    complete() {
      this.$message.success(`开始打印`);
      this.$emit('close', true);
    },

    async getModel() {
      if (this.model) return this.model;
      return getExpressRecordParams({prescriptionCoreId: this.id}).then((res) => {
        console.log(res);
        this.model = res.data;
        return this.model;
      });
    },
  },
};
</script>

<template>
  <div class="print-preview" v-loading="loading">
    <!--    <div class="top" :style="{backgroundColor: preview ? '#f0f0f0' : 'transparent'}"></div>-->
    <!--    <iframe :id="tag" @load="delay"></iframe>-->
    <div style="display: flex; align-items: center; justify-content: space-evenly;">
      <el-button style="width: 100%;" type="primary" :loading="printing" @click="printing = true;print()">
        打印
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.print-preview {
  margin: auto;
  width: 559px + 100px;
  display: flex;
  flex-direction: column;

  .top {
    height: 40px;
  }

  iframe {
    border: none;
    width: 100%;
    flex: auto;
  }

  > div {
    flex: none;
  }
}
</style>
