<template>
  <cr-overlay custom-class="net-error-mask" :show="showError">
    <!-- https://img.lkbang.net/ufo.svg -->
    <cr-image
      src="https://img.lkbang.net/ufo.1758f833.png"
      width="160px"
      height="160px"
      class="ufo-icon"
    />
    <p class="net-error-title">网络竟然崩溃了，试试看刷新页面~</p>
    <cr-button type="default" hairline shape="circle" @click="refresh">
      刷新
    </cr-button>
    <!-- <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>
.net-error {
  &-mask {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 101;
    background-color: @gray-1;
    .ufo-icon {
      margin-top: -120px;
    }
    .cr-button {
      color: @black;
      margin-top: 13px;
      width: 132px;
      // border-radius: 6px;
    }
  }
  &-title {
    color: @black;
    .text-size(14);
    margin-top: 14px;
  }
}
</style>
