<template>
  <div class="com-data-view">
    <div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top:0px;bottom:0px;">
    </div>


    <div v-show="isMaskShow"
      style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display:flex;">
      Downloading</div>

  </div>
</template>


<script>
  import LuckyExcel from 'luckyexcel'

  export default {
    props: {
      fileOjb: {
        type: Object,
        default: null,
      }
    },
    watch: {
      'fileOjb': {
        handler(val) {
          if (val == null) return;
          setTimeout(()=>{
            this.loadExcel(val);
          },1000);

        },
        immediate: true,
        deep: true,
      }
    },
    data() {
      return {
        isMaskShow: false,
      }
    },
    // mounted生命周期
    mounted() {
      // this.initSheet();
    },
    // methods方法
    methods: {


      //加载excel文件
      loadExcel(fileObj) {
        if (fileObj == null) {
          this.$alert("请选择正确的文件");
          return;
        }
        const value = fileObj.url;
        const name = fileObj.name;
        this.isMaskShow = true;
        LuckyExcel.transformExcelToLuckyByUrl(value, name, (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;
          }
          this.isMaskShow = false;
          window.luckysheet.destroy();
          window.luckysheet.create({
            container: 'luckysheet', //luckysheet is the container id
            showinfobar: true,
            data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator
          });
        });
      },
    }
  }
</script>

<style lang="scss">
  @import "./dataView.scss"
</style>
