<template>
  <div class="com-formual">
        <el-form  >
            <el-form-item >

              <el-select v-model="tableCode"  placeholder="请选择状态" @change="onChangeTab" size="large" style="width:100%;">
                    <el-option
                      v-for="(item,index) in tableList"
                      :key="item.id"
                      :label="item.name"
                      :value="index"
                    />
                  </el-select>

            </el-form-item>
            <el-form-item   style="min-height:500px;" v-if="fileLoadStatus">
              <div id="luckysheet" ref="luckysheet" style="width:100%;height:500px;"> </div>
            </el-form-item>

          </el-form>

          <el-dialog
              :visible.sync="showConfirm"
              :close-on-click-modal="false"
              title="数据确认"
              width="500"
              align-center
              :append-to-body="true"
            >
              <div>当前工作表：{{position.sheet}} </div>
              <!-- <div>当前选择的位置：ROW:{{position.r}}, COL:{{position.c}} </div> -->
              <div>当前取值：{{position.value}}</div>
              <template #footer>
                <div class="dialog-footer">
                  <el-button @click="showConfirm = false">关闭</el-button>
                  <el-button type="primary" @click="onConfirm">
                    确认选择
                  </el-button>
                </div>
              </template>
            </el-dialog>



  </div>
</template>

<script>

  import{searchSourceData,deleteSourceData} from'@/api/sourceData';
  import LuckyExcel from 'luckyexcel'; //引入LuckyExcel


  export default{
    name:"SourceData",
    emits:['onPicked'],

    components:{

    },
    data(){
      return{
          tableCode:'',
          tableList:[],
          showConfirm:false,
          fileLoadStatus:false,
          position:{
            tb:'',
            c:0,
            r:0,
            sheet:'',
            value:''
          }
      }
    },
    mounted(){
      this.initTableList();
    },
    methods:{

      onConfirm(e){
        this.showConfirm=false;
        this.$emit("onPicked",this.position);
      },

      onChangeTab(e){
        let _this=this;
        let item=_this.tableList[e];
        _this.fileLoadStatus=true;

        item.sourceData=JSON.parse(item.source_data);



        _this.position.tb=item.code;
        _this.$nextTick(() => {
          luckysheet.destroy();
          luckysheet.create({
            container: 'luckysheet', //dom id
            data: item.sourceData.exportJson.sheets, //excel数据
            lang: 'zh',
            showinfobar: false, // 是否显示顶部信息栏
            showstatisticBar: false, // 是否显示底部计数栏
            sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
            allowEdit: false, // 是否允许前台编辑
            enableAddRow: false, // 是否允许增加行
            enableAddCol: false, // 是否允许增加列
            sheetFormulaBar: false, // 是否显示公式栏
            enableAddBackTop: false, // 返回头部按钮
            showsheetbar: true, // 是否显示底部sheet页按钮
            enableAddRow: false,//允许添加行
            // 自定义配置底部sheet页按钮
            showsheetbarConfig: {
              add: false,
              menu: false,
            },
            hook:{
              cellMousedown: function (cell, position, sheetFile, ctx) {


                _this.position.sheet=sheetFile.name;

                _this.position.r=position.r;
                _this.position.c=position.c;

                if(cell.v){
                  _this.position.value=cell.v;
                }else{
                  _this.position.value="";
                  cell.ct.s.map(res=>{
                    _this.position.value+=res.v;
                  })
                }
                _this.showConfirm=true;
              },
              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)
              },
            },
          });
        });


 //        _this.dataForm=res.data;
 //        _this.dataForm.sourceData=JSON.parse(_this.dataForm.source_data);


      },
      initTableList(){
        let _this=this;
        searchSourceData({page:1,pageSize:999,status:5}).then(res=>{
          if(res.status!=200)return;
          _this.tableList=res.data.dataList;
        })
      },

    }
  }
</script>

<style lang="scss">
@import './index.scss';
</style>
