<template>
  <view class="ml-not-data">
    <slot>
      <view v-if="emptyImgUrl || $slots.icon" class="ml-not-data-image">
        <slot name="icon">
          <img class="ml-not-data-image-icon" :src="emptyImgUrl" mode="aspectFit">
        </slot>
      </view>
      <view v-if="emptyContentText || $slots.text" class="ml-not-data-text">
        <slot name="text">
          <text>{{ emptyContentText }}</text>
        </slot>
      </view>
      <view v-if="emptyHint || $slots.hint" class="ml-not-data-hint">
        <slot name="hint">
          <text>{{ emptyHint }}</text>
        </slot>
      </view>
      <view class="ml-not-data-contnet">
        <slot name="content"></slot>
      </view>
    </slot>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import globalStore from '../../../config/store'

export default defineComponent({
  name: 'MlNotData',
  props: {
    emptyUrl: String,
    emptyText: String,
    emptyHint: String
  },
  computed: {
    emptyImgUrl () {
      return this.emptyUrl || globalStore.notData?.emptyUrl
    },
    emptyContentText () {
      return this.emptyText || globalStore.notData?.emptyText
    }
  }
})
</script>

<style lang="scss">
.ml-not-data {
  text-align: center;
  padding-top: 5vh;
  .ml-not-data-image-icon {
    width: 400rpx;
  }
  .ml-not-data-text {
    font-size: 32rpx;
    font-weight: 700;
  }
  .ml-not-data-hint {
    font-size: 26rpx;
    padding: 0 60rpx;
    line-height: 40rpx;
    color: rgba(0, 0, 0, 0.45);
  }
  .ml-not-data-text,
  .ml-not-data-hint {
    margin-bottom: 20rpx;
  }
}
</style>
