<template>
    <div class="default-main report-zl-page" :style="height">
        <div class="report-zl-sidebar">
                <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
                    @Policy="stencil">
                </pointTreeWx>
        </div>
        <div class="report-zl-main">
                <TableHeader 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 report-zl-box">
                    <div class="report-zl-sheet-wrap">
                        <div
                            id="luckysheet"
                            class="report-zl-sheet"
                            v-loading="tableStore.table.loading"
                            element-loading-background="rgba(255, 255, 255, 0.85)"
                        ></div>
                        <el-empty
                            v-show="!tableStore.table.loading && tableStore.table.data.length === 0"
                            class="report-zl-empty"
                            description="暂无数据"
                        />
                    </div>
                </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, provide, onUnmounted } 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 { destroyLuckysheet, exportLuckysheetFile, renderLuckysheetReport } from '@/utils/luckysheetHelper'
import DatePicker from '@/components/form/datePicker/time.vue'
import { ElMessage } from 'element-plus'
const name = ref('')
// import data from './123.json'
defineOptions({
    name: 'govern/reportCore/statisticsWx/index'
})
const height = mainHeight(20)
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 tableStore = new TableStore({
    url: '/harmonic-boot/customReport/getCustomReport',
    method: 'POST',
    column: [],
    showPage: false,
    beforeSearchFun: () => {
        tableStore.table.params.tempId = Template.value.id
        tableStore.table.params.lineId = dotList.value.id
        if (!datePickerRef.value?.timeValue?.[0] || !datePickerRef.value?.timeValue?.[1]) {
            ElMessage.warning('请选择时间')
            return false
        }
        tableStore.table.params.startTime = datePickerRef.value.timeValue[0]
        tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
        destroyLuckysheet()
        delete tableStore.table.params.searchBeginTime
        delete tableStore.table.params.searchEndTime
        delete tableStore.table.params.timeFlag
    },
    loadCallback: () => {
        name.value = dotList.value.name
        if (tableStore.table.data.length > 0) {
            renderLuckysheetReport('luckysheet', tableStore.table.data, { allowEdit: false })
        } else {
            destroyLuckysheet()
        }
    }
})
provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1
tableStore.table.params.customType = 1
const flag = ref(true)


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

}

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

const handleNodeClick = (data: any, node: any) => {

    if (data?.pid) {
        dotList.value = data
        setTimeout(() => {
            tableStore.index()
        }, 500)
    } else {
        tableStore.table.loading = false
    }
}

const exportEvent = () => {
    const now = new Date()
    exportLuckysheetFile(
        {
            subject: name.value,
            feature: '统计报表',
            date: datePickerRef.value?.timeValue?.[1] || now
        },
        tableStore.table.data.length > 0
    )
}
onUnmounted(() => {
    destroyLuckysheet()
})
</script>
<style lang="scss">
.report-zl-page {
    display: flex;
    overflow: hidden;
}

.report-zl-sidebar {
    width: 280px;
    flex-shrink: 0;
    min-height: 0;
    overflow: hidden;
}

.report-zl-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.box {
    flex: 1;
    min-height: 0;
    padding: 10px 0;
    overflow: hidden;
}

.report-zl-box {
    display: flex;
    flex-direction: column;
}

.report-zl-sheet-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
}

.report-zl-sheet {
    height: 100%;
}

.report-zl-empty {
    position: absolute;
    inset: 0;
    height: 100%;
    background: #fff;
}
</style>
