<template>
  <div>
    <div style="display:flex;justify-content:flex-end">
      <el-button size="mini" @click="onDownloadTemplate">下载发票模板</el-button>
      <el-button size="mini" type="primary" @click="xlsxVisible = true">上传发票信息</el-button>
    </div>
    <el-table size="mini" style="margin-top:10px" border>
      <el-table-column label="发票申请编号" prop="invoiceNo"></el-table-column>
      <el-table-column label="发票状态" prop="invoiceStatus"></el-table-column>
      <el-table-column label="发票类型" prop="invoiceType"></el-table-column>
      <el-table-column label="发票代码" prop="invoiceCode"></el-table-column>
      <el-table-column label="发票号码" prop="invoiceNumber"></el-table-column>
      <el-table-column label="开票日期" prop="openTime"></el-table-column>
      <el-table-column label="税前金额" prop="beforeTax"></el-table-column>
      <el-table-column label="税后金额" prop="afterTax"></el-table-column>
      <el-table-column label="校验码" prop="checkNumber"></el-table-column> 
      <el-table-column label="操作">
        <template #header>
          <div style="display:flex;justify-content:space-between;">
            <span>操作</span>
            <el-button size="mini" type="text" @click="manuallyVisible = true">添加</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div style="display:flex;justify-content:flex-end;padding:10px 0px">
      <el-button size="mini" type="primary">保存</el-button>
    </div>

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


<script>
import ManuallyUploadModal from "./manuallyUploadModal.vue"
import ExcelUploadModal from "./xlsxUploadModal.vue"
import { writeFile, utils } from "xlsx";
import { template } from "./_template"

/***
 * @props
 * 发票申请编号 invoiceNo
 * 发票状态 invoiceStatus
 * 发票类型 invoiceType
 * 发票号码 invoiceNumber
 * 发票代码 invoiceCode
 * 发票名称 invoiceName
 * 开票日期 openTime
 * 税前金额 beforeTax
 * 税后金额 afterTax
 * 校验码 checkNumber
*/

export default {
  name:'UploadInvoiceNode',
  components:{
    ManuallyUploadModal,
    ExcelUploadModal
  },
  data(){
    return {
      manuallyVisible:false,
      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,"开票模板.xlsx",{
        bookType:'xlsx'
      })
    }
  }
}
</script>
