<template>
    <div class="default-main report-zl-page" :style="height">
        <div class="report-zl-sidebar">
            <pointTree ref="terminalRef" template @Policy="stencil" @node-click="handleNodeClick"
                @init="handleNodeClick" @pointTypeChange="pointTypeChange" />
        </div>

        <el-tabs v-model="activeTab" type="border-card" class="report-zl-tabs">
            <el-tab-pane label="报表" name="sheet">
                <Sheet :dot-list="dotList" :line-flag="lineFlag" :template-policy="templatePolicy"
                    :active="activeTab === 'sheet'" />
            </el-tab-pane>
            <el-tab-pane label="报告" name="report">
                <Report :dot-list="dotList" :line-flag="lineFlag" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { mainHeight } from '@/utils/layout'
import { isLineTreeLeaf } from '@/components/tree/govern/lineTreeUtils'
import pointTree from '@/components/tree/govern/pointTree.vue'
import Sheet from './components/sheet.vue'
import Report from './components/report.vue'

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

const props = withDefaults(
    defineProps<{
        defaultTab?: 'sheet' | 'report'
    }>(),
    {
        defaultTab: 'sheet',
    }
)

const height = mainHeight(20)
const terminalRef = ref()
const activeTab = ref(props.defaultTab)
const dotList = ref<Record<string, any>>({})
const templatePolicy = ref<any[]>([])
const lineFlag = ref(true)

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

const pointTypeChange = (_val: any, obj: any) => {
    handleNodeClick(obj)
}

const handleNodeClick = (data: any) => {
    if (data.name.includes('治理监测点')) {
        lineFlag.value = false
        return
    }
    if (isLineTreeLeaf(data)) {
        lineFlag.value = true
        dotList.value = data
    }
}
</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-tabs {
    flex: 1;
    min-height: 0;





    .el-tab-pane {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}
</style>
