<template>
  <div class="y-empty">
    <div class="y-empty__image" :style="imageStyle">
      <img v-if="image" :src="image" ondragstart="return false">
      <slot v-else name="image">
        <img-empty />
      </slot>
    </div>
    <div class="y-empty__description" :style="descriptionStyle">
      <slot v-if="$slots.description" name="description"></slot>
      <p v-else>{{ emptyDescription }}</p>
    </div>
    <div v-if="$slots.default" class="y-empty__bottom">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ImgEmpty from './img-empty.vue';
import { t } from 'yun-ui-pc/src/locale';

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