<template>
    <div class="main">
        <Header/>
        <div class="main_t">
            <div class="main_t_t">
                <i class="main_t_t_l">当前位置：首页 &gt;</i>
                <i>风险预警统计</i>
            </div>
            <!--<div class="main_t_b" id="plan_chart"></div>-->
        </div>
        <div class="main_b">
            <!--查询条件-->
            <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
                <el-form-item label="" prop="searchValue" label-width="98px">
                    <el-input
                        maxLength="30"
                        v-model="editForm.searchValue"
                        placeholder="实验室/房间号"
                    />
                </el-form-item>
                <el-form-item label="日期" prop="dateRange" label-width="68px">
                    <el-date-picker
                            popper-class="select-big-data-time"
                            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>
            <!--列表-->
            <el-table :data="tableData" style="width: 100%;" height="690" :row-class-name="tableRowClassName">
                <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号"
                                 width="60"></el-table-column>
                <el-table-column align="left" header-align='center' prop="subjectName" label="实验室" width="400">
                    <template slot-scope="scope">
                        <div class="lab_border">
                            <span class="lab_span"><i>{{scope.row.classLevelName}}</i><i>{{scope.row.classTypeNames}}</i></span>
                            <span class="lab_span2">{{scope.row.subName}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align='center' prop="eventStartTime" label="起始时间" width="160">
                    <template slot-scope="scope">
                        <span>{{parseTime(scope.row.eventStartTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align='center' prop="eventEndTime" label="结束时间" width="160">
                    <template slot-scope="scope">
                        <span>{{parseTime(scope.row.eventEndTime)}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align='center' prop="alarmInfo" label="风险预警" width="200">
                    <template slot-scope="scope">
                        <span class="risk_span">
                            <img v-if="scope.row.checkOne" src="@/assets/image/icon_fxyj_xz.png"/>
                            <img v-if="!scope.row.checkOne" src="@/assets/image/icon_fxyj_zc.png"/>电话
                        </span>
                        <span class="risk_span">
                            <img v-if="scope.row.checkTwo" src="@/assets/image/icon_fxyj_xz.png"/>
                            <img v-if="!scope.row.checkTwo" src="@/assets/image/icon_fxyj_zc.png"/>短信
                        </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align='center' prop="sesorContent" label="应急处置">
                    <template slot-scope="scope">
                        <span class="risk_span" v-for="(item,index) in scope.row.deviceList" :key="index">
                            <img src="@/assets/image/icon_fxyj_xz.png"/>
                            {{item.deviceName}}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <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"
                    :total="totalNum">
            </el-pagination>
        </div>
    </div>
</template>

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

    export default {
        components: {
            Header
        },
        data() {
            return {
                editForm: {
                    searchValue:'',
                    page: 1,
                    pageSize: 10
                },
                subjectOptions: [],//院系
                labList: [],//实验室
                dateRange: [],//时间
                totalNum: 0,
                tableData: [],
                //硬件列表
                deviceList:[],

            }
        },
        methods: {
            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;
            },
            laboratoryRiskDeviceTypeGetList(){
                laboratoryRiskDeviceTypeGetList().then((res) => {
                    this.$set(this,'deviceList',res.data);
                    this.getAjaxList();
                })
            },
            //请求列表
            getAjaxList: function () {
                let _this = this;
                let obj = JSON.parse(JSON.stringify(this.editForm))
                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 = '';
                }
                laboratoryBigViewCollegeEventStatisticsList(obj).then((res) => {
                    if (res.code == 200) {
                        res.data.records.forEach((item)=>{
                            if(item.bindingDevice){
                                item.deviceList =  JSON.parse(item.bindingDevice);
                                item.deviceList.forEach((minItem)=>{
                                    this.deviceList.forEach((deviceItem)=>{
                                        if(minItem.typeKey == deviceItem.typeKey){
                                            minItem.deviceName = deviceItem.riskDeviceTypeName
                                        }
                                    })
                                })
                            }else{
                                item.deviceList = [];
                            }
                            if (item.alarmType){
                                item.checkOne = item.alarmType.indexOf('1') != -1;
                                item.checkTwo = item.alarmType.indexOf('2') != -1;
                            } else {
                                item.checkOne = false;
                                item.checkTwo = false;
                            }
                        })
                        let data = res.data.records;
                        if (data && data.length > 0) {
                            _this.tableData = data;
                            _this.totalNum = parseInt(res.data.total);
                        } else {
                            _this.tableData = [];
                            _this.totalNum = 0;
                        }
                    }
                })
            },
            /*查询*/
            onSearch() {
                this.editForm.page = 1;
                this.getAjaxList();
            },
            /*重置*/
            resetForm() {
                this.editForm.searchValue = "";
                this.dateRange = [];
                this.onSearch();

            },
            handleCurrentChange(val) {
                this.editForm.page = val;
                this.getAjaxList();
            },
        },
        mounted() {
            this.laboratoryRiskDeviceTypeGetList()
        },


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

    .lab_border {
        display: flex;
        align-items: center;
    }

    .lab_span {
        display: inline-block;
        border: 1px solid #0183FA;
        border-radius: 6px;
        padding: 6px 16px;
        margin-right: 8px;
        > i {
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #0183FA;
            line-height: 16px;
            display: block;
        }
        > i:nth-of-type(1) {
        }
        > i:nth-of-type(2) {
        }
    }

    .lab_span2 {
        display: inline-block;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }

    .risk_span {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        margin-right: 28px;
        > img {
            width: 14px;
            height: 14px;
            margin-right: 8px;
            position: relative;
            top: 2px;
        }
    }

    .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;

        .header {
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 100;
            display: flex;
            justify-content: flex-start;

            .header_l {
                width: 182px;
                height: 44px;
                margin: 10px 0 0 40px;
            }
            .header_c {
                width: 1180px;
                height: 152px;
                margin-left: 136px;
                background: url("~@/assets/image/index_icon2.png") no-repeat;
                background-size: 100% 100%;
                font-size: 30px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 30px;
                text-align: center;
                padding-top: 26px;
            }
            .header_r {
                margin-left: 264px;
                width: 82px;
                height: 32px;
                margin-top: 18px;
            }
        }
        .main_t {
            /*background: rgba(9, 55, 81, 0.6px;*/
            width: 1852px;
            /* height: 352px;*/
            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_t_b{
               width: 1852px;
               height: 302px;
             }*/
        }
        .main_b {
            background: rgba(9, 55, 81, 0.6);
            padding: 0 32px;
            width: 1852px;
            height: 862px;
            position: absolute;
            left: 34px;
            top: 168px;
            z-index: 200;
        }
    }
</style>
<style lang="scss">
    li {
        list-style: none
    }

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

    body {
        margin: 0
    }
</style>
