<template>
    <div class="default-main" :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
                    @Policy="stencil">
                </pointTreeWx> -->
                <pointTree
                    ref="TerminalRef"
                    template
                    @Policy="stencil"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                    @pointTypeChange="pointTypeChange"
                ></pointTree>
            </pane>
            <pane :size="100 - size" style="background: #fff" :style="height">
                <TableHeader datePicker ref="TableHeaderRef" :showReset="false">
                    <template v-slot:select>
                        <!-- <el-form-item label="时间:">
                            <DatePicker ref="datePickerRef"></DatePicker>
                        </el-form-item> -->
                        <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" v-loading="tableStore.table.loading">
                    <div
                        id="luckysheet"
                        :style="`height: calc(${tableStore.table.height} + 45px)`"
                        v-if="tableStore.table.data.length > 0"
                    ></div>
                    <el-empty
                        :style="`height: calc(${tableStore.table.height} + 45px)`"
                        v-else
                        description="暂无数据"
                    />
                </div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import pointTreeWx from '@/components/tree/govern/pointTreeWx.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { exportExcel } from '@/views/system/reportForms/export.js'
import 'splitpanes/dist/splitpanes.css'
import DatePicker from '@/components/form/datePicker/time.vue'
import { Splitpanes, Pane } from 'splitpanes'
import pointTree from '@/components/tree/govern/pointTree.vue'
// import data from './123.json'
defineOptions({
    name: 'govern/reportCore/statisticsWx/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 datePickerRef = ref()
const templatePolicy: any = ref([])
const name = ref('')
const tableStore = new TableStore({
    url: '/cs-harmonic-boot/customReport/getCustomReport',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {
        tableStore.table.params.tempId = Template.value.id
        tableStore.table.params.lineId = dotList.value.id
        // tableStore.table.params.startTime  = datePickerRef.value.timeValue[0],
        // tableStore.table.params.endTime = datePickerRef.value.timeValue[1],
        delete tableStore.table.params.searchBeginTime
        delete tableStore.table.params.searchEndTime
        delete tableStore.table.params.timeFlag
    },
    loadCallback: () => {
        console.log('🚀 ~ tableStore.table:', tableStore.table)
        name.value = dotList.value.name
        // 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] = k.v) : ''
        //     })
        // })
        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] = k.v) : ''
            })
        })
        console.log('🚀 ~ tableStore.table:', tableStore.table)

        setTimeout(() => {
            luckysheet.create({
                container: 'luckysheet',
                title: '', // 表 头名
                lang: 'zh', // 中文
                showtoolbar: false, // 是否显示工具栏
                showinfobar: false, // 是否显示顶部信息栏
                showsheetbar: true, // 是否显示底部sheet按钮
                allowEdit: false, // 禁止所有编辑操作（必填）
                data: tableStore.table.data
                //  tableStore.table.data
            })
        }, 10)
    }
})
provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1
tableStore.table.params.customType = null
const flag = ref(true)
onMounted(() => {
    nextTick(() => {
        const dom = document.getElementById('navigation-splitpanes')
        if (dom && dom.offsetHeight > 0) {
            size.value = (280 / (dom.offsetWidth - 7)) * 100
        } else {
            // 设置默认值
            size.value = 20
        }
    })
})

const stencil = (val: any) => {
    templatePolicy.value = val.filter((item: any) => item.excelType != '4')
    Template.value = templatePolicy.value[0]
    reportForm.value = templatePolicy.value[0]?.excelType
}

const changetype = (val: any) => {
    reportForm.value = val.reportForm
}
const pointTypeChange = (val: any, obj: any) => {
    handleNodeClick(obj)
}

const handleNodeClick = (data: any) => {
    if (data?.level == 3) {
        dotList.value = data
        setTimeout(() => {
            tableStore.index()
        }, 500)
    } else {
        tableStore.table.loading = false
    }
}

const exportEvent = () => {
    const now = new Date()
    const year = now.getFullYear() // 4位年份
    const month = now.getMonth() + 1 // 月份0-11，需+1
    const day = now.getDate() // 日期1-31

    // 格式化YYYY - MM - DD（补零）
    const formattedDate = `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}`
    exportExcel(luckysheet.getAllSheets(), name.value + formattedDate)
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #fff;
}

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