<template>
  <div id="sheet-container">
  </div>
</template>

<script>
import { initSheet } from '../common/option';
export default {
  props: {
    option: {
      type: String,
      default: ''
    },
    sheetInfo: {
      type: Object,
      default: {}
    }
  },
  // watch: {
  //   option: {
  //     handler(newval) {
  //       console.log(newval)
  //       this.optionData = newval ? JSON.parse(newval) : {}
  //       this.init();
  //     },
  //     deep:true
  //   }
  // },
  data() {
    return {
      // optionData: {},
      sheetObj: {}
    }
  },
  methods: {
    init() {
      let optionData = this.option ? JSON.parse(this.option) : {};
      initSheet('sheet-container',optionData,this.sheetInfo)
    }
  },
  destroyed() {
    luckysheet.destroy();
  },
  mounted() {
    this.init();
  },
}
</script>
<style scoped lang="scss">
#sheet-container {
  margin:0;padding:0;
  position:absolute;
  width:100%;left: 0px;top: 0;bottom:0px;
}

</style>

<style lang="scss">
  .luckysheet .toolbar {
    background: none;
    margin: 0;
    padding: 0;
  }
.luckysheet-input-box {
  z-index: 99999;
}
</style>