<template>
    <div id="luckysheet" :style="{ margin: '0px', padding: '0px', width: '100%', height: '800px' }"></div>
</template>

<script setup>
import { onBeforeUnmount,watch } from 'vue'
import { exportExcel } from '@/utils/exportel.js'

const {data} = defineProps({
    data: {
        type: Object,
        default: null
    }
})


const getuploadBlob=(callback=(file)=>{})=>{
    return exportExcel(luckysheet.getluckysheetfile(), callback)
}

const render=()=>{
    luckysheet.destroy();
    luckysheet.create({
        container: 'luckysheet', //luckysheet is the container id
        showinfobar: false,
        lang: 'zh',
        showinfobar: false,
        data: data.sheets,
        title: data.info.name,
        userInfo: data.info.name.creator
    })
}


onBeforeUnmount(()=>{
    luckysheet.destroy();
})

defineExpose({
    getuploadBlob,render
})
</script>