<template>
    <div>
        <el-form :inline="true" class="demo-form-inline form">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

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

            <el-form-item>
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="onsubmit">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="Reset">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="text" @click="closeHandle">
                    条件筛选
                    <i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                </el-button>
            </el-form-item>
        </el-form>
        <div class="container" id="container">
            <i @click="closeHandle" class="el-icon-circle-close coles"></i>
            <el-form :inline="true" style="margin-top: 10px" label-width="110px" class="">
                <el-form-item label="监测点性质:">
                    <el-select v-model="formData.lineType" clearable>
                        <el-option label="电网侧" value="0" />
                        <el-option label="非电网侧" value="1" />
                    </el-select>
                </el-form-item>
                <el-form-item label="超标指标:">
                    <el-select v-model="formData.targetList" clearable multiple collapse-tags collapse-tags-tooltip
                        placeholder="请选择超标指标">
                        <el-option v-for="item in exceeded" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>

                <el-form-item label="预警阈值:">
                    <!-- <el-input v-model="formData.alertThreshold" placeholder="请输入预警阈值" clearable></el-input> -->
                    <el-input-number style="width: 197px;" v-model="formData.alertThreshold" :min="0" :step="1"
                        step-strictly @change="changeAlert" />
                </el-form-item>
                <el-form-item label="告警阈值:">
                    <el-input-number style="width: 197px;" v-model="formData.alarmThreshold" :min="0" :step="1"
                        step-strictly @change="changeAlarm" />
                </el-form-item>
                <!-- <el-form-item label="数据类型:">
                  
                    <el-radio-group v-model="formData.dataType">
                        <el-radio-button label="1">超标数据</el-radio-button>
                        <el-radio-button label="0">无数据</el-radio-button>

                    </el-radio-group>
                </el-form-item> -->
            </el-form>
        </div>


        <!-- <div class="button mb10">
                    <el-button type="primary" icon="el-icon-plus" size="mini">发起预警单</el-button>
                    <el-button type="primary" icon="el-icon-plus" size="mini">
                        发起告警单
                    </el-button>
                </div> -->
        <el-table stripe :data="tabList" :height="height" border style="width: 100%" v-loading="isLoading"
            header-cell-class-name="table_header">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="number" label="序号" width="100" :show-overflow-tooltip="true">
                <template scope="scope">
                    <span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="dept" label="负责单位" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="substation" label="变电站名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="deviceName" label="终端名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="lineName" label="监测点名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="businessType" label="监测对象类型" :show-overflow-tooltip="true">
                <!-- <template slot-scope="scope">
                            <span> {{ industry.find((item) => item.id ==  scope.row.businessType)?.name || '/' }} </span>
                        </template> -->
            </el-table-column>
            <el-table-column prop="objectName" label="监测对象名称" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span> {{ scope.row.objectName || '/' }} </span>
                </template>
            </el-table-column>
            <el-table-column prop="targetType" label="指标类型" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span> {{ exceeded.find((item) => item.id == scope.row.targetType).name || '/' }} </span>
                </template>
            </el-table-column>
            <el-table-column prop="overLimitDay" label="累计超标天数" :show-overflow-tooltip="true">
                <!-- <template slot-scope="scope">
                    <span> {{ scope.row.overLimitDay  }} </span>
                </template> -->
            </el-table-column>
            <el-table-column prop="updateTime" label="最新数据时间" width="200"></el-table-column>
            <el-table-column label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-view" size="mini" @click="detail(scope.row)">详情</el-button>
                </template>
            </el-table-column>



        </el-table>
        <el-pagination background align="right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formData.pageNum" :page-sizes="[10, 30, 40, 50, 100]" :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" class="mt10"></el-pagination>


        <el-dialog title="详情" :visible.sync="dialogVisible" width="70%">
            <el-table stripe :data="detailedData" height="600" border style="width: 100%" v-loading="isLoading"
                header-cell-class-name="table_header">

                <el-table-column prop="time" label="日期" width="200"></el-table-column>
                <el-table-column prop="overLimitInfo" label="越限详情" :show-overflow-tooltip="true"></el-table-column>




            </el-table>

        </el-dialog>


    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '@/assets/commjs/dictypeData'
import Timeinterval from './components/Timeinterval.vue'
import {
    onlineMonitor,
    overLimitDetail

} from '@/api/Process-supervision/electricitymanagement/electricitymanagement'
import SectionTwoPage from './components/SectionTwoPage.vue'
export default {
    components: { Area, Timeinterval, SectionTwoPage },
    data() {
        return {
            vh: '',
            SectionTwoPage: false,
            height: null,
            view: false,
            tabList: [],
            dialogVisible: false,
            isLoading: false,
            isLoading1: false,
            detailedData: [],
            formData: {
                deptId: '',
                lineType: '',
                dataType: 1,
                targetList: [],
                alertThreshold: '1',
                alarmThreshold: '1',
                pageNum: 1,
                pageSize: 10
            },
            industry: [],

            //问题来源
            exceeded: [],


            device: '',

            total: 0, // 总条数
            fvh: ''
        }
    },
    created() { },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.Dictionaries()

        this.onsubmit()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.device = window.devicePixelRatio
            this.height = window.sessionStorage.getItem('appheight') - 173
        },
        closeHandle() {
            if (this.view) {
                this.view = false
            } else {
                this.view = true
            }
            //console.log('关闭和展开');
            const dom = document.getElementById('container')
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container expend'
            } else {
                dom.className = 'container close-container'
            }
        },
        // 字典表
        Dictionaries() {
            this.formData.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            // /问题来源
            this.exceeded = dicData('Steady_Statis', [])
            this.industry = dicData('Business_Type', [])

            // this.formData.targetList = this.exceeded.filter(item => item.code == 'Total_Indicator')[0].id
            //     ? [exceeded.filter(item => item.code == 'Total_Indicator')[0].id]
            //     : []

        },

        changeAlert(e) {
            if (e == null) {
                this.formData.alertThreshold = '1'
            } else {
                if (e > this.formData.alarmThreshold) {
                    this.$message.warning('预警阈值不能大于报警阈值')
                    this.formData.alertThreshold = '1'
                }
            }
        },
        changeAlarm(e) {
            if (e == null) {
                this.formData.alarmThreshold = '1'
            } else {
                if (e < this.formData.alertThreshold) {
                    this.$message.warning('报警阈值不能小于预警阈值')
                    this.formData.alarmThreshold = '1'
                }
            }
        },
        // 详情
        detail(row) {
            this.detailedData = []
            overLimitDetail({
                lineId: row.lineId,
                targetId: row.targetType,
                searchBeginTime: this.$refs.interval.timeValue[0],
                searchEndTime: this.$refs.interval.timeValue[1]
            }).then(res => {
                this.detailedData = res.data
                this.dialogVisible = true

            })
        },

        //查询
        onsubmit() {
            this.isLoading = true
            this.formData.searchBeginTime = this.$refs.interval.timeValue[0]
            this.formData.searchEndTime = this.$refs.interval.timeValue[1];
            onlineMonitor(this.formData).then(res => {
                this.isLoading = false
                this.tabList = res.data.records

                this.total = res.data.total
            })
        },





        // 切换选项
        handleNodeClick(data) {
            this.formData.deptId = data.id
        },
        //勾选

        //重置
        Reset() {
            this.formData = {
                deptId: '',
                lineType: '',
                dataType: 1,
                targetList: [],
                alertThreshold: '1',
                alarmThreshold: '1',
                pageNum: 1,
                pageSize: 10
            }
            this.$refs.area.form.valueTitle = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            this.formData.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
            this.$refs.interval.intervald = 3
         
                this.onsubmit()
      

        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onsubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onsubmit()
        },
        // 字典处理

        formatterType(row, column) {
            let title = ''
            dicData('Audit_Status', ['Load_Type']).forEach(item => {
                if (item.code == row.type) {
                    title = item.name
                }
            })
            return title
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');

::v-deep .el-table .cell {
    text-align: center;
}

::v-deep .el-tabs--border-card>.el-tabs__content {
    padding: 10px;
}

::v-deep .form {
    .el-form-item {
        margin-bottom: 0;
    }
}

::v-deep .box {
    .el-input {
        width: 140px;
    }
}

::v-deep .box1 {
    .el-input {
        width: 100%;
    }
}

::v-deep .box2 {
    .el-textarea {
        width: 1000px;
    }
}

::v-deep .box3 {
    .el-textarea {
        width: 1200px;
    }
}

::v-deep .el-card {
    height: 40px;
}

.button {
    float: right;
    margin-right: 5px;
}

::v-deep .el-dialog .el-dialog__body {
    max-height: 100%;
    padding: 10px;
}

::v-deep .swiper {
    .el-divider--horizontal {
        margin: 10px 0;
    }
}

.container {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 40%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}

.expend {
    animation: expend ease 5s forwards;
}

.close-container {
    animation: no-expend ease 1s forwards;
}

@keyframes expend {
    from {
        top: 0px;
        height: auto;
    }

    to {
        height: auto;
        top: 0px;
    }
}

@keyframes no-expend {
    from {
        height: 20%;
        top: 0px;
    }

    to {
        top: 0px;
        height: 0px;
    }
}

.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
</style>
