<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 style="background: #fff" :style="height">
                <TableHeader ref="TableHeaderRef" datePicker>
                    <template v-slot:select>
                        <el-form-item label="模板策略">
                            <el-select v-model="Template" @change="changetype" placeholder="请选择模版" value-key="id">
                                <el-option v-for="item in templatePolicy" :key="item.id" :label="item.name"
                                    :value="item"></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                    <template #operation>
                        <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</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, 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 { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { exportExcel } from '@/views/system/reportForms/export.js'
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: () => {
        tableStore.table.data.forEach((item: any) => {
            item.data1 ? (item.data = JSON.parse(item.data1)) : ''
            item.celldata.forEach((k: any) => {
                item.data[k.r][k.c].v ? (item.data[k.r][k.c].v = k.v) : ''
            })
        })
        console.log(tableStore.table.data)
        setTimeout(() => {
            luckysheet.create({
                container: 'luckysheet',
                title: '', // 表 头名
                lang: 'zh', // 中文
                showtoolbar: false, // 是否显示工具栏
                showinfobar: false, // 是否显示顶部信息栏
                showsheetbar: true, // 是否显示底部sheet按钮
                data: tableStore.table.data
                //  tableStore.table.data
            })
        }, 10)
    }
})
provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1
const flag = ref(true)
onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 100)
    }
})

// getTemplateByDept({ id: dictData.state.area[0].id }).then((res: any) => {
//     templatePolicy.value = res.data
  

// })

const stencil=(val: any) => {
    console.log("🚀 ~ Policy ~ val:", val)
    templatePolicy.value =val
    Template.value =val[0]
    reportForm.value =val[0]?.reportForm

}

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

const handleNodeClick = (data: any, node: any) => {
    console.log("🚀 ~ handleNodeClick ~ data:", data)
    if (data?.type == "line") {
        dotList.value = data
        setTimeout(() => {
            tableStore.index()
        }, 500)
    }
}

const exportEvent = () => {
    exportExcel(luckysheet.getAllSheets(), '统计报表下载')
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #fff;
}

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