<template>
  <div>
    <a-card :body-style="{ margin: 0, padding: 0 }" :bordered="false">
      <a-skeleton v-show="loadState === 'loading'" active style="padding: 16px"/>
      <a-empty v-show="loadState === 'empty'">
        <a-button type="dashed" @click="retry">
          重新加载
        </a-button>
      </a-empty>
      <a-card
        v-show="loadState === 'error'"
        :body-style="{ margin: '0 auto' }"
        :bordered="false"
        :hoverable="true"
        class="retryCard"
        @click="retry" >
        <a-icon :style="{ fontSize: '28px' }" type="global"/>
        <p class="noSelect" style="margin-top: 20px">网络好像开小差了，点击重新加载...</p>
      </a-card>
      <div v-show="loadState === 'success'">
        <slot></slot>
      </div>
    </a-card>
  </div>
</template>

<script>

export default {
  name: 'XCard',
  props: {
    loadState: {
      type: String,
      default: 'success'
    },
    retry: {
      type: Function,
      default: () => {
        console.error('未实现重新加载')
      }
    }
  },
  data () {
    return {

    }
  }
}
</script>

<style scoped>
.retryCard {
  text-align: center;
}
.noSelect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Chrome/Safari/Opera */
  -khtml-user-select: none; /* Konqueror */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
  not supported by any browser */
}
</style>
