<template>
  <div class="ai-empty">
    <div class="ai-empty__bg"></div>
    <template v-if="!isHasTitleSlot">暂无数据</template>
    <slot v-else></slot>
  </div>
</template>

<script>
  export default {
    name: 'AiEmpty',

    computed: {
      isHasTitleSlot () {
        return this.$slots.default
      }
    }
  }
</script>

<style lang="scss">
  .ai-empty {
    margin-bottom: 10px;
    text-align: center;
    color: #acaaad;

    .ai-empty__bg {
      background: url("../assets/images/empty.svg") no-repeat center;
      background-size: 120px 120px;
      height: 120px;
      margin: 48px auto 0;
    }
  }
</style>
