<template>
    <div>
        <p>视频监控页面</p>
        <p>Remaining time: {{ remainingTime }}</p>
        <el-button @click="toggleCountdown">{{ isrRuning ? '暂停' : '开始' }}</el-button>
    </div>
</template>
<style lang="less">
p {
    font-size: 20px;
    color: @color-white;
}
</style>
<script>
export default {
    data() {
        return {
            totalTime: 15,
            remainingTime: 15,
            isrRuning: false,
            timer: null
        };
    },
    methods: {
        startCountdown() {
            console.log('开始倒计时');
            this.timer = setInterval(() => {
                if (this.remainingTime <= 0) {
                    clearInterval(this.timer);
                    this.remainingTime = this.totalTime;
                    this.startCountdown();
                } else {
                    this.remainingTime--;
                }
            }, 1000);
        },
        pauseCountdown() {
            console.log('暂停倒计时');
            clearInterval(this.timer);
        },
        toggleCountdown() {
            if (this.isrRuning) {
                this.pauseCountdown();
            } else {
                this.startCountdown();
            }
            this.isrRuning = !this.isrRuning;
        }
    }
};
</script>
