<template>
    <div class="default-main">
        <div class="mb10" style="display: flex; justify-content: flex-end">
            <el-upload
                ref="upload"
                action=""
                :auto-upload="false"
                :show-file-list="false"
                :limit="1"
                :on-change="beforeUpload"
            >
                <el-button icon="el-icon-Upload" type="primary" class="mr10">导入excel</el-button>
            </el-upload>
            <el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
            <el-button icon="el-icon-Back" @click="emit('shutDown')">返回</el-button>
        </div>

        <div style="display: flex">
            <div id="luckysheet" :style="{ height: height, flex: 1 }"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { exportExcel } from './export.js'
import { mainHeight } from '@/utils/layout'
import LuckyExcel from 'luckyexcel'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { viewCustomReportTemplateById } from '@/api/harmonic-boot/luckyexcel'
const emit = defineEmits(['shutDown'])

const height = mainHeight(65).height
const options: any = ref({
    container: 'luckysheet',
    title: '', // 表 头名
    lang: 'zh', // 中文
    showtoolbar: false, // 是否显示工具栏
    showinfobar: false, // 是否显示顶部信息栏
    showsheetbar: true, // 是否显示底部sheet按钮
    data: [
        {
            name: 'Cell',
            index: 0,
            defaultRowHeight: 27,
            defaultColWidth: 105,
            chart: [] //图表配置
        }
    ]
})
// 加载luckysheet
const info = () => {
    luckysheet.create(options.value)
}
//绑定value
const setValue = (e: any) => {
    let data = luckysheet.getRange()
    luckysheet.setCellValue(
        data[0].row[0],
        data[0].column[0],
        {
            v: e[e.length - 1],
            tr: e
        }
        //  checkedNodes[0].data.label
    )
}
// 下载表格
const downloadExcel = () => {
    exportExcel(luckysheet.getAllSheets(), '报表模板')
}
// 导入
const beforeUpload = (file: any) => {
    LuckyExcel.transformExcelToLucky(file.raw, function (exportJson: any) {
        if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            ElMessage.warning('读取excel文件内容失败,目前只能上传xlsx文件!')
            return
        }
        luckysheet.destroy()
        options.value.title = exportJson.info.name
        options.value.data = exportJson.sheets
        luckysheet.create(options.value)
    })
}

const open = async (row: any) => {

    await viewCustomReportTemplateById({ id: row.id }).then((Response:any) => {
        Response.forEach((item: any) => {
        item.celldata.forEach((k: any) => {
      item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v ) : ''
        })
    })
        options.value.data = Response
    })

    info()
}
defineExpose({ open })
onMounted(() => {})
</script>
<style lang="scss" scoped>
:deep(.el-tab-pane) {
    padding: 10px;
}
</style>
