<script>
import Print_tag_80_50 from '@/components/print/tag_80_50.vue';
import Print_tag_60_40 from '@/components/print/tag_60_40.vue';
import Print_recipe_a5 from '@/components/print/recipe_A5.vue';
import Print_ticket_72 from '@/components/print/ticket_72.vue';
import Print_express_75 from '@/components/print/express_75.vue';
import {updatePrintStatus} from '@/api/prescription/prescriptionCore';

export default {
  name: 'printContainer',
  props: {
    id: {type: [String, Number], required: true},
    loadExpress: {type: Boolean, default: false},
    loadTagS: {type: Boolean, default: false},
  },
  components: {Print_tag_60_40, Print_express_75, Print_ticket_72, Print_recipe_a5, Print_tag_80_50},
  data() {
    return {
      selected: 'print0',
    };
  },
  computed: {
    height() { return `${window.innerHeight * 0.8}`; },
    style() { return {height: `${this.height}px`}; },
  },
  watch: {},
  mounted() {
    this.select(this.selected);
  },
  methods: {
    async print() {
      const keys = Object.keys(this.$refs).filter(key => key.startsWith('print'));
      try {
        for (const key of keys) {
          const el = this.$refs[key];
          await el['print']();
        }
        this.$message.success(`组合打印成功`);
      } catch (e) {
        this.$message.error(`出错了，请重试`);
      }
    },
    update(type) {
      if (type === 0 || type === 1) {
        updatePrintStatus({
          isPrint: '1',
          id: this.id,
        });
      }
    },
    select(name) {
      try {
        const el = this.$refs[name];
        el['print'](true);
      } catch (e) {}
    }
  },
};
</script>

<template>
  <div>
    <el-button class="pin" type="primary" @click="print">组合打印</el-button>
    <el-tabs tab-position="left" :style="style" v-model="selected" @tab-click="select($event.name)">
      <el-tab-pane label="标签" name="print0">
        <print_tag_80_50 ref="print0" :id="id" @click="$event && update(0)"></print_tag_80_50>
      </el-tab-pane>
      <el-tab-pane v-if="loadTagS" label="小包标签" name="print4">
        <print_tag_60_40 ref="print4" :id="id" @click="$event && update(0)"></print_tag_60_40>
      </el-tab-pane>
      <el-tab-pane label="处方笺" name="print1">
        <print_recipe_a5 ref="print1" :id="id" :style="style" @click="$event && update(1)"></print_recipe_a5>
      </el-tab-pane>
      <el-tab-pane label="药品清单" name="print2">
        <print_ticket_72 ref="print2" :id="id" :style="style" @click="$event && update(2)"></print_ticket_72>
      </el-tab-pane>
      <el-tab-pane v-if="loadExpress" label="顺丰面单" name="print3">
        <print_express_75 ref="print3" :id="id" :style="style" @click="$event && update()"></print_express_75>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.pin {
  position: absolute;
  top: 12px;
  right: 60px;
}
</style>
