<template>
    <div style="width: 100%">
        <el-form ref="form" :inline="true" :model="formInline">
            <el-form-item>
                <Area @click="handleNodeClick"></Area>
            </el-form-item>

            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-circle-plus" @click="generate">报告生成</el-button>
            </el-form-item>
        </el-form>
        <div class="box" :style="`height: ${vh - 10}px;`">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content" :style="`color:${echartsColor}`">
                        <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" :style="`color:${echartsColor}`">
                        <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" :style="`color:${echartsColor}`">
                        <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" :style="`color:${echartsColor}`">
                        <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" :style="`color:${echartsColor}`">
                        <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" :style="`color:${echartsColor}`">
                        <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" :style="`color:${echartsColor}`">
                        <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" :style="`color:${echartsColor}`">
                        <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" :style="`color:${echartsColor}`">
                        <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>
    </div>
</template>
<script>
import Area from '@/views/components/Area/Area.vue'
import { deptTree } from '@/api/admin/dept'
import Timeinterval from '@/views/components/TimePicker/index4'
import { dicData } from '@/assets/commjs/dictypeData'
import { getPmsAreaReport } from '@/api/regionReport'
export default {
    components: { Timeinterval, Area },
    props: {},
    data() {
        return {
            echartsColor: JSON.parse(window.localStorage.echartsColor).WordColor,
            value: '',
            checkList: [],

            formInline: {
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                monitorFlag: 2,
                powerFlag: 2,
                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,
                waveType: 0,
                statisticalType: {
                    code: 'Power_Network',
                    id: '8fa73802c9e1abab973adcbeb0d58567',
                    name: '',
                    sort: 0,
                    value: ''
                }
            },

            vh: undefined,
            item: ['', '']
        }
    },
    created() {},
    mounted() {
        ;(this.$refs.Timeinterval.timeOptions = [
            { label: '月份', value: 3 },
            { label: '自定义', value: 5 }
        ]),
            this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 123
        },
        generate() {
            this.$message('生成报告中..')
            this.formInline.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.formInline.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            this.formInline.interval = this.$refs.Timeinterval.intervald

            getPmsAreaReport(this.formInline).then(res => {
                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 = '区域报告' // 设置下载的文件名
                document.body.appendChild(link)
                link.click() //执行下载
                document.body.removeChild(link)
            })
        },

        handleNodeClick(data) {
            this.formInline.deptIndex = data.id
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
}

.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 $themeColor;
    }
}
.box {
    // border: 1px solid $themeColor;
    padding: 10px;

    overflow-y: auto;
    font-size: 15px;
}
.el-divider--horizontal {
    margin: 10px 0;
}
.mTop {
    margin-top: 5px;
}
</style>
