<template>
  <div>
    <div style="display:flex;justify-content:flex-end">
      <el-button size="mini" @click="onDownloadTemplate">下载{{title}}模板</el-button>
      <el-button size="mini" type="primary" @click="xlsxVisible = true">上传{{title}}函</el-button>
    </div>
    <ex-table
      :columns="columns"
      :table="table"
      :data="tableData"
      style="margin: 15px 0 0 0"
    />
    <div style="display:flex;justify-content:flex-end;margin:10px 0px">
      <el-button size="mini" type="primary">保存</el-button>
    </div>

    <excel-upload-modal :visible.sync="xlsxVisible" :title="title" />
  </div>
</template>


<script>
import ExcelUploadModal from "./xlsxUploadModal.vue"
import { template, columns } from "./_template"
import { writeFile, utils } from "xlsx";
export default {
  name:'SettlementBudgetLetter',
  props:['title'],
  components:{ ExcelUploadModal },
  data(){
    return {
      table: {
        stripe: true,
        border: true,
        'max-height': '800px'
      },
      columns,
      tableData:[],
      xlsxVisible:false
    }
  },
  methods:{
    onDownloadTemplate(){
      const workBook = utils.book_new()
      const workSheet = utils.json_to_sheet(template)
      utils.book_append_sheet(workBook,workSheet,"sheet")
      writeFile(workBook,`${this.title}模板.xlsx`,{
        bookType:'xlsx'
      })
    }
  }
}
</script>
