<template>
  <div class="app-container">
    <div class="filter-container filter-view">
      <div class="filter-flex-button"></div>
      <my-upload
        accept=".xls,.xlsx,.csv"
        :limit="1"
        :is-blob="true"
        :action="action"
        :headers="headers"
        :file-list="fileList"
        :show-file-list="false"
        :before-upload="onImportStart"
        :on-success="onImportExcel"
        :on-error="onImportExcelErr"
        v-if="!$route.meta.onlyView">
        <el-button
          icon="el-icon-upload2"
          type="primary"
          :loading="loading.upload">
          Batch Upload
        </el-button>
      </my-upload>
      <div v-if="!$route.meta.onlyView">
        <el-button
          icon="el-icon-download"
          type="primary"
          :loading="loading.download"
          @click="onDownloadTmp">
          Template
        </el-button>
      </div>
      <el-button
        type="primary"
        icon="el-icon-s-ticket"
        @click="onClickIssue">
        Issue Voucher
      </el-button>
    </div>
    <el-table
      v-loading="loading.table"
      :data="table.data">
      <el-table-column
        label="User E-mail"
        align="center"
        prop="userEmail"
        min-width="120"/>
      <el-table-column
        label="User"
        align="center"
        prop="userName"
        min-width="120"/>
      <el-table-column
        label="Voucher ID"
        align="center"
        prop="voucherId"
        min-width="140"/>
      <el-table-column
        label="Voucher Name"
        align="center"
        prop="voucherName"
        min-width="150"/>
      <el-table-column
        label="Voucher Type"
        align="center"
        prop="voucherType"
        min-width="120"/>
      <el-table-column
        label="Redemption Method"
        align="center"
        prop="redemptionMethod"
        min-width="160"/>
      <el-table-column
        label="DateTime"
        align="center"
        prop="dateTime"
        min-width="120"/>
      <el-table-column
        label="Status"
        align="center"
        prop="dataStatus"
        min-width="80"/>
    </el-table>
    <div class="right">
      <Pagination
        v-show="table.total > 0"
        :total="table.total"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getTableData" />
    </div>
    <DialogIssue
      :visible="showIssueDialog"
      @hide="hideIssueDialog"/>
  </div>
</template>

<script>
import api from '../../http/api/voucher.js';
import { baseURL } from '@/http/http'
import Pagination from '@/components/Pagination';
import DialogIssue from './DialogIssue.vue';
import MyUpload from '@/components/MyUpload'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      params: {
        pageNum: 1,
        pageSize: 10,
        pageCriteria: {
          criteria: "",
          voucherStatus: "" //"To Be Used"
        }
      },
      table: {
        data: [],
        total: 0
      },
      loading: {
        table: false,
        upload: false,
        download: false
      },
      fileList: [],
      showIssueDialog: false
    };
  },
  components: {DialogIssue, Pagination, MyUpload},
  computed: {
    action() {
      return baseURL + process.env.VUE_APP_API_PREFIX + '/dawn/api/v1/batch-issue-voucher'
    },
    headers() {
      return {
        accessToken: getToken()
      }
    }
  },
  created() {
    this.toSearch();
  },
  methods: {
    toSearch() {
      this.params.pageNum = 1;
      this.getTableData();
    },
    getTableData() {
      this.loading.table = true;
      api.getIssuanceVoucherPages(this.params).then(res => {
        if (res.data && res.data.totalRow) {
          this.table.data = res.data.records
          this.table.total = res.data.totalRow
        } else {
          this.table.data = []
          this.table.total = 0
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.table.data = []
        this.table.total = 0
      }).finally(() => {
        this.loading.table = false
      })
    },
    onClickIssue() {
      this.showIssueDialog = true;
    },
    hideIssueDialog(e) {
      this.showIssueDialog = false;
      if (e) {
        this.toSearch();
      }
    },
    onImportStart() {
      this.loading.upload = true;
    },
    onImportExcel(res, file, fileList) {
      fileList = [];
      this.fileList = [];
      if (res.success == undefined) {
        this.downloadExcel(res, "batch-issuance-result.xls");
        this.loading.upload = false;
      } else {
        this.onImportExcelErr(res.msg, file, fileList);
      }
    },
    onImportExcelErr(err, file, fileList) {
      this.$message({
        type: 'error',
        message: err
      })
      this.loading.upload = false;
    },
    onDownloadTmp() {
      this.loading.download = true;
      api.downloadTemplate().then(res => {
        this.downloadExcel(res, "batch-issuance-template.xlsx")
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err
        })
      }).finally(() => {
        this.loading.download = false;
      })
    },
    downloadExcel(res, fileName) {
      const blob = new Blob([res], {
        type: 'application/vnd.ms-excel;charset=utf-8'
      })
      // let href = window.URL.createObjectURL(blob)
      if ('download' in document.createElement('a')) {
        // 非IE下载
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      } else {
        // IE10+下载
        navigator.msSaveBlob(blob, fileName)
      }
    }
  }
}
</script>

<style scoped>

</style>