<template>
  <div class="print-page-header">
    <a-radio-group key="4" id="print-printerType" v-model="printerType">
      <a-radio value="NEEDLE">针式</a-radio>
      <a-radio value="INK">喷墨</a-radio>
    </a-radio-group>
    <a-button key="3" id="print-preview-btn" :loading="$store.state.app.printLoading" :disabled="disabled" @click="handlePrint('preview')">打印预览</a-button>
    <a-button
      key="2"
      type="primary"
      id="print-print-btn"
      :disabled="disabled"
      :loading="$store.state.app.printLoading"
      @click="handlePrint('print')">
      {{ $store.state.app.printLoading?'打印中...':'快捷打印' }}
    </a-button>
    <a-button
      key="1"
      type="primary"
      :loading="$store.state.app.printLoading"
      class="button-warning"
      id="print-export-btn"
      v-if="showExport"
      :disabled="disabled"
      @click="handlePrint('export')">导出Excel</a-button>
    <!-- 打印 -->
    <div id="print"></div>
  </div>
</template>

<script>
export default {
  name: 'Print',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    showExport: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      printerType: 'NEEDLE' // 打印机类型
    }
  },
  methods: {
    handlePrint (type) {
      this.$store.dispatch('TogglePrintSettingType', this.printerType)
      this.$emit('handlePrint', type, this.printerType)
    }
  }
}
</script>

<style lang="less">
  .print-page-header{
    display: inline-block;
    > *{
      margin-left: 5px;
    }
  }
</style>
