<template>
    <div class="statistics-wx-zl default-main" :style="height">
        <aside>
            <APFTree @node-click="handleNodeClick" template @init="handleNodeClick" @Policy="stencil"></APFTree>
        </aside>
        <main class="statistics-wx-zl__main ">
            <TableHeader datePicker ref="TableHeaderRef" :showReset="false">
                <template #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.excelName"
                                :value="item"
                            />
                        </el-select>
                    </el-form-item>
                </template>
                <template #operation>
                    <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
                </template>
            </TableHeader>
            <div class="statistics-wx-zl__sheet-box pl0" v-loading="tableStore.table.loading">
                <div class="statistics-wx-zl__sheet-wrap">
                    <div id="luckysheet" class="statistics-wx-zl__sheet"></div>
                    <el-empty
                        v-show="!tableStore.table.loading && tableStore.table.data.length === 0"
                        class="statistics-wx-zl__empty"
                        description="暂无数据"
                    />
                </div>
            </div>
        </main>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import APFTree from '@/components/tree/govern/APFTree.vue'
import { mainHeight } from '@/utils/layout'
import { destroyLuckysheet, exportLuckysheetFile, renderLuckysheetReport } from '@/utils/luckysheetHelper'
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
import { ElMessage } from 'element-plus'

defineOptions({
    name: 'govern/reportCore/statisticsWx/indexZL'
})

const height = mainHeight(20)
const TableHeaderRef = ref()
const dotList = ref<any>({})
const Template = ref<any>({})
const reportForm = ref('')
const templatePolicy = ref<any[]>([])
const name = ref('')
const idList = ref<any[]>([])

const tableStore = new TableStore({
    url: '/cs-harmonic-boot/customReport/getSensitiveUserReport',
    method: 'POST',
    column: [],
    showPage: false,
    beforeSearchFun: () => {
        tableStore.table.params.tempId = Template.value.id
        tableStore.table.params.lineId = dotList.value.id
        tableStore.table.params.sensitiveUserId = dotList.value.id
        if (!tableStore.table.params.tempId) {
            ElMessage.warning('请选择模板')
            return false
        }
        const datePicker = TableHeaderRef.value?.datePickerRef
        if (datePicker?.timeValue?.[0] && datePicker?.timeValue?.[1]) {
            tableStore.table.params.searchBeginTime = datePicker.timeValue[0]
            tableStore.table.params.searchEndTime = datePicker.timeValue[1]
        }
        destroyLuckysheet()
        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

onMounted(() => {
    initListByIds()
})

onUnmounted(() => {
    destroyLuckysheet()
})

function initListByIds() {
    getListByIds({}).then((res: any) => {
        if (res.data?.length > 0) {
            idList.value = res.data
            if (!tableStore.table.params.sensitiveUserId) {
                tableStore.table.params.sensitiveUserId = idList.value[0].id
            }
        }
    })
}

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

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

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

const exportEvent = () => {
    exportLuckysheetFile(
        {
            subject: dotList.value?.name || name.value,
            feature: '统计报表'
        },
        tableStore.table.data.length > 0
    )
}
</script>

<style scoped lang="scss">
.statistics-wx-zl {
    display: flex;
    overflow: hidden;
    gap: 0;

    &__sidebar {
        flex-shrink: 0;
        width: 280px;
        height: 100%;
        overflow: hidden;
        background: var(--el-bg-color);
        border-right: 1px solid var(--el-border-color-lighter);
        box-sizing: border-box;
        padding: 10px 8px 10px 10px;

        :deep(.cn-tree) {
            height: 100%;
            padding: 0;
        }

        :deep(.el-tree) {
            height: calc(100% - 42px) !important;
        }
    }

    &__main {
        flex: 1;
        min-width: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--el-bg-color);
    }

    &__template-select {
        min-width: 220px;
    }

    &__sheet-box {
        flex: 1;
        min-height: 0;
        padding: 0 12px 12px;
        box-sizing: border-box;
    }

    &__sheet-wrap {
        flex: 1;
        min-height: 0;
        position: relative;
        height: 100%;
    }

    &__sheet,
    &__empty {
        height: 100%;
        min-height: 240px;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 4px;
        overflow: hidden;
        background: var(--el-fill-color-blank);
    }

    &__empty {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
