<template>
  <div class="com-data-view">
    <div id="luckysheet" ref='luckysheet' style="margin:0px;padding:0px;position:absolute;width:100%;height: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;">
      下载中</div>

    <div class="btn-save">
        <el-button type="primary" @click="onSave">保存修改</el-button>
    </div>
  </div>
</template>


<script>
  import LuckyExcel from 'luckyexcel'
  import {getSourceData} from "@/api/sourceData";
  export default {
    data() {
      return {
        isMaskShow: false,
        dataForm:{
          id:0,
          code:'',
          name:'',
          sourceData:{
            exportJson:null,
            luckysheetfile:''
          },
          status:'',
        },
      }
    },
    // mounted生命周期
    mounted() {
      // this.initSheet();
      let id=this.$route.query.id;
      this.loadSourceData(id);
    },
    // methods方法
    methods: {

      loadSourceData(id){
        let _this=this;
        getSourceData({id:id}).then(res=>{
          if(res.status!=200)return;
         _this.dataForm=res.data;
         _this.dataForm.sourceData=JSON.parse(_this.dataForm.source_data);
         _this.fileLoadStatus=true;

         _this.$nextTick(() => {

           luckysheet.destroy();
           luckysheet.create({
             container: 'luckysheet', //dom id
             data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
             lang: 'zh',
             allowEdit: false, // 是否允许前台编辑
             hook:{
               cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
                 console.log("r",r);
                 console.log("c",c);
                 // console.log("oldVal",oldValue);
                 // console.log("newVal",newValue);
                 //   console.log('exportJson',_this.dataForm.source_data.exportJson)
               },
             },
           });


         });

        })
      },

      onSave(e){
         // 导出Excel文件
         console.log(this.$refs.luckysheet);
      },


      //加载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
             data: exportJson.sheets,
            title: exportJson.info.name,
            userInfo: exportJson.info.name.creator,
             lang: 'zh',
            showinfobar: false, // 是否显示顶部信息栏
            showstatisticBar: true, // 是否显示底部计数栏
            sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
            allowEdit: false, // 是否允许前台编辑
            enableAddRow: false, // 是否允许增加行
            enableAddCol: false, // 是否允许增加列
            sheetFormulaBar: false, // 是否显示公式栏
            enableAddBackTop: false, // 返回头部按钮
            showsheetbar: false, // 是否显示底部sheet页按钮
            enableAddRow: false,//允许添加行
            // 自定义配置底部sheet页按钮
            events:{
            },
            showsheetbarConfig: {
              add: false,
              menu: false,
            },
          });

        });




      },
    }
  }
</script>

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