<template>
  <div class="my-empty">
    <img :src="img" />
    <p v-if="!hiddenText">— {{ text }} —</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import defaultImg from '@/assets/images/no-data.png'

export default defineComponent({
  name: 'MyEmpty',
  displayName: 'm-empty',
  props: {
    /** 展示信息 */
    text: {
      type: String as PropType<string>,
      default: '暂无数据',
    },
    img: {
      type: String as PropType<string>,
      default: () => defaultImg,
    },
    hiddenText: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
  },
})
</script>

<style lang="stylus" scoped>
@import '../main.styl'
.my-empty
  $center()
  $full()
  flex-direction column
  color #ccc
  font-weight bold
  >img
    width .4rem
    height @width
</style>
