<template>
    <div :style="height">
        <splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
            <pane style="background: #fff" :style="height">
                <!-- <div :style="height"></div> -->
                <TableHeader ref="TableHeaderRef" date-picker :show-search="false">
                    <template v-slot:select>
                        <!-- <el-form-item label=" 模板策略">
                            <el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
                                <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="preview">预览报告</el-button> -->
                        <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} + 65px)`">
                    <el-row>
                        <el-col :span="12" class="mTop">
                            <div class="grid-content">
                                <div class="divBox">监测点详情</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="mTop">
                            <el-checkbox v-model="formd.xq">监测点详情</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12" class="mTop">
                            <div class="grid-content">
                                <div class="divBox">暂降事件列表</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="mTop">
                            <el-checkbox v-model="formd.lb">表格</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12" class="mTop">
                            <div class="grid-content">
                                <div class="divBox">暂降密度</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="mTop">
                            <el-checkbox v-model="formd.mdbg">表格</el-checkbox>
                            <el-checkbox v-model="formd.mdtx">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12" class="mTop">
                            <div class="grid-content">
                                <div class="divBox">暂降事件点</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="mTop">
                            <el-checkbox v-model="formd.sjdITIC">ITIC</el-checkbox>
                            <el-checkbox v-model="formd.sjdF47">F47</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12" class="mTop">
                            <div class="grid-content">
                                <div class="divBox">概率分布</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="mTop">
                            <el-checkbox v-model="formd.glfbfz">暂降幅值</el-checkbox>
                            <el-checkbox v-model="formd.glfbsj">持续时间</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12" class="mTop">
                            <div class="grid-content">
                                <div class="divBox">月份统计</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="mTop">
                            <el-checkbox v-model="formd.tjbg">表格</el-checkbox>
                            <el-checkbox v-model="formd.tjtx">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12" class="mTop">
                            <div class="grid-content">
                                <div class="divBox">暂降原因</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="mTop">
                            <el-checkbox v-model="formd.yybg">表格</el-checkbox>
                            <el-checkbox v-model="formd.yytx">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="12" class="mTop">
                            <div class="grid-content">
                                <div class="divBox">暂降类型</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="mTop">
                            <el-checkbox v-model="formd.lxbg">表格</el-checkbox>
                            <el-checkbox v-model="formd.lxtx">图形</el-checkbox>
                        </el-col>
                    </el-row>
                    <el-divider></el-divider>
                </div>
            </pane>
        </splitpanes>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { ElMessage } from 'element-plus'

defineOptions({
    name: 'TransientReport/monitoringpointReport'
})
const loading = ref(false)
const monitoringPoint = useMonitoringPoint()
const height = mainHeight(82)
const size = ref(17)
const value = ref('')
const TableHeaderRef = ref()
const dotList: any = ref({
    name: monitoringPoint.state.lineName.split('>')[3],
    id: monitoringPoint.state.lineId,
    level: 6
})

const formd: any = ref({
    xq: true,
    lb: true,
    mdbg: false,
    mdtx: false,
    sjdITIC: false,
    sjdF47: false,
    glfbfz: false,
    glfbsj: false,
    tjbg: false,
    tjtx: false,
    yybg: false,
    yytx: false,
    lxbg: false,
    lxtx: false,
    type: 0
})

const templatePolicy: any = ref([])
const tableStore = new TableStore({
    publicHeight: 80,
    url: '',
    method: 'post',
    column: []
})
provide('tableStore', tableStore)
onMounted(() => {
    TableHeaderRef.value.setTheDate(1)
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
})

const exportEvent = () => {
    if (dotList.value.level != 6) {
        return ElMessage({
            message: '请选择监测点进行报告生成!',
            type: 'warning'
        })
    }
    let a = ''
    loading.value = true
    formd.value.lineId = monitoringPoint.state.lineId
    formd.value.lineName = monitoringPoint.state.lineName.split('>').at(-1)
    formd.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
    formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
    formd.value.flag = TableHeaderRef.value.datePickerRef.interval
    ElMessage('生成报告中,请稍等!')
    getLineExport(formd.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'
            })
            // createObjectURL(blob); //创建下载的链接
            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a') // 创建a标签
            link.href = url
            link.download = monitoringPoint.state.lineName.split('>').at(-1) + '_暂态报告' // 设置下载的文件名
            document.body.appendChild(link)
            link.click() //执行下载
            document.body.removeChild(link)
            loading.value = false
        })
        .catch(() => {
            loading.value = false
        })
}
const preview = () => {
    if (dotList.value.level != 6) {
        return ElMessage({
            message: '请选择监测点进行预览!',
            type: 'warning'
        })
    }
    let a = ''

    formd.value.lineId = monitoringPoint.state.lineId
    formd.value.lineName = monitoringPoint.state.lineName.split('>').at(-1)
    formd.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
    formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
    formd.value.flag = TableHeaderRef.value.datePickerRef.interval
    ElMessage('生成报告中,请稍等!')
    getLineExport(formd.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 = monitoringPoint.state.lineName.split('>').at(-1) + '_暂态报告' // 设置下载的文件名
        document.body.appendChild(link)
        link.click() //执行下载
        document.body.removeChild(link)
    })
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}
.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;
    font-size: 15px;
}
.el-divider--horizontal {
    margin: 10px 0;
}
.mTop {
    margin-top: 5px;
    margin-bottom: 5px;
}
</style>
