<template>
    <div class="main app-container-event">
        <Header/>
        <div class="main_t">
            <div class="main_t_t">
                <i class="main_t_t_l">当前位置：首页 &gt;</i>
                <i>预警事件</i>
            </div>
        </div>
        <div class="main_b">
            <!--查询条件-->
            <el-form :model="editForm" ref="editForm" class="form-box" :inline="true" style="margin:20px;">
                <el-form-item label="" prop="queryParamsData1">
                    <el-input
                            maxLength="30"
                            v-model="editForm.searchValue"
                            placeholder="实验室/房间号/预警事件/姓名"
                            style="width: 220px"
                    />
                </el-form-item>
                <el-form-item label="" prop="warnType">
                    <el-select v-model="editForm.warnType" placeholder="请选择类型" style="width: 200px">
                        <el-option
                                v-for="item in warnOptions"
                                :key="item.warnType"
                                :label="item.warnName"
                                :value="item.warnType"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="" prop="state" style="margin-top:-2px;">
                    <el-date-picker
                            :clearable="false"
                            v-model="dateRange"
                            size="small"
                            style="width: 240px"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label-width="0">
                    <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
                    <el-button @click="resetForm('searchForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <!--列表-->
            <div class="table-max-big-box">
                <el-table :data="tableData" style="width: 100%" height="250" :row-class-name="tableRowClassName">
                    <el-table-column label="报警时间" prop="createTime" width="180" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.warnTime,"{y}-{m}-{d} {h}:{i}") }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预警类型" prop="content" width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.warnType==1?'化学品预警':(scope.row.warnType==2?'气瓶预警':'算法预警')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预警事件" prop="warnContent" width="505" show-overflow-tooltip/>
                    <el-table-column label="学院" prop="deptName" width="200" show-overflow-tooltip/>
                    <el-table-column label="楼栋楼层" prop="content" width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.buildName}}-{{scope.row.floorName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="实验室" prop="content" width="200" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{scope.row.subName}}{{scope.row.roomNum?' - ('+scope.row.roomNum+')':''}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="安全员" prop="safeInfoStr" width="200" show-overflow-tooltip/>
                    <el-table-column label="操作" width="100" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <div class="table-button-box">
                                <p class="table-button-null"></p>
                                <p class="table-button-p"
                                   style="color:#1ED0F8;cursor: pointer"
                                   @click="tableButton(scope.row)"
                                   v-if="scope.row.noticeStatus==0 && scope.row.isHandlePeople==false"
                                >详情</p>
                                <p class="table-button-p"
                                   style="color:#1ED0F8;cursor: pointer"
                                   @click="tableButton(scope.row)"
                                   v-if="scope.row.noticeStatus!=0 "
                                >详情</p>
                                <p class="table-button-null"></p>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex;padding-bottom:20px;">
                    <p style="flex:1;"></p>
                    <el-pagination
                            style="margin-top: 14px"
                            background
                            @current-change="handleCurrentChange"
                            :page-sizes="[10, 20, 30, 40]"
                            :current-page.sync="editForm.page"
                            :page-size="editForm.pageSize"
                            layout="total,prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {systemWarningNoticeNoMenuList} from "@/api/index"
    import Header from '@/components/header.vue'

    export default {
        components: {
            Header
        },
        data() {
            return {
                editForm: {
                    searchValue: '',
                    warnType: '',
                    page: 1,
                    pageSize: 10
                },
                labList: [],//实验室
                totalNum: 0,
                tableData: [],
                codeData: '',
                subOptions: [],
                warnOptions:[
                    {warnName:'化学品预警',warnType:'1'},
                    {warnName:'气瓶预警',warnType:'2'},
                    {warnName:'算法预警',warnType:'3'},
                    {warnName:'预案',warnType:'4'},
                ],
                //楼栋楼层
                buildFloorOptions:[],
                //时间数据
                dateRange:[],
            }
        },
        methods: {
            tableButton(item) {
                this.$router.push(
                    {
                        path: './workInfoDetail',
                        query: {
                            item: item,
                            type: 2
                        },
                    })
            },
            back() {
                this.$router.push('/home')
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'success-row';
                } else {

                    return 'warning-row';
                }
            },

            indexMethod(index) {
                return (this.editForm.page - 1) * this.editForm.pageSize + index + 1;
            },
            indexMethod2(index) {
                return (this.editForm2.page - 1) * this.editForm2.pageSize + index + 1;
            },
            //请求列表
            getAjaxList: function () {
                let obj = JSON.parse(JSON.stringify(this.editForm))
                obj.deptId = localStorage.getItem('deptId');
                if(!localStorage.getItem('deptId')){
                  obj.buildId = localStorage.getItem('buildId');
                }
                if(this.dateRange[0]){
                    obj.startTime = this.dateRange[0]+'T00:00:00'
                    obj.endTime = this.dateRange[1]+'T23:59:59'
                }else{
                    obj.startTime = "";
                    obj.endTime = "";
                }
                systemWarningNoticeNoMenuList(obj).then((res) => {
                    if (res.code == 200) {
                        this.$set(this, 'tableData', res.data.records);
                        this.$set(this, 'totalNum', res.data.total);
                    }
                })
            },
            /*查询*/
            onSearch() {

                this.editForm.page = 1;
                this.getAjaxList();
            },
            /*重置*/
            resetForm() {
                this.$set(this,'editForm',{
                    searchValue: '',
                    warnType: '',
                    page: 1,
                    pageSize: 10
                });
                this.$set(this,'dateRange',[]);
                this.onSearch();
            },
            handleCurrentChange(val) {
                this.editForm.page = val;
                this.getAjaxList();
            },
        },
        mounted() {
            this.codeData = this.$route.query.key
            this.getAjaxList();
        },


    }
</script>
<style lang="scss" scoped>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .main {
        width: 1920px;
        height: 1080px;
        /* background: url("../img/index_bg.png") no-repeat;
         background-size: 100% 100%;*/
        position: relative;
        left: 0;
        top: 0;
        z-index: 50;
        background: #062338;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .main_t {
            background: #062338;
            width: 1852px;
            position: absolute;
            left: 34px;
            top: 86px;
            z-index: 200;
            .main_t_t {
                margin: 20px 0 0 18px;
                > i {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #FFFFFF;
                    line-height: 16px;
                }
                > i:nth-of-type(1) {

                }
                > i:nth-of-type(2) {
                    color: #1ED0F8;
                }
            }
        }
        .main_b {
            background: rgba(9, 55, 81, 0.6);
            padding: 0 32px;
            width: 1852px;
            margin-bottom: 40px;
            //position: absolute;
            //left: 34px;
            //top: 138px;
            //z-index: 200;
            margin-top: 138px;
            margin-left: 34px;
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .main_b_title {
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 24px;
                text-align: center;
                margin-top: 10px;
            }
        }
        .main_b_h {
            background: rgba(9, 55, 81, 0.6);
            padding: 0 32px;
            width: 1852px;
            height: 894px;
            margin-top: 138px;
            margin-left: 34px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            .main_b_title {
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 24px;
                text-align: center;
                margin-top: 10px;
            }
        }
        .main_b2 {
            background: rgba(9, 55, 81, 0.6);
            padding: 0 32px;
            width: 1852px;
            height: 442px;
            margin-left: 34px;
            margin-top: 25px;
            overflow: hidden;
            //position: absolute;
            //left: 34px;
            //top: 588px;
            //z-index: 200;
            .main_b_title {
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 24px;
                text-align: center;
                margin-top: 10px;
            }
        }
    }
</style>
<style lang="scss">
    li {
        list-style: none
    }

    i, em, b {
        font-style: normal;
        font-weight: 100;
    }

    body {
        margin: 0
    }

    .app-container-event {
        .table-max-big-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .el-table--border {
                border-bottom: 1px solid #ddd !important;
            }
            .table-box-no-height {
                /*border-right:1px solid #DFE6EC;*/
                /*background-color: #333333;*/
                //表头
                th {
                    /*background-color: #f5f5f5;*/
                    .cell {
                        /*color:#333;*/
                        font-size: 14px;
                        font-weight: 700;
                        text-align: center;
                    }
                }
                td {
                    .cell {
                        padding: 0 10px 0 12px;
                    }
                    div {
                        font-size: 14px;
                        font-weight: 500;
                    }
                    //勾选框
                    .el-checkbox {
                        display: block;
                        height: 22px;
                        width: 14px;
                        margin: 6px auto;
                        overflow: hidden;
                        span {
                            display: block;
                            height: 24px;
                            width: 14px;
                            overflow: hidden;
                            span {
                                height: 14px;
                                width: 14px;
                                margin: 0 auto;
                            }
                        }
                    }
                }
                //默认对齐方向
                .cell {
                    text-align: left;
                }
                //向左对齐方向
                .is-table-left {
                    .cell {
                        text-align: left;
                    }
                }
                //居中对齐方向
                .is-table-center {
                    .cell {
                        text-align: center;
                    }
                }
                //向右对齐方向
                .is-table-right {
                    .cell {
                        text-align: right;
                    }
                }
                .caret-wrapper {
                    height: 20px;
                }
                .sort-caret.ascending {
                    top: -3px;
                }
                .sort-caret.descending {
                    bottom: -1px;
                }
                .el-table__header-wrapper {
                    width: calc(100% - 9px);
                    /*border-right:1px solid #F5F5F5;*/
                    height: 40px;
                    th, td {
                        padding: 6px 0;
                    }
                }

                .el-table__header-wrapper, .el-table__fixed-header-wrapper {
                    th {
                        word-break: break-word;
                        /*background-color: #f8f8f8;*/
                        /*color: #515A6E;*/
                        height: 40px;
                    }
                }
                .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
                    /*color:#333333;*/
                    /*background-color:#F5F5F5;*/
                    line-height: 20px;
                }
                .el-table__body-wrapper {
                    /*background-color: #FFFFFF;*/
                    flex: 1;
                    overflow-y: scroll !important;
                    th, td {
                        padding: 6px 0;
                    }
                    .el-button [class*="el-icon-"] + span {
                        margin-left: 1px;
                    }
                }
                //表格内switch按钮样式
                .el-switch {
                    height: 26px;
                    line-height: 26px;
                }
                .switch .el-switch__label {
                    position: absolute;
                    display: none;
                    /*color: #fff !important;*/
                }
                .switch .el-switch__label--right {
                    z-index: 1;
                }
                .switch .el-switch__label--right span {
                    margin-left: 10px;
                }
                .switch .el-switch__label--left {
                    z-index: 1;
                }
                .switch .el-switch__label--left span {
                    margin-left: 24px;
                }
                .switch .el-switch__label.is-active {
                    display: block;
                }
                .switch.el-switch .el-switch__core,
                .el-switch .el-switch__label {
                    width: 64px !important;
                    margin: 0;
                    height: 26px;
                    line-height: 26px;
                    border-radius: 14px;
                }
                .el-switch__core:after {
                    top: 4px;
                    left: 4px;
                }
                .el-switch.is-checked .el-switch__core::after {
                    margin-left: -20px;
                }
            }
        }
    }
</style>
