<template>
    <div style="width: 100%">
        <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
            <el-form-item style="margin-left: 10px">
                <Timeinterval ref="Timeinterval" :interval="3" />
            </el-form-item>
            <el-form-item label=" 模板策略:">
                <el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        popper-class="select"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <!-- <el-button type="primary" icon="el-icon-search" @click="query"
          >查询</el-button
        > -->
                <el-button type="primary" icon="el-icon-circle-plus" @click="addReport">报告生成</el-button>
            </el-form-item>
        </el-form>
        <div class="box" :style="`height: ${vh}px;`">
            <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>

            <el-divider></el-divider>
        </div>
    </div>
</template>
<script>
import { deptTree } from '@/api/admin/dept'
import Timeinterval from '@/views/components/TimePicker/index4'
import { getLineExport } from '@/api/regionalreports'
import Area from '@/views/components/Area/Area.vue'
import { getList, selectReleation } from '@/api/regionReport'
export default {
    components: { Timeinterval, Area },
    props: {
        famsg: {
            type: String
        },
        level: {
            type: [String, Number]
        },
        lineName: {
            type: String
        }
    },

    data() {
        return {
            formd: {
                xq: false,
                lb: false,
                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
            },
            value: '',

            form: {
                time: '', //统计时间
                value: '',
                props: '',
                // valueId: null,
                valueTitle: '全国',
                accordion: false,
                defaultExpandedKey: [],
                options: [],
                default: {
                    value: 'id',
                    children: 'children',
                    label: 'name'
                }
            },
            vh: undefined,

            item: ['', ''],
            options: []
        }
    },
    created() {
        this.dictionaries()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.item = this.$refs.Timeinterval.timeValue
        let data = {
            pageNum: 1,
            pageSize: 100,
            type: 0
        }
        getList(data).then(res => {
            this.options = res.data.records
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 113
        },
        changeFn(val) {
            this.formd = {
                xq: false,
                lb: false,
                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
            }
            let data = {
                id: val
            }

            selectReleation(data).then(res => {
                res.data.forEach(item => {
                    for (let k in this.formd) {
                        if (item.name == k) {
                            this.formd[k] = true
                            return
                        }
                    }
                })
            })
        },
        addReport() {
            if (this.level != 6) {
                return this.$message({
                    message: '请选择监测点进行报告生成!',
                    type: 'warning'
                })
            }
            let a = ''

            // this.aa.lineName = a;
            this.formd.lineId = this.famsg
            this.formd.lineName = this.lineName
            this.formd.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.formd.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            this.formd.flag = this.$refs.Timeinterval.intervald
        

            getLineExport(this.formd).then(res => {
                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 = '电压暂降事件分析报告' // 设置下载的文件名
                document.body.appendChild(link)
                link.click() //执行下载
                document.body.removeChild(link)
            })
        },
        query() {
            this.loading = true
            this.$refs.onlinRate.query()
        },
        dictionaries() {
            deptTree().then(res => {
                // console.log("单位res:",res.data);
                res.data.forEach(item => {
                    if (res.code == 'A0000') {
                        this.form.options = res.data
                    }
                })
            })
        },
        handleNodeClick(data, node, nodeData) {
            this.$refs.selectTree1.blur()
            this.form.valueTitle = data.name
            this.form.defaultExpandedKey = []
        }
    },

    computed: {},

    watch: {
        // famsg(newVal, oldVal) {
        //   // newVal是新值，oldVal是旧值
        //   this.famsg = newVal;
        // },
    }
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-select-dropdown {
//   position: absolute !important;
//   left: 0 !important;
//   border: 1px solid #010f13;
// }
// .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 {
    padding: 10px;
    // margin-top: 10px;
    margin-left: 10px;
    overflow-y: auto;
    font-size: 15px;
    border: 1px solid $themeColor;
}
.el-divider--horizontal {
    margin: 10px 0;
}
.mTop {
    margin-top: 5px;
    margin-bottom: 5px;
}
</style>
