<template>
	<!-- 该页面自动判断有无网络的显示内容 -->
	<view class='main'>
		<u-no-network image="/static/no-network.png" @disconnected="disconnected" @connected="connected" @retry="retry"></u-no-network>

		<view class="u-content">
			<view class="u-content__circle">
				<u-icon name="checkmark" color="#fff" size="30"></u-icon>
			</view>
			<text class="u-content__normal">网络正常</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 0
			};
		},
		methods: {
			// "重试"后，无网络触发
			disconnected() {
				// console.log('disconnected');
			},
			// "重试"后，有网络触发
			connected() {
				// console.log('connected');
			},
			// 点击页面的"重试"按钮时触发
			retry() {
				this.number += 1;
				uni.getNetworkType({
				    success: (res)=> {
				        if (res.networkType == 'none') {
				        	if (this.number == 5) {
				        		uni.showModal({
				        		    title: '提示',
				        		    content: '哎呀，刷新了好多次还是没有网络，是否要直接进入系统',
				        		    success: (res)=> {
				        		        if (res.confirm) {
				        		            this.$wskj.switchTab('/pages/home');
				        		        } else if (res.cancel) {
				        		            this.number = 0;
				        		        }
				        		    }
				        		});
				        	}else{
								this.$u.toast('正在检测网络，请稍等');
							}
				        }else{
							this.$wskj.switchTab('/pages/home');
						}
				    }
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.u-content {
		padding: 150px 60px 0;
		@include flex(column);
		align-items: center;
		justify-content: center;

		&__circle {
			background-color: $u-success;
			@include flex;
			border-radius: 100px;
			width: 60px;
			height: 60px;
			align-items: center;
			justify-content: center;
		}

		&__normal {
			font-size: 15px;
			color: $u-success;
			margin-top: 15px;
		}
	}
</style>