
<!--excel预览-->
<template>
  <div v-loading="loading" :style="containerStyle">
    <pre>{{ excelUrl }}index{{ id }}</pre>
    <div :id="`luckysheet_${id}`" class="luckysheet-content" :style="containerStyle" />
  </div>
</template>
<script lang="js">
// import LuckyExcel from 'luckyexcel'
// import * as luckysheet from 'luckysheet'

export default {
  name: 'LuckySheet',
  props: {
    excelUrl: {
      type: String,
      default: null
    },
    id: {
      type: [Number, String],
      default: null
    },
    options: {
      type: Object,
      default: () => {}
    },
    containerStyle: {
      type: Object,
      default: () => ({
        width: '800px', height: '500px'
      })
    }
  },
  data() {
    return {
      loading: false
    }
  },
  watch: {
    excelUrl: {
      handler(val) {
        console.log('watch', val, this.id)
        if (val) {
          this.onInit(val, this.id)
        }
      },
      immediate: true
    }
  },
  mounted() {
    // this.onInit()
  },
  methods: {
    onInit(excelUrl, id) {
      // console.log('init ', excelUrl, encodeURI(excelUrl))
      const this_ = this
      // this.loading = true
      LuckyExcel.transformExcelToLuckyByUrl(excelUrl, '', function(exportJson, luckysheetfile) {
        console.log('LuckyExcel transformExcelToLuckyByUrl', exportJson)
        // this_.loading = false
        if (!exportJson.sheets || exportJson.sheets.length === 0) {
          console.log('Failed to read the content of the excel file, currently does not support xls files!')
          return
        }
        // luckysheet.destroy()
        luckysheet.destroy()
        console.log('{this_.index}', this_.id)
        const excelOptions = {
          container: `luckysheet_${id}`,
          data: exportJson.sheets,
          title: exportJson.info.name,
          // userInfo: exportJson.info.name.creator,
          lang: 'zh',
          allowCopy: false,
          editMode: false,
          showtoolbar: false, // 是否显示工具栏
          showinfobar: false, // 是否显示顶部信息栏
          showsheetbar: false, // 是否显示底部sheet页按钮
          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: false
          },
          showsheetbarConfig: {
            add: false, // 新增sheet
            menu: false, // sheet管理菜单
            sheet: false // sheet页显示
          }
        }
        luckysheet.create(excelOptions)
        console.log('luckysheet.create', exportJson.sheets, `luckysheet_${id}`)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.luckysheet-content {
  position: relative;
}
</style>
