<template>
  <div class="network-container" :class="{'show': show}">
    <div class="network-wrapper">
      <span class="network-text">网络状况不佳，请刷新重试</span>
      <van-button custom-class="network-button" round type="info" @tap="setIsConnected">刷新</van-button>
    </div>	
  </div>
</template>
<script>
  import wepy from '@wepy/core';
  import { mapActions } from '@wepy/x';
  import store from '../../store';

  wepy.component({
    data: {
      show: false
    },
    store,
    methods: {
      ...mapActions(['setIsConnected'])
    },
    created() {
      this.show = true;
    }
  });
</script>
<style lang="less">
  .network-container {
  	position: fixed;
  	width: 100%;
  	height: 100%;
  	background: #000;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	z-index: -1;
  	.network-wrapper {
      display: flex;
      justify-content: center;
  	  align-items: center;
  	  flex-direction: column;
  	  .network-text {
  	  	color: #AAA;
  	  	font-size: 24rpx;
  	  }
  	  .network-button {
  	  	margin-top: 20rpx;
  	  	width: 180rpx;
  	  	font-size: 24rpx;
    		height: 56rpx;
    		line-height: 56rpx;
    		background: #FF6600;
        border-color: #FF6600;
  	  }
  	}
  }
  .show {
    z-index: 10;
  }
</style>
<config>
{
    usingComponents: {
      'van-button': '~@/components/vant/button/index'
    }
}
</config>
