<template>
    <div class="default-main" :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <PointTree :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
                    @Policy="stencil">
                </PointTree>
            </pane>
            <pane :size="(100 - size)" style="background: #fff" :style="height">
                <TableHeader ref="TableHeaderRef" datePicker>
                    <template v-slot:select>
                        <el-form-item label="模板策略">
                            <el-select v-model.trim="Template" @change="changetype" placeholder="请选择模版" value-key="id">
                                <el-option v-for="item in templatePolicy" :key="item.id" :label="item.excelName"
                                    :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template #operation>
                        <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
                    </template>
                </TableHeader>
                <div class="box">
                    <div id="luckysheet" v-loading="tableStore.table.loading"
                        :style="`height: calc(${tableStore.table.height} + 45px)`"></div>
                </div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/govern/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { destroyLuckysheet, exportLuckysheetFile, renderLuckysheetReport } from '@/utils/luckysheetHelper'
import { isLineTreeLeaf } from '@/components/tree/govern/lineTreeUtils'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
// import data from './123.json'
defineOptions({
    name: 'govern/reportCore/statistics/index'
})
const height = mainHeight(20)
const size = ref(0)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const reportForm: any = ref('')

const templatePolicy: any = ref([])
const reportFormList: any = ref([
    {
        value: '1',
        label: '分析报表'
    },
    {
        value: '2',
        label: '统计报表'
    },
    {
        value: '3',
        label: '自定义报表'
    }
])
const tableStore = new TableStore({
    url: '/harmonic-boot/customReport/getCustomReport',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.tempId = Template.value.id
        tableStore.table.params.lineId = dotList.value.id
    },
    loadCallback: () => {
        renderLuckysheetReport('luckysheet', tableStore.table.data)
    }
})
provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1
const flag = ref(true)
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = ((280 / (dom.offsetWidth - 7)) * 100)
    }
})
onUnmounted(() => {
    destroyLuckysheet()
})


const stencil = (val: any) => {
    templatePolicy.value = val
    Template.value = val[0]
    reportForm.value = val[0]?.excelType

}

const changetype = (val: any) => {
    reportForm.value = val.reportForm
}

const handleNodeClick = (data: any, node: any) => {
    if (isLineTreeLeaf(data)) {
        dotList.value = data
        setTimeout(() => {
            tableStore.index()
        }, 500)
    }
}

const exportEvent = () => {
    exportLuckysheetFile(
        {
            subject: dotList.value?.name,
            feature: '统计报表',
            date: TableHeaderRef.value?.datePickerRef?.timeValue?.[1]
        },
        tableStore.table.data.length > 0
    )
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #fff;
}

.box {
    padding: 10px;
}
</style>
