<template>
  <view class="ml-not-data">
    <slot>
      <view v-if="emptyImgUrl || $slots.icon" class="ml-not-data-image">
        <slot name="icon">
          <image class="ml-not-data-image-icon" :src="emptyImgUrl" mode="aspectFit"></image>
        </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">
          <view>{{ translate(emptyHint) }}</view>
        </slot>
      </view>
      <view class="ml-not-data-contnet">
        <slot name="content"></slot>
      </view>
    </slot>
  </view>
</template>

<script>
import globalStore from '../../../config/store'
import MaliI18n from '../../../i18n/i18n'

export default {
  name: 'MlNotData',
  props: {
    emptyUrl: String,
    emptyText: String,
    emptyHint: String
  },
  computed: {
    emptyImgUrl () {
      return this.emptyUrl || globalStore.notData.emptyUrl
    },
    emptyContentText () {
      return MaliI18n.t(this.emptyText || globalStore.notData.emptyText)
    }
  },
  methods: {
    translate: MaliI18n.t
  }
}
</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>
