<template>
  <div ref="print-container" class="print-container">
    <el-button type="primary" @click="print('vab-print-image')">
      <vab-icon icon="printer-line" />
      打印图片
    </el-button>
    <el-button type="primary" @click="print('vab-print-table')">
      <vab-icon icon="printer-line" />
      打印表格
    </el-button>
    <img
      ref="vab-print-image"
      src="https://cdn.jsdelivr.net/gh/chuzhixin/image/fapiao.png"
      style="display: block; width: 520px"
    />
    <br />
    <el-table ref="vab-print-table" :data="tableData" style="width: 520px">
      <el-table-column :label="__('姓名')" prop="name" width="120px" />
      <el-table-column :label="__('地址')" prop="address" />
    </el-table>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  import VabPrint from '@/extra/VabPrint'

  export default {
    name: 'Print',
    data() {
      return {
        tableData: [
          {
            name: this.__('马云'),
            address: this.__('上海市普陀区金沙江路'),
          },
          {
            name: this.__('马化腾'),
            address: this.__('上海市普陀区金沙江路'),
          },
          {
            name: this.__('李彦宏'),
            address: this.__('上海市普陀区金沙江路'),
          },
          {
            name: this.__('刘强东'),
            address: this.__('上海市普陀区金沙江路'),
          },
        ],
      }
    },
    methods: {
      ...mapActions({
        openSideBar: 'settings/openSideBar',
        foldSideBar: 'settings/foldSideBar',
      }),
      async print(val) {
        await this.foldSideBar()
        await VabPrint(this.$refs[val], { noPrintParent: true })
        await this.openSideBar()
      },
    },
  }
</script>
