<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" datePicker :show-search="false">
                    <template #operation>
                        <el-button icon="el-icon-Download" type="primary" @click="openDialog" :loading="loading">
                            生成
                        </el-button>
                    </template>
                </TableHeader>

                <div class="box">
                    <div id="luckysheet">
                        <img
                            width="100%"
                            :style="`height: calc(${tableStore.table.height} + 40px)`"
                            src="@/assets/img/region.png"
                        />
                    </div>
                </div>

                <!-- 电压等级选择弹窗 -->
                <el-dialog
                    v-model="dialogVisible"
                    title="选择电压等级"
                    width="420px"
                    :close-on-click-modal="false"
                >
                    <el-form label-width="100px" style="padding:10px 0;">
                        <el-form-item label="电压等级">
                            <el-select
                                v-model="voltageLevel"
                                multiple
                                collapse-tags
                                clearable
                                value-key="id"
                                placeholder="请选择电压等级"
                                style="width: 260px;"
                                filterable
                            >
                                <el-option
                                    v-for="item in voltageleveloption"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="confirmExport" :loading="loading">确定并生成</el-button>
                    </template>
                </el-dialog>
            </pane>
        </splitpanes>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide, watch } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/areaTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { mainHeight } from '@/utils/layout'
import { areaHarmonicReport } from '@/api/process-boot/reportForms'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

defineOptions({
    name: 'harmonic-boot/region/word'
})
const height = mainHeight(20)
const size = ref(19)
const loading = ref(false)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand') || []
const voltageLevel: any = ref([])

// 弹窗状态
const dialogVisible = ref(false)

const tableStore = new TableStore({
    url: '',
    method: 'POST',
    column: [],
    beforeSearchFun: () => {},
    loadCallback: () => {}
})
provide('tableStore', tableStore)

// 弹窗打开时默认全选所有电压等级
watch(dialogVisible, (val) => {
    if (val && voltageleveloption.length) {
        voltageLevel.value = [...voltageleveloption]
    }
})

onMounted(() => {
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
})

const handleNodeClick = (data: any, node: any) => {
    dotList.value = data
}

// 打开弹窗
const openDialog = () => {
    if (!dotList.value?.id) {
        ElMessage.warning('请先在左侧选择站点/区域')
        return
    }
    dialogVisible.value = true
}

// 确认生成
const confirmExport = async () => {
    loading.value = true
    ElMessage('生成报告中...')

    try {
        // 选中数据转为id数组，空数组代表导出全部
        const voltageIds = voltageLevel.value.map((item: any) => item.id)
        const res: any = await areaHarmonicReport({
            deptId: dotList.value.id,
            areaReportFlag: 1,
            startTime: TableHeaderRef.value.datePickerRef.timeValue[0],
            endTime: TableHeaderRef.value.datePickerRef.timeValue[1],
            voltageIds
        })

        if (!res) {
            loading.value = false
            return
        }

        const 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')
        link.href = url
        link.download = dotList.value.name + '区域稳态报告' + dayjs().format('YYYYMMDD')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(url)

        ElMessage.success('生成成功')
        dialogVisible.value = false
    } catch (e) {
        ElMessage.error('生成失败，请重试')
    } finally {
        loading.value = false
    }
}
</script>

<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.box {
    padding: 10px;
}
</style>
