<template>
    <div class="print-page-header">
        <a-popover :placement="position">
            <template slot="content">
                <div style="padding:10px;">
                    <span>打印方式：</span>
                    <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>
                </div>
                <slot name="extendCons"></slot>
                <div style="padding:10px;">
                    <a-button 
                    key="3" 
                    id="print-preview-btn" 
                    type="primary"
                    ghost
                    :loading="$store.state.app.printLoading" 
                    :disabled="disabled" 
                    @click="handlePrint('preview')">
                        打印预览
                    </a-button>
                    <a-button
                        key="2"
                        type="primary"
                        style="margin-left: 10px;margin-right: 10px;"
                        id="print-print-btn"
                        :disabled="disabled"
                        :loading="$store.state.app.printLoading"
                        @click="handlePrint('print')">
                        {{ $store.state.app.printLoading?'打印中...':'快捷打印' }}
                    </a-button>
                </div>
                <a-divider style="margin:5px 0;" v-if="showExport"/>
                <div style="padding:10px;" v-if="showExport">
                  <a-button
                        key="1"
                        type="primary"
                        class="button-warning"
                        :loading="$store.state.app.printLoading"
                        id="print-export-btn"
                        style="margin-left:0;"
                        :disabled="disabled"
                        @click="handlePrint('export')">导出Excel</a-button>
                    <slot name="extendButtons"></slot>  
                </div>
            </template>
            <a-button type="link" class="button-default"><a-icon type="printer" /> 打印导出 </a-button>
        </a-popover>

      <!-- 打印 -->
      <div id="print"></div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PrintPanel',
    props: {
      disabled: {
        type: Boolean,
        default: false
      },
      showExport: {
        type: Boolean,
        default: true
      },
      position: {
        type: String,
        default: 'bottom'
      }
    },
    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;
    }
  </style>
  