<template>
    <div class="default-main" :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane :size="size">
                <PointTree
                    :default-expand-all="false"
                    @node-click="handleNodeClick"
                    @init="handleNodeClick"
                ></PointTree>
            </pane>
            <pane style="background: #fff" :style="height">
                <TableHeader ref="TableHeaderRef" date-picker :show-search="false">
                    <template v-slot:select>
                        <el-form-item label="报告类型">
                            <el-select v-model="tableStore.table.params.waveType" placeholder="请选择" clearable filterable>
                                <el-option
                                    v-for="item in waveTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label=" 模板策略">
                            <el-select v-model="value" placeholder="请选择" @change="changeFn" clearable filterable>
                                <el-option
                                    v-for="item in templatePolicy"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item> -->
                    </template>
                    <template #operation>
                        <el-button icon="el-icon-Download" type="primary" @click="exportEvent" :loading="loading">
                            生成报告
                        </el-button>
                    </template>
                </TableHeader>
                <div class="box" :style="`height: calc(${tableStore.table.height} + 45px)`">
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">监测网分布</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.monitorDistributeChart">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">暂降事件统计</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.eventCountTable">表格</el-checkbox>
                            <el-checkbox v-model="formInline.eventCountChart">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">暂降密度</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.densityTable">表格</el-checkbox>
                            <el-checkbox v-model="formInline.densityChart">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">暂降事件点</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.itic">ITIC</el-checkbox>
                            <el-checkbox v-model="formInline.f47">F47</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">概率分布</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.sagAmplitude">暂降幅值</el-checkbox>
                            <el-checkbox v-model="formInline.duration">持续时间</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">事件关联统计</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.eventRelevanceCountTable">表格</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">暂降原因</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.eventReasonTable">表格</el-checkbox>
                            <el-checkbox v-model="formInline.eventReasonChart">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">暂降类型</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.eventTypeTable">表格</el-checkbox>
                            <el-checkbox v-model="formInline.eventTypeChart">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12">
                            <div class="grid-content">
                                <div class="divBox">暂降热力图</div>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <el-checkbox v-model="formInline.thermodynamicChart">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="tsx">
import { ref, onMounted, provide, reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { getAreaReport, getList, selectReleation } from '@/api/event-boot/report'
import { ElMessage } from 'element-plus'
import PointTree from '@/components/tree/pqs/areaTree.vue'
import { mainHeight } from '@/utils/layout'
import dayjs from 'dayjs'
defineOptions({
    name: 'TransientReport/regionalreports'
})
const height = mainHeight(20)
const size = ref(19)
const dotList: any = ref({})
const dictData = useDictData()
const waveTypeList = ref([
    {
        value: 0,
        label: '暂态'
    },
    {
        value: 1,
        label: '暂降'
    }
])
const loading = ref(false)
const templatePolicy: any = ref([])
const value = ref<string>('')
const tableStore = new TableStore({
    url: '',
    method: 'post',
    column: []
})
const formInline: any = ref({
    monitorDistributeChart: false,
    eventCountTable: false,
    eventCountChart: false,
    densityTable: false,
    densityChart: false,
    itic: false,
    f47: false,
    sagAmplitude: false,
    duration: false,
    eventRelevanceCountTable: false,
    eventReasonTable: false,
    eventReasonChart: false,
    eventTypeTable: false,
    eventTypeChart: false,
    thermodynamicChart: false
})
tableStore.table.params.waveType = 0
provide('tableStore', tableStore)

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')

    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
    // tableStore.index()
})
const handleNodeClick = (data: any, node: any) => {
    dotList.value = data
}
const TableHeaderRef = ref()
getList({
    pageNum: 1,
    pageSize: 100,
    type: 1
}).then(res => {
    templatePolicy.value = res.data.records
    // 默认选中第一个
    if (res.data.records && res.data.records.length > 0) {
        value.value = res.data.records[0].id
        // 触发 change 事件，加载对应的配置
        changeFn(res.data.records[0].id)
    }
})
// 模板策略变化
const changeFn = (val: any) => {
    formInline.value = {
        monitorDistributeChart: false,
        eventCountTable: false,
        eventCountChart: false,
        densityTable: false,
        densityChart: false,
        itic: false,
        f47: false,
        sagAmplitude: false,
        duration: false,
        eventRelevanceCountTable: false,
        eventReasonTable: false,
        eventReasonChart: false,
        eventTypeTable: false,
        eventTypeChart: false,
        thermodynamicChart: false
    }
    let data = {
        id: val
    }

    selectReleation(data).then(res => {
        res.data.forEach((item: any) => {
            for (let k in formInline.value) {
                if (item.name == k) {
                    formInline.value[k] = true
                    return
                }
            }
        })
    })
}
const exportEvent = () => {
    formInline.value.statisticalType = dictData.getBasicData('Statistical_Type', [
        'Report_Type',
        'Manufacturer',
        'Voltage_Level',
        'Load_Type'
    ])[0]
    loading.value = true
    formInline.value.monitorFlag = 2
    formInline.value.powerFlag = 2
    formInline.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
    formInline.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
    formInline.value.deptIndex = dotList.value.id
    formInline.value.monitorFlag = 2
    formInline.value.powerFlag = 2
    formInline.value.waveType = tableStore.table.params.waveType
    formInline.value.interval = tableStore.table.params.timeFlag
    ElMessage('生成报告中,请稍等!')
    getAreaReport(formInline.value)
        .then((res: any) => {
            if (res == undefined) {
                loading.value = false
                return
            }
            let blob = new Blob([res], {
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
            })

            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a') // 创建a标签
            link.href = url
            // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
            link.download = dotList.value.name + '区域报告' + dayjs().format('YYYYMMDD') // 设置下载的文件名
            document.body.appendChild(link)
            link.click() //执行下载
            document.body.removeChild(link)
            loading.value = false
        })
        .catch(() => {
            loading.value = false
        })
}
</script>
<style lang="scss" scoped>
.el-select-dropdown__item.selected {
    font-weight: normal;
}
.grid-content {
    text-align: center;
}
.divBox {
    width: 250px;
    height: 31px;
    margin: auto;
    line-height: 32px;
    border: 1px solid #c9c9c9;
    &:hover {
        border: 1px solid #002255;
    }
}
.box {
    padding: 10px;
    margin-top: 10px;
    overflow-y: auto;

    border: 1px solid var(--el-border-color);
}
.el-divider--horizontal {
    margin: 10px 0;
}
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

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