<script src="../../utils/getLocalFile.js"></script>
<template>
  <div
    id="luckyExcel"
    :class="['luckyExcel',classStyle]"
  ></div>
</template>

<script>
import LuckyExcel from 'luckyexcel' // 插件
import getLocalFile from '@/utils/getLocalFile.js' // 获取本地文件File格式

export default {
  name: 'luckyExcel',
  props: {
    luckyExcelOptions: {
      type: Object,
      default() {
        return {}
      }
    },
    classStyle: {
      default: '',
      type: String
    },
    fileUrl: {
      default: '',
      type: String,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      options: {
        showinfobar: false, // 是否显示顶部信息栏
        container: 'luckyExcel', //luckyExcel is the container id
        allowCopy: false, // 是否允许拷贝
        showtoolbar: false, // 是否显示工具栏
        showstatisticBar: false, // 是否显示底部计数栏,
        sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
        allowEdit: false, // 是否允许前台编辑
        enableAddRow: false, // 允许增加行
        enableAddCol: false, // 允许增加列
        userInfo: false, // 右上角的用户信息展示样式
        showRowBar: false, // 是否显示行号区域
        showColumnBar: false, // 是否显示列号区域
        sheetFormulaBar: false, // 是否显示公式栏
        enableAddBackTop: false,//返回头部按钮
        rowHeaderWidth: 0,//纵坐标
        columnHeaderHeight: 0,//横坐标
        showstatisticBarConfig: {
          count: false,
          view: false,
          zoom: true
        },
        showsheetbarConfig: {
          add: false, //新增sheet
          menu: false, //sheet管理菜单
          sheet: false //sheet页显示
        }
      }
    }
  },
  watch: {
    luckyExcelOptions: {
      handler(options) {
        this.options = Object.assign(this.options, options)
      },
      immediate: true // 初始化执行
    }
  },
  mounted() {
    this.initExel()
  },
  methods: {
    async initExel() {
      let file = await getLocalFile(this.fileUrl)
      this.$nextTick(() => {
        LuckyExcel.transformExcelToLucky(
          file,
          (exportJson, luckysheetfile) => {
            if (exportJson.sheets == null || exportJson.sheets.length == 0) {
              alert(
                'Failed to read the content of the excel file, currently does not support xls files!'
              )
              return
            }
            window.luckysheet.destroy()
            window.luckyExcel.create({
              ...this.options,
              data: exportJson.sheets.filter(i => {
                i.zoomRatio = 1
                return i.celldata.length
              }),
              title: exportJson.info.name
            })
          }
        )
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.luckyExcel {
  width: 100%;
  height: 100%;
}
</style>

