<template>
    <div class="device-info flex-col-center">
        <div class="info-id">{{ deviceId }}</div>
        <div class="info-error">{{ errorMessage }}</div>
        <div class="info-message">{{ message }}</div>
    </div>
</template>

<script>
export default {
    name: 'SysTv',
    data() {
        return {
            deviceId: '',
            message: '',
            errorMessage: '',
            timerId: null,
            count: 0
        }
    },
    mounted() {
        this.initBoard();
    },
    beforeDestroy() {
        if (this.timerId !== null) {
            clearInterval(this.timerId);
            this.timerId = null;
        }
    },
    methods: {
        initBoard() {
            var deviceId = localStorage.getItem("deviceId");
            if (deviceId == null || deviceId == "") {
                deviceId = "TV" + Math.floor(Math.random() * 10000000000);
                localStorage.setItem("deviceId", deviceId);
            }
            deviceId = localStorage.getItem("deviceId");
            this.deviceId = deviceId;
            this.$request({
                url: '/apm/boardDevice/getTSysBoardDeviceByCode',
                method: 'post',
                data: {
                    code: deviceId
                }
            }).then(response => {
                let res = response.data;
                if (res.code == null) {
                    this.errorMessage = res.msg;
                    this.redoCount();
                    return;
                }
                let token = res.token;
                let scale = res.scale == null || res.scale == '' ? 1 : res.scale;
                if (token == null || token == "") {
                    window.location.href = location.origin + "/#/board?code=" + res.code + "&scale=" + scale;
                } else {
                    window.location.href = location.origin + "/#/oauth2?token=" + token + "&url=board%3Fcode%3D" + res.code + "%26scale%3D" + scale;
                }
            }).catch((err) => {
                this.errorMessage = err;
                this.redoCount();
            })
        },
        redoCount() {
            // 60秒刷新一次
            this.count = 60;
            this.startTimer();
        },
        startTimer() {
            if (this.timerId !== null) {
                clearInterval(this.timerId);
                this.timerId = null;
            }
            this.timerId = setInterval(() => {
                this.message = this.count + "秒后刷新页面...";
                this.count--;
                if (this.count == 0) {
                    this.initBoard();
                }
            }, 1000);
        }
    }
}
</script>

<style scoped>
.device-info {
    height: 100%;
}

.info-id {
    font-size: 80px;
    color: red;
    font-weight: bold;
    word-break: break-all;
}

.info-error {
    margin-top: 10px;
    font-size: 30px;
    color: red;
    font-weight: bold;
    word-break: break-all;
}

.info-message {
    margin-top: 10px;
    font-size: 30px;
    color: #1890FF;
    font-weight: bold;
    word-break: break-all;
}
</style>
