<template>
    <div id="app">
        <router-view :key="key"/>
        <emergency-modal v-model="alarmShow" title="摄像头报警" width="988px" @close="cancel">
        </emergency-modal>
    </div>
</template>

<script>
import EmergencyModal from '@/views/common-components/emergency-modal.vue'
import alarmDia from '@/views/screen/components/alarm/alarm-dig.vue'

export default {
    name: "App",
    components: {EmergencyModal, alarmDia},
    data() {
        return {
            alarmShow: false,
        }
    },
    mounted() {
        this.openSocket();
    },
    computed: {
        key() {
            return this.$route.name !== undefined
                ? this.$route.name + new Date()
                : this.$route + new Date();
        },
    },
    methods: {
        openSocket () {
            console.log("app--------------------")
            let saToken = window.$localStorage.getItem("saToken");
            if (saToken && window.gconfig.openSocket) {
                console.log("socket开始连接");
                let areaCode = window.$localStorage.getItem("areaCode");
                let userId = window.$localStorage.getItem("adminId");
                this.$socket.io.opts.query = "areacode=" + areaCode + "&userid=" + userId;
                this.$socket.open();
            }
        },
        cancel() {
            this.alarmShow = false;
        }
    },
};
</script>

<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    width: 100%;
    height: 100%;
}

.viewer-backdrop {
    background: rgba(0, 0, 0, 0.9) !important; /**图片预览遮罩层 */
}
</style>
