<template>
  <div class="flex justify-center items-center w-full h-full">
    <a-empty
      v-if="mode === 'normal'"
      :image="emptyImg"
      :image-style="{ display: 'flex', 'justify-content': 'center' }"
      :description="$t('NO_DATA')"
    />
    <a-empty
      v-else
      class="board_empty"
      :image="emptyImgBoard"
      :image-style="{
        width: '60px',
        height: '60px',
        color: '#fff',
        margin: '0 auto 10px auto',
      }"
      :description="$t('NO_DATA')"
    />
  </div>
</template>

<script>
import { Empty } from "ant-design-vue";

export default {
  name: "NoData",
  props: {
    mode: {
      type: String,
      default: "normal",
    },
  },
  data() {
    return {
      emptyImg: Empty.PRESENTED_IMAGE_SIMPLE,
      // eslint-disable-next-line global-require
      emptyImgBoard: require("@/assets/img/empty.png"),
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.board_empty {
  color: #fff;
}
</style>
