<template>
  <slot v-if="dataSource.length"></slot>
  <div v-else class="un-data">
    <img :src="unDataPng" class="icon" />
    <p v-if="keyword">{{ $t('sys.undata') }}</p>
    <p>
      {{ $t('sys.undataDesc', { name: name || $t('sys.data') }) }}
    </p>
    <div class="undata">
      <slot name="undata"></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import unDataPng from '@/assets/images/un-data.png'

defineOptions({ name: 'DataList' })
defineProps<{
  dataSource: Array<any>
  name?: string
  keyword: string
}>()
</script>

<style scoped lang="scss">
.un-data {
  margin: 120px;
  text-align: center;

  .icon {
    margin-bottom: 20px;
    width: 80px;
  }

  p {
    font-size: 14px;
    font-weight: 400;
    color: #646566;
    margin-bottom: 5px;
  }

  .undata {
    margin-top: 22px;
  }
}
</style>
