<template>
  <div style="position:relative;" :is="tag" v-if="successCode.indexOf(code-0)!==-1||code==-1"
    v-loading="animation?code==-1?true:false:false">
    <slot></slot>
  </div>
  <div :is="tag" v-else :class="`${position} model-loading`" style="background-color:#fff;">
    <div class="layout-td">
      <h2 style="font-size:16px;margin-bottom:.6em"><span>错误({{code}})</span></h2>
      <p>{{errorMessage}},
        <span class="cursor" style="color:#6896ff" @click="reload">刷新页面</span>，
        或者<span class="cursor" style="color:#6896ff" @click="$emit('reloading')">重新加载</span>
      </p>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      position: {
        type: String,
        default: ''
      },
      tag: {
        type: String,
        default: 'div'
      },
      code: {
        type: [String, Number],
        default: -1
      },
      successCode: {
        type: Array,
        default: function () {
          return [200, 10000, 304]
        }
      },
      message: {
        type: String,
        default: '服务器繁忙'
      },
      animation:{
        type:Boolean,
        default:true
      }
    },
    computed: {
      errorMessage: function () {
        return navigator.onLine ? '服务器繁忙' : '网络错误'
      }
    },
    data: function () {
      return {
        product: process.env.NODE_ENV === 'production'
      }
    },
    methods: {
      reload: function () {
        location.reload();
      }
    }
  }

</script>
<style scoped>
  .model-loading {
    position: relative;
    flex-wrap: wrap;
    margin: 15px auto;
    padding: 15px;
    min-height: 50px;
    color: #999;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
  }

  .model-loading.middle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>
