<!--    封裝的模板下載和導(dǎo)入按鈕和功能組件-->

<template>
  <span style="margin-left: 10px">
    <el-button size="mini" class="el-icon-download" @click="downFiles"> 下載模板</el-button>
    <el-upload
      action=""
      style="width: 115px;display: inline-block;margin-left: 10px"
      :http-request="uploadSectionFile"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeUpload"
      :show-file-list="false"
      :accept="accept"
    >
      <el-button class="el-icon-upload" size="mini">批量導(dǎo)入</el-button>
    </el-upload>
  </span>
</template>

<script>
import XLSX from 'xlsx'

? import Blob from './Excel/Blob'
? import Export2Excel from './Excel/Export2Excel.js'

export default {
  name: 'importTemplate',
  data() {
    return {
      accept: '.xlsx',
      fileTemp: {}, // 導(dǎo)入的文件流
      tableData: []
    }
  },
  methods: {
    downFiles() {
      // <a href="./static/培訓(xùn)實(shí)施參加人員統(tǒng)計(jì)模板.xlsx"><i className="el-icon-download"/>下載模板</a>
      window.open('/static/培訓(xùn)實(shí)施參加人員統(tǒng)計(jì)模板.xlsx')
    },
    uploadSectionFile(uploader) {
      this.fileTemp = uploader.file
      if (this.fileTemp) {
        if ((this.fileTemp.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') ||
          (this.fileTemp.type === 'application/vnd.ms-excel')) {
　　　　　　
          this.importfEx(this.fileTemp)
        } else {
          this.$message({
            type: 'warning',
            message: '附件格式錯(cuò)誤，請刪除后重新上傳！'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '請上傳附件！'
        })
      }
    },
    importfEx(event) {
      // FileReader 對象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容
      const fileReader = new FileReader()
      const file = event
      // 回調(diào)函數(shù)
      fileReader.onload = ev => {
        try {
          const data = ev.target.result
          const workbook = XLSX.read(data, { type: 'binary' })
          // excel讀取出的數(shù)據(jù)
          const excelData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
          // 將上面數(shù)據(jù)轉(zhuǎn)換成 table需要的數(shù)據(jù)---將獲取到的數(shù)據(jù)$emit拋出數(shù)據(jù)
          this.$emit('changeImportData', excelData)
        } catch (e) {
          this.$message({ type: 'error', message: '文件類型不正確!' })
          return false
        }
      }
      // 讀取文件 成功后執(zhí)行上面的回調(diào)函數(shù)
      fileReader.readAsBinaryString(file)
    },
    handleAvatarSuccess(res, file) {
      console.log(res)
      // this.vm.edit.data.contractProjects.push({})
    },
    beforeUpload(file) {
      if (this.accept !== '') {
        const index = file.name.indexOf('.')
        const type = file.name.substring(index + 1, file.name.length)
        if (this.accept.indexOf(type) === -1) {
          this.$message.error(`文件 ${file.name}格式不正確,請上傳指定格式的文件 ${this.accept}`)
          return false
        }
      }
    }
  }
}
</script>

<style scoped>

</style>

<!--   2. 父組件調(diào)用封裝的組件-->

<template>

<!--              //導(dǎo)入excel  下載模板組件-->
<import-template @changeImportData="changeImportDataFun" />

</template>

methods: {
  changeImportDataFun(dataArr) {
    // 返回的數(shù)組數(shù)據(jù)
  },
}