<template>
    <div id="index" ref="appRef" :class="{ pageisScale: true }" class="index_home"
        style="   background-image:url('../../assets/bigScreen/img/bg.png');">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <!-- 头部 s -->
                <div class="d-flex jc-center title_wrap">
                    <div class="zuojuxing"></div>
                    <div class="youjuxing"></div>
                    <div class="guang"></div>
                    <div class="d-flex jc-center">
                        <div class="title">
                            <span class="title-text">
                                {{ gongsi }}云平台</span>
                            <div style="float: right">
                                <div style="position: relative; color: #fff; display: flex; align-items: center;">
                                    <el-badge style="height: 40px; width: 40px;" :value='unreadCount'>
                                        <img @click="toggleTooltip" src="../../assets/bigScreen/img/通知.png" alt="用户"
                                            class="user-icon" />
                                    </el-badge>
                                    <div v-if="showTooltip" class="tooltip" @click.stop>
                                        <div class="gjcontainer">
                                            <div class="gjitem">
                                                <h2
                                                    style="color:#00FF6F;font-weight: 700;font-size: 28px;padding-top:15px ">
                                                    {{ alarmCountData[0].count }}</h2>
                                                <span>{{ alarmCountData[0].name }}</span>
                                            </div>
                                            <div class="gjitem">
                                                <h2
                                                    style="color:#FFCB2F;font-weight: 700;font-size: 28px;padding-top:15px ">
                                                    {{ alarmCountData[1].count }}</h2>
                                                <span>{{ alarmCountData[1].name }}</span>
                                            </div>
                                            <div class="gjitem">
                                                <h2 style="color:#FF504D;font-weight: 700;font-size: 28px;">{{
                                                    alarmCountData[2].count }}</h2>
                                                <span>{{ alarmCountData[2].name }}</span>
                                            </div>
                                        </div>
                                        <button
                                            style="width: 159px;height: 39px;background-color: #0076B0;color: #fff;border: none;"
                                            v-if="userRole === 'admin'" @click="handleButtonClick">告警详情</button>
                                    </div>
                                    <div style="float: right; margin-left: 10px; display: flex; align-items: center;">
                                        <img src="../../assets/bigScreen/img/头像@2x.png" alt="设置"
                                            style="width: 20px; height: 20px; margin-right: 5px;" class="setting-icon">
                                        <span>{{ userName }}</span>
                                        <!-- <el-dropdown>
                                            <span class="el-dropdown-link">
                                                <img src="../../assets/bigScreen/img/arrow-down-s-fill@2x.png" alt="设置"
                                                    style="width: 20px; height: 20px; margin-right: 5px;vertical-align: middle;">
                                            </span>
                                            <el-dropdown-menu
                                                style="background-color: #113160; color: #fff; border-color: #113160"
                                                slot="dropdown">
                                                <router-link to="/index">
                                                    <el-dropdown-item
                                                        style="background-color: #113160; color: #fff; border-color: #113160">
                                                        返回后台
                                                    </el-dropdown-item>
                                                </router-link>
                                                <el-dropdown-item @click.native="logout"
                                                    style="background-color: #113160; color: #fff">
                                                    退出系统
                                                </el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown> -->
                                    </div>
                                    <div style="float: right; margin-left: 10px; display: flex; align-items: center;">
                                        <el-link type="primary" href="/index">返回后台</el-link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="timers">
                        {{ dateYear }} {{ dateWeek }} {{ dateDay }}
                        <i class=" blq-icon-shezhi02" style="margin-left:10px" @click="showSetting"></i>
                    </div>
                </div>
                <!-- 头部 e-->
                <!-- 内容  s-->
                <index></index>
                <!-- 内容 e -->
            </div>
        </div>
        <Setting ref="setting" />
    </div>
</template>

<script>
import drawMixin from '../../utils/bigScreen/drawMixin';
import {
    formatTime,
} from '../../utils/bigScreen/index.js';
import Setting from './setting.vue';
import index from './indexs/index.vue';
import { listAlertLog, listAlertLogEchartsByType } from '../../api/iot/alertLog';

export default {
    mixins: [drawMixin],
    components: {
        Setting,
        index,
    },
    data() {
        return {
            datalist: [],
            alarmCountData: [
                { name: '提醒', count: 0 },
                { name: '轻微', count: 0 },
                { name: '严重', count: 0 },
            ],
            showTooltip: false, // 控制弹出框显示状态
            userRole: '',
            userName: '',
            unreadCount: 0,
            gongsi: '物联网',
            timing: null,
            loading: true,
            dateDay: null,
            dateYear: null,
            dateWeek: null,
            queryParams: {
                deviceName: undefined,
                type: undefined,
                id: undefined,
                typeName: undefined,
                deviceNum: undefined,
                status: undefined,
                pageNum: 1,
                pageSize: 999999, // 全部查上来
                showChild: true
            },
            weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    computed: {},
    created() {
        let data = {
            StartDate: '',
            endDate: '',
        };
        data.StartDate = new Date().toISOString().split('T')[0];

        data.endDate = data.StartDate; // 如果需要，可以设置相同的结束日期
        listAlertLogEchartsByType(data).then(rp => {
            this.switper();
        });

        // 获取告警列表
        listAlertLog(this.queryParams).then((rp) => {
            this.alarmList = rp.rows;
            this.alarmList.forEach((item) => {
                if (item.status === 2) {
                    this.unreadCount += 1;
                    if (item.alertLevel === 1) {
                        this.alarmCountData[0].count += 1;
                    } else if (item.alertLevel === 2) {
                        this.alarmCountData[1].count += 1;
                    } else if (item.alertLevel === 3) {
                        this.alarmCountData[2].count += 1;
                    } else {
                        this.unreadCount -= 1;
                    }
                }
            });
        });
    },
    mounted() {

        this.timeFn();
        this.cancelLoading();
        document.addEventListener('click', this.handleClickOutside); // 添加全局点击事件监听
    },
    beforeDestroy() {
        document.removeEventListener('click', this.handleClickOutside); // 移除事件监听
    },
    methods: {
        toggleTooltip() {
            this.showTooltip = !this.showTooltip; // 切换弹出框显示状态
        },
        handleClickOutside(event) {
            const tooltipElement = this.$el.querySelector('.tooltip');
            const badgeElement = this.$el.querySelector('.user-icon');
            if (tooltipElement && !tooltipElement.contains(event.target) && !badgeElement.contains(event.target)) {
                this.showTooltip = false; // 点击其他地方，关闭弹出框
            }
        },
        handleButtonClick() {
            this.$router.push({
                path: '/Ping/bigScreen/ssjc',
            });
        },
        async logout() {
            this.$confirm(this.$t('login.989807-31'), this.$t('login.989807-32'), {
                confirmButtonText: this.$t('confirm'),
                cancelButtonText: this.$t('cancel'),
                type: 'warning',
            })
                .then(() => {
                    this.$store.dispatch('LogOut').then(() => {
                        location.href = '/index';
                    });
                })
                .catch(() => {
                });
        },
        showSetting() {
            this.$refs.setting.init();
        },
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = formatTime(new Date(), 'HH: mm: ss');
                this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                this.dateWeek = this.weekday[new Date().getDay()];
            }, 1000);
        },
        cancelLoading() {
            setTimeout(() => {
                this.loading = false;
            }, 500);
        },
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getMqttStats();
            };
            this.timer = setInterval(looper, 60000);
        },
    },
};
</script>

<style lang="scss">
@import "./home.scss";
@import '../../assets/bigScreen/css/theme/index.css';
@import "../../assets/bigScreen/css/index.scss";

.user-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;

}

.el-badge__content.is-fixed {
    top: 10px !important;
    right: 20px !important;
}

.notification-badge {
    height: 15px;
    width: 15px;
    position: absolute;
    top: 10px;
    right: 110px;
    bgcolor: red;
    background: red;
    color: white;
    border-radius: 50%;
    font-size: 7px;
}

.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* 背景颜色 */
    z-index: 9;
    /* 确保在弹窗下方 */
}

.dropdown-menu {
    position: absolute;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 10;
    /* 确保弹窗在其他元素之上 */
    width: 297px;
    height: 272px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #113160;
    box-shadow: 0 4px 39.1px 0 #00000040;
    top: 40px;
    right: 10px;
}

.popper__arrow::after {

    border-top-color: #113160 !important;
    border-bottom-color: #113160 !important;
}

.el-badge__content {
    background-color: red;
    border: none;
}


.tooltip {
    height: 250px;
    width: 270px;
    position: absolute;
    /* 绝对定位 */
    top: 50px;
    /* 调整弹出框的垂直位置，需根据实际情况调整 */
    right: 10px;
    /* 左对齐 */
    background-color: #113160;
    /* 背景颜色 */
    color: white;
    /* 字体颜色 */
    padding: 5px;
    /* 内边距 */
    border-radius: 5px;
    /* 圆角 */
    z-index: 1;
    /* 确保弹出框在其他元素之上 */
}

.gjcontainer {
    //height: 120px;
    display: grid;
    /* 启用 Grid 布局 */
    grid-template-columns: repeat(2, 1fr);
    /* 两列 */
    gap: 0px;
    /* 列间距 */
}

.gjitem {

    //margin: 10px;
    text-align: center;
    /* 内容居中显示 */
}
</style>
