<template>
    <div style="width: 100%">
        <el-button type="primary" style="margin-top: -10px" class="flag" icon="el-icon-close" @click="$emit('close')">
            返回
        </el-button>
        <el-form ref="form" :inline="true" :model="form">
            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3" />
            </el-form-item>

            <el-form-item>
                <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">
                    <div class="grid-content" :style="`color:${echartsColor}`">
                        <div class="divBox">监测点详情</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <el-checkbox v-model="form.xq">监测点详情</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="form.lb">表格</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="form.mdbg">表格</el-checkbox>
                    <el-checkbox v-model="form.mdtx">图形</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="form.sjdITIC">ITIC</el-checkbox>
                    <el-checkbox v-model="form.sjdF47">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="form.glfbfz">暂降幅值</el-checkbox>
                    <el-checkbox v-model="form.glfbsj">持续时间</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="form.tjbg">表格</el-checkbox>
                    <el-checkbox v-model="form.tjtx">图形</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="form.yybg">表格</el-checkbox>
                    <el-checkbox v-model="form.yytx">图形</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="form.lxbg">表格</el-checkbox>
                    <el-checkbox v-model="form.lxtx">图形</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/Timeinterval.vue'
import { getLineExport } from '@/api/regionalreports'
export default {
    components: { Timeinterval, Area },
    props: {
        reportID: {
            type: String
        }
    },

    data() {
        return {
            echartsColor: JSON.parse(window.localStorage.echartsColor).WordColor,
            form: {
                searchBeginTime: '',
                searchEndTime: '',
                flag: 0,
                type: 1,
                lineId: '',
                lineName: '',
                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
            },
            value: '',
            vh: undefined,
            item: ['', '']
        }
    },
    created() {},
    mounted() {
        this.item = this.$refs.Timeinterval.timeValue
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 123
        },
        addReport() {
            this.form.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.form.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            // this.form.flag = this.$refs.Timeinterval.timeFlag;
            this.form.lineId = this.reportID

            getLineExport(this.form).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)
            })
        }
    },

    computed: {},

    watch: {}
}
</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;

    overflow-y: auto;
    font-size: 15px;
    //   border: 1px solid $themeColor;
}
.el-divider--horizontal {
    margin: 10px 0;
}
.mTop {
    margin-top: 5px;
}
.flag {
    position: absolute;
    top: 22px;
    right: 10px;
    z-index: 999;
}
</style>
