<template>
	<div class="debug">
		<div class="why" @click="whyhide()" v-show="dian<5">页面不存在（404）</div>
		<div class="debug-box">
			调试状态：<span :class="{red:debug,green:!debug}">{{debug?"开":"关"}}</span>
		</div>
		<button @click="openDebug()" class="openbtn">手动打开</button>
		<button @click="clearDebug()" class="clearbtn">手动关闭</button>
	</div>
</template>

<script>

export default {
	name: 'debug',
	data() {
		return {
			debug:"",
			dian:0
		}
	},
	methods: {
		openDebug(){
			localStorage.setItem("debug",1);
			this.debug = true;
		},
		clearDebug(){
			localStorage.removeItem("debug");
			this.debug = false;
		},
		whyhide(){
			this.dian++
		}
	},
	mounted () {
		let debug = localStorage.getItem("debug");
		if(debug){
			this.debug = false;
			localStorage.removeItem("debug");
		}else{
			this.debug = true;
			localStorage.setItem("debug",1);
		}
	}
}
</script>

<style scoped>
.debug-box{
	margin-bottom: 2rem;
	color: #666;
}
.debug{
	position: relative;
	padding-top: 10rem;
	font-size: 1.5rem;
	text-align: center;
}
.why{
	position: absolute;
	padding-top: 200px;
	width: 100%;
	height: 100vh;
	top:0;
	left: 0;
	z-index: 1000;
	background: #fff;
	color: #999;
	font-size: 1rem;
}
.red{
	color: rgb(165, 46, 46);
}
.green{
	color: rgb(46, 165, 86);
}
.debug button{
	width: 7rem;
	height: 2.5rem;
	background: transparent;
	
	border-radius: 10px;
	font-size: 1.1rem;
	outline: none;
}
.openbtn{
	color: rgb(165, 46, 46);
	border: 1px solid rgb(165, 46, 46);
}
.clearbtn{
	color: rgb(46, 165, 86);
	border: 1px solid rgb(46, 165, 86);
}
</style>
