<template>
    <div class="default-main report-zl-page1" :style="height">
        <div class="report-zl-sidebar">
            <!-- <pointTreeWx :default-expand-all="false" template @node-click="handleNodeClick" @init="handleNodeClick"
                    @Policy="stencil">
                </pointTreeWx> -->
            <CloudDeviceEntryTree ref="TerminalRef" :height="37" template @Policy="stencil" @node-click="handleNodeClick"
                @init="handleNodeClick"></CloudDeviceEntryTree>
        </div>
        <div class="report-zl-main">
            <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>
                    <!-- <el-form-item label="监测对象">
                            <el-select
                                filterable
                                v-model="tableStore.table.params.sensitiveUserId"
                                placeholder="请选择监测对象"
                                clearable
                            >
                                <el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
                            </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" v-if="lineFlag">
                <div id="luckysheet" class="report-zl-sheet" v-if="tableStore.table.data.length > 0"></div>
                <el-empty class="report-zl-sheet" v-else description="暂无数据" />
            </div>
            <el-empty class="report-zl-sheet" v-else description="治理监测点暂不支持出具报表" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, 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 { destroyLuckysheet, exportLuckysheetFile, renderLuckysheetReport } from '@/utils/luckysheetHelper'
import { isLineTreeLeaf } from '@/components/tree/govern/lineTreeUtils'
import DatePicker from '@/components/form/datePicker/time.vue'
import CloudDeviceEntryTree from '@/components/tree/govern/cloudDeviceEntryTreeZL.vue'
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
import { ElMessage } from 'element-plus'
// import data from './123.json'

const height = mainHeight(70)
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 lineFlag = ref(true)
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
        // ;(tableStore.table.params.startTime = datePickerRef.value.timeValue[0]),
        //     (tableStore.table.params.endTime = datePickerRef.value.timeValue[1]),
        if (!tableStore.table.params.tempId) {
            ElMessage.warning('请选择模板')
            return false
        }
        if (!dotList.value?.id) {
            ElMessage.warning('请选择监测点')
            return false
        }
        delete tableStore.table.params.searchBeginTime
        delete tableStore.table.params.searchEndTime
        delete tableStore.table.params.timeFlag
    },
    loadCallback: () => {
        name.value = dotList.value.name
        renderLuckysheetReport('luckysheet', tableStore.table.data, { allowEdit: false })
    }
})
provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1
tableStore.table.params.customType = 1
const flag = ref(true)
onMounted(() => {
    initListByIds()
})
onUnmounted(() => {
    destroyLuckysheet()
})

const idList = ref([])
// 监测对象
const initListByIds = () => {
    getListByIds({}).then((res: any) => {
        if (res.data.length > 0) {
            idList.value = res.data

            if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
                tableStore.table.params.sensitiveUserId = idList.value[0].id
            }
            // templateListData()
        }
    })
}
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.excelType
}

const handleNodeClick = (data: any, node: any) => {
    if (data.name.includes('治理监测点')) {
        lineFlag.value = false
        return tableStore.table.loading = false
    }
    if (isLineTreeLeaf(data) || data?.level == 3) {
        lineFlag.value = true
        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
    )
}
</script>
<style lang="scss">
.report-zl-page1 {
    display: flex;
    overflow: hidden;

    .cn-tree {
        padding: 0 10px 0 0 !important;
    }
}

.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-sheet {
    height: 90%;
}
</style>
<style></style>
