<template>
  <div class="wrap">
    <div class="empty-box">
      <a-empty :image="simpleImage" v-if="hasIcon" />
      <div class="msg" v-else>{{ msg }}</div>
    </div>
  </div>
</template>
<script lang="ts">
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Empty } from 'ant-design-vue';
  const { t } = useI18n();
  const defaultMsg = t('暂无数据');
  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  export default {};
</script>
<script setup lang="ts">
  defineProps({
    msg: {
      type: String,
      default: defaultMsg,
    },
    hasIcon: {
      type: Boolean,
      default: true,
    },
  });
</script>

<style scoped>
  .wrap {
    width: 100%;
    height: 100%;
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .empty-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .empty-icon {
    font-size: 36px;
  }

  .msg {
    font-size: 14px;
    color: #9e9d9d;
    padding: 10px 40px;
  }
</style>
