<!--
 * @Description: 
 * @Autor: Heloise
 * @Date: 2022-06-15 15:28:40
 * @LastEditors: Heloise
 * @LastEditTime: 2022-11-03 16:02:25
-->
<template>
  <div class="el-empty">
    <div class="el-empty__image" :style="imageStyle">
      <img v-if="image" :src="image" ondragstart="return false">
      <slot v-else name="image">
        <!-- <img class="el-empty__image-img" v-if="type === 'imgWhaleEmpty'" src="examples/assets/images/whale-empty.png" ondragstart="return false">
        <img class="el-empty__image-img" v-else-if="type === 'imgWhaleSearchEmpty'" src="examples/assets/images/whale-search-empty.png" ondragstart="return false"> -->
        <!-- <component v-else :is="type" /> -->
        <component :is="type" />
      </slot>
    </div>
    <div class="el-empty__description">
      <slot v-if="$slots.description" name="description"></slot>
      <p v-else>{{ emptyDescription }}</p>
    </div>
    <div v-if="$slots.default" class="el-empty__bottom">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ImgEmpty from './img-empty.vue';
import Img404 from './img-404.vue';
import ImgNoInternet from './img-no-internet.vue';

import { t } from 'bi-element/src/locale';

export default {
  name: 'ElEmpty',
  components: {
    [ImgEmpty.name]: ImgEmpty,
    Img404,
    ImgNoInternet
  },
  props: {
    type: {
      type: String,
      default: 'imgEmpty'
    },
    image: {
      type: String,
      default: ''
    },
    imageSize: Number,
    description: {
      type: String,
      default: ''
    }
  },
  computed: {
    emptyDescription() {
      return this.description || t('el.empty.description');
    },
    imageStyle() {
      return {
        width: this.imageSize ? `${this.imageSize}px` : ''
      };
    }
  }
};
</script>
