<template>
  <cr-overlay custom-class="net-error-mask" :show="showError">
    <svg-icon icon-class="ufo" />
    <p class="net-error-title">网络异常</p>
    <cr-button type="warning" 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";
@import "../style/mixins.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;
    }
  }
  &-title {
    .sub-text-mixins();
    font-size: 16px;
    line-height: 24px;
  }
}
</style>
