<template>
    <div id="app" :style="appStyle">
        <div class="header">
            <img src="./assets/pc_shuju_biaoti.png" alt="" />
        </div>
        <router-view class="router" />

        <div class="menus" v-if="showMenu">
            <nav-menus></nav-menus>
        </div>
    </div>
</template>
<script>
import navMenus from './components/navMenus.vue';
export default {
    components: { navMenus },
    name: 'App',
    computed: {
        appStyle() {
            if (this.$route.name === 'home') {
                return {
                    backgroundImage: `url(${require('./assets/pc_shuju_bg.jpg')})`,
                };
            } else {
                return {};
            }
        },
        showMenu() {
            if (this.$route.name === 'chartScreen') {
                return false;
            } else {
                return true;
            }
        },
    },
    data() {
        return {
            num: 1,
            hideNum: 10,
        };
    },
    mounted() {
        this.$http
            .get('/sysConfig/get/BIG_SHOW')
            .then((res) => {
                if (Number(res.value)) {
                    return Promise.all([
                        this.$http.get('/sysConfig/get/NOTIFY_NUM'),
                        this.$http.get('/sysConfig/get/NOTIFY_HIDDEN'),
                    ]);
                } else {
                    return Promise.reject('大屏不展示');
                }
            })
            .then((res) => {
                res.forEach((item) => {
                    if (item.name === 'NOTIFY_NUM') {
                        this.num = Number(item.value);
                    } else if (item.name === 'NOTIFY_HIDDEN') {
                        this.hideNum = Number(item.value);
                    }
                });

                setTimeout(() => {
                    this.getRandomThreshold();
                }, this.num);
            })
            .catch((e) => {
                console.log(e);
            });
        // this.getRandomThreshold();
    },
    methods: {
        getRandomThreshold() {
            let labels = [
                {
                    value: 'minValue',
                    name: '最小预警阀值',
                    down: true,
                },
                {
                    value: 'maxValue',
                    name: '最大预警阀值',
                },
                {
                    value: 'increaseValue',
                    name: '增长预警阀值',
                },
                {
                    value: 'decreaseValue',
                    name: '下降预警阀值',
                },
            ];
            this.$http.get('/threshold/getOneThreshold').then((res) => {
                let label = labels[Math.floor(Math.random() * 4)];
                let value = label.down
                    ? this.sum(0, res[label.value])
                    : this.sum(res[label.value] + 100, res[label.value]);
                this.$notify({
                    title: '预警消息',
                    message: `${res.category.name}的值为:${value},${label.down ? '已经低于' : '已经超过'}${
                        label.name
                    }:${res[label.value]}`,
                    duration: this.hideNum * 1000,
                });
                setTimeout(() => {
                    this.getRandomThreshold();
                }, (this.num || 1) * 1000 * this.sum(1, 9));
            });
        },
        sum(m, n) {
            return Math.floor(Math.random() * (m - n) + n);
        },
    },
};
</script>

<style lang="less">
@import url(./styles/app.less);

#app {
    background-color: @bg;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    .header {
        min-height: 116px;
        position: relative;
        img {
            height: 116px;
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
    }

    .router {
        flex-grow: 1;
    }
    .menus {
        height: 70px;
        padding-bottom: 30px;
        flex-shrink: 0;
    }
}
</style>
