<template>
  <div class="data-info">
    <el-card>
      <el-form :model="dataForm" label-width="120px">

        <el-form-item label="数据表编码:">
          <el-input v-model="dataForm.code"></el-input>
        </el-form-item>
        <el-form-item label="所属分类:">
          <el-select v-model="dataForm.category_id"  placeholder="请选择所属分类" size="large"style="width:100%;">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
        </el-form-item>
        <el-form-item label="数据表名称:">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="选择文件:">
            <el-upload
                v-model:file-list="fileList"
                :limit="1"
                action=""
                :multiple="false"
                :show-file-list	="false"
                :before-upload="beforeAvatarUpload"
              >
                <el-button type="primary">请选择Excel文件</el-button>
                <template #tip>
                  <div class="el-upload__tip">

                  </div>
                </template>
              </el-upload>

        </el-form-item>

        <el-form-item label="表格内容预览:" style="min-height:500px;" v-if="fileLoadStatus">
          <div id="luckysheet" ref="luckysheet" style="width:100%;height:500px;"> </div>

        </el-form-item>
        <el-form-item label="状态:">
          <el-select v-model="dataForm.status"  placeholder="请选择状态" size="large"style="width:100%;">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
      </el-form>

    </el-card>


      <div style="text-align:right; margin-top:20px;">
          <el-button type="warning" @click="btnSave">确认保存</el-button>
      </div>
  </div>
</template>

<script>
  import LuckyExcel from 'luckyexcel'; //引入LuckyExcel
  import {searchSourceDataCategory,createSourceData,updateSourceData,getSourceData} from'@/api/sourceData'
  export default{

    emits:['onClose'],
    props:{
      dataId:{
        type:Number,
        default:0,
      }
    },
    watch:{
       'dataId':{
          handler(val){
            if(val==null)return;
            if(val==0)return;
            this.loadData(val);
          },
          immediate: true,//立即执行
          deep: true
       }
    },
    data(){
      return{
        isMaskShow: false,
        dataForm:{
          id:0,
          code:'',
          name:'',
          sourceData:{
            exportJson:null,
            luckysheetfile:''
          },
          status:5,
        },
        categoryList:[],
        fileLoadStatus:false,
        file:'',
        fileList:[],
        statusOptions:[
          {
            value:'',
            label:"请选择状态"
          },
          {
            value:5,
            label:'启用'
          },
          {
            value:6,
            label:"停用"
          },
        ],
      }
    },
    mounted(){
      this.initCategory();
    },
    methods:{

      initCategory(){
        let _this=this;
        searchSourceDataCategory({page:1,pageSize:9999,status:5}).then(res=>{
          if(res.status!=200)return;
          _this.categoryList=res.data.dataList.map(res=>{
            return{
              id:res.id,
              value:res.id,
              name:res.name,
            }
          })
        })
      },


      loadData(id){
        let _this=this;
        let par={
          id:id,
        }
        getSourceData(par).then(res=>{
          if(res.status!=200){
            this.dataForm.id=0;
            return;
          }
          _this.dataForm=res.data;
          _this.dataForm.sourceData=JSON.parse(_this.dataForm.source_data);
          _this.dataForm.category_id=res.data.category.id;

          _this.fileLoadStatus=true;
          _this.$nextTick(() => {
            luckysheet.destroy();
            luckysheet.create({
              container: 'luckysheet', //dom id
              data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
              lang: 'zh',
              hook:{
                cellUpdated: function (r, c, oldValue, newValue, isRefresh) {

                  // console.log("oldVal",oldValue);
                  // console.log("newVal",newValue);
                  //   console.log('exportJson',_this.dataForm.source_data.exportJson)
                },
              },
            });


          });


        })

      },


      btnSave(e){
        let _this=this;

        if(_this.dataForm.code==""){
          _this.$alert("请填写数据表编码");
          return false;
        }
        if(_this.dataForm.name==""){
          _this.$alert("请填写数据表名称");
          return false;
        }
        if(_this.dataForm.sourceData.exportJson==null){
          _this.$alert("请选择上传excel文件");
          return false;
        }
        let data=JSON.parse(JSON.stringify(_this.dataForm));
        data.source_data=JSON.stringify(data.sourceData);
        delete data.sourceData;
        if(data.id>0){
          updateSourceData(data).then(res=>{
            if(res.status!=200){
              _this.$message(res.message);return;
            }
            _this.$message("数据表更新成功");
            _this.$emit("onClose");
          })
        }else{
            createSourceData(data).then(res=>{
              if(res.status!=200){
                _this.$message(res.message);return;
              }
              _this.$message("数据表创建成功");
              _this.$emit("onClose");
            })
        }
      },

      //(2)渲染excel
      initExcel() {
        let _this=this;

        // let exportJson=this.dataForm.source_data.exportJson;
        // let luckysheetfile=this.dataForm.source_data.luckysheetfile;
        luckysheet.destroy();
        //初始化excel
        luckysheet.create({
          container: 'luckysheet', //dom id
          data: _this.dataForm.sourceData.exportJson.sheets, //excel数据
          lang: 'zh',
          hook:{
            cellUpdated: function (r, c, oldValue, newValue, isRefresh) {

            },
          },
        });
      },
      beforeAvatarUpload(e){
        let _this=this;
        _this.fileLoadStatus=false;
         if( e.type=='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'){
            _this.fileLoadStatus=true;
            _this.fileList=[e]
            //处理excel文件
            LuckyExcel.transformExcelToLucky(e, (exportJson, luckysheetfile) => {
                this.dataForm.sourceData={
                  exportJson:exportJson,
                  luckysheetfile:luckysheetfile,
                }
                this.initExcel();
            },error =>{
               this.$message.error(error)
            });
         }else{
           this.$message("请选择excel文件");
         }
      },
    }
  }
</script>

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