<template>
    <div class="base_hint animated">
        <div class="base_top">
            <span>实时报警</span>
        
            <div class="select_btn">
                <span @click="selectBtn(index)" v-for="(item, index) in dataSelect" :key="index" :class="{'active' : item.is}">{{ item.name }}</span>
            </div>
        </div>

        <div class="base_bottom">

            <el-table :data="dataList" height="29vh" style="width: 100%">
                <el-table-column prop="company" label="企业名称" width="120"></el-table-column>
                <el-table-column prop="level" label="预警级别" width="100"> </el-table-column>
                <el-table-column prop="msg" label="预警信息"> </el-table-column>
                <el-table-column prop="alarmTime" label="预警时间"> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <span class="one" @click="onAlert(scope.row.company)">查看</span>
                        <span class="two" @click="onClickBtn(scope.row.alarmTime, scope.row.company, scope.row.msg, scope.row.level + '级')">发送预警</span>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                <span>这是一段信息</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>

            <!-- <div class="bottom_line" v-for="(item, index) in dataList" :key="index">
                <div class="bottom_line_top">
                    <span class="stylediv"></span>
                    <span class="style_text">{{ item.alarmTime }}</span>
                </div>
                <div class="bottom_line_bottom">
                    <span class="stylediv" style="visibility: hidden"></span>
                    <span>{{ item.company }}发生 <span>{{ item.level }}级报警</span>,请及时
                        <a href="javascript:void(0)" @click="onClickLook(6, 'yj', item.company)">查看</a>
                        &nbsp; &nbsp;
                        <a href="javascript:void(0)" style="color: #e6a23c" @click="onClickBtn(item.alarmTime, item.company, item.msg, item.level + '级')">发送预警</a>
                    </span>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
import eventBus from "@/utils/eventbus";
import { randNum, timeParse } from "@/utils";
import { sendAlarmSms, wkkAlarmMsg, roster } from "@/api";

export default {
    data() {
        return {
            dataList: [],

            dataSelect: [
                {
                    name: '24小时',
                    is: false,
                },

                {
                    name: '7日内',
                    is: false,
                },


                {
                    name: '一月内',
                    is: true,
                },
            ],

            dialogVisible: false,

        };
    },

    mounted() {
        let dateCur = Date.parse(new Date()) //当前时间
        let start = timeParse(dateCur - (30 * 24 * 60 * 60 * 1000)) // 24小时
        this.onwkkAlarmMsg(start)
    },

    methods: {

        onAlert(name) {

            roster({
                name,
            }).then(res => {

                this.$confirm(res[0].tel, '值班人员联系方式', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info ',
                    center: true
                }).then(() => {

                }).catch(() => {

                });
            })


        },

        onwkkAlarmMsg(start) {
            wkkAlarmMsg({
                page: 0,
                size: 1000,
                sort: 'id,desc',
                start,
                end: timeParse(),
            }).then(res => {

                this.dataList = res.content.map(item => {
                    // 操作时间
                    let index1 = item.alarmTime.indexOf("T");
                    let str1 = item.alarmTime.substr(0, index1);
                    let str2 = " " + item.alarmTime.slice(index1 + 1, -3);
                    item.alarmTime = str1.concat(str2);
                    return item
                })
            })
        },

        onClickLook(index, params, name) {
            const para = {
                index,
                activeName: params,
                dataObj: {
                    name,
                },
            };
            eventBus.$emit("dialog_show", para);
        },

        onClickBtn(time, name, text, level) {
            const obj = {
                time,
                wkkName: name,
                msg: text,
                l: level,
            };

            sendAlarmSms(obj).then((res) => {
                this.$message({
                    message: `成功向${name}负责人发送短信`,
                    type: "success",
                });
            });
        },

        // 切换选择项
        selectBtn(index) {
            for (let i of this.dataSelect) {
                i.is = false
            }
            this.dataSelect[index].is = true

            let dateCur = Date.parse(new Date()) //当前时间

            if (this.dataSelect[index].name == '24小时') {
                let start = timeParse(dateCur - (24 * 60 * 60 * 1000)) // 24小时
                this.onwkkAlarmMsg(start)
            }

            if (this.dataSelect[index].name == '7日内') {
                let start = timeParse(dateCur - (7 * 24 * 60 * 60 * 1000)) // 7日内
                this.onwkkAlarmMsg(start)
            }

            if (this.dataSelect[index].name == '一月内') {
                let start = timeParse(dateCur - (30 * 24 * 60 * 60 * 1000)) // 一月内
                this.onwkkAlarmMsg(start)
            }
        },
    },
};
</script>

<style lang="scss">
@import '@/assets/scss/var.scss';

$color: #00e0ff;
.base_hint {
    padding-top: 1vh;
    position: fixed;
    top: 4vw;
    z-index: 99;
    right: 12.5%;
    width: 40vw;
    color: $color;
    height: 37vh;
    background-image: url('~@/assets/images/hint.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .one {
        color: #1b77b5;
    }

    .two {
        margin-left: 10px;
        color: RGBA(184, 67, 123, 1);
    }

    .base_top {
        position: relative;
        padding: 0 0.5vw;
        display: flex;
        align-items: center;
        font-size: 2vh;
        justify-content: space-between;
        height: 10%;
        padding-left: 1vw;
        padding-bottom: 1vh;

        .select_btn {
            display: flex;
            position: absolute;
            top: 1.6vh;
            right: 2vw;
            font-size: 1vh;
            span {
                margin: 0 5px;
                padding: 3px 15px;
                border: 1px solid #02d9fd;
                border-radius: 2px;
                cursor: pointer;
            }

            .active {
                background-color: #02d9fd4d;
            }
        }
    }

    .base_bottom {
        font-size: 0.7vw;
        overflow-y: auto;
        @include scrollbar;

        .bottom_line {
            padding-bottom: 0.8vh;

            .bottom_line_top {
                padding-bottom: 0.5vh;
            }

            .stylediv {
                display: inline-block;
                width: 0.4vw;
                height: 0.4vw;
                margin-right: 0.5vw;
                border-radius: 50%;
                background: $color;
            }

            a {
                color: $color;
            }
        }
    }

    .btn {
        margin-top: 1vh;
    }

    .el-table--scrollable-y,
    .el-table--scrollable-x,
    .el-table__body-wrapper {
        @include scrollbar;
    }

    .el-table {
        background: transparent;
        padding: 0 0.8vw;
    }

    .el-table .cell {
        background-color: #003046;
    }

    .el-table th > .cell {
        background-color: transparent;
    }

    .el-table td,
    .el-table th,
    .el-table th,
    .el-table tr {
        background: transparent !important;
        color: #02d9fd;
        font-size: 0.7vw;
    }

    .el-table td {
        border: none !important;
        background: #003046 !important;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        background-color: transparent;
    }

    .el-table__body-wrapper {
        overflow-y: auto;
    }
}
</style>