<template>
  <cr-overlay custom-class="net-error-mask" :show="showError">
    <svg-icon icon-class="ufo" />
    <p class="net-error-title">网络异常</p>
    <cr-button type="danger" size="large" @click="refresh">刷新试试</cr-button>
  </cr-overlay>
</template>

<script>
export default {
  name: 'NetError',
  data() {
    return {
      showError: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    refresh() {
      window.location.reload();
    },
    init() {
      window.addEventListener(
        'online',
        () => {
          this.showError = false;
        },
        true
      );
      window.addEventListener(
        'offline',
        () => {
          this.showError = true;
        },
        true
      );
    }
  }
};
</script>

<style lang="less" scoped>
@import '../style/var.less';
.net-error {
  &-mask {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 101;
    background-color: #fff;
    .svg-icon {
      width: 180px;
      height: 180px;
      margin-top: -120px;
    }
    .cr-button {
      margin-top: 32px;
      width: 200px;
      border-radius: 6px;
    }
  }
  &-title {
    color: @gray-3;
    .text-16;
  }
}
</style>
