<template>
  <view class="component-empty-all-tips">
    <!-- 列表为空 -->
    <view
      v-if="isEmpty"
      class="empty"
    >
      <!-- 通用 -->
      <view
        v-if="emptyImg===1"
        class="empty-icon"
      >
        <image src="@/static/empty-img/not-found.png" />
      </view>
      <!-- 优惠券相关 -->
      <view
        v-if="emptyImg===2"
        class="empty-icon"
      >
        <image src="@/static/empty-img/coupon-empty.png" />
      </view>
      <view
        v-if="emptyImg===3"
        class="empty-icon"
      >
        <image src="@/static/empty-img/collect-empty.png" />
      </view>
      <view
        v-if="emptyImg===4"
        class="empty-icon"
      >
        <image src="@/static/empty-img/order-empty.png" />
      </view>
      <view
        v-if="emptyImg===5"
        class="empty-icon"
      >
        <image src="@/static/empty-img/cart-empty.png" />
      </view>
      <view class="empty-text">
        <slot>
          <text>{{ emptyTips || $t('noData') }}</text>
        </slot>
      </view>
    </view>
    <!-- 已加载全部数据 -->
    <view
      v-if="!isEmpty && isAll"
      class="load-all"
    >
      {{ allTips || $t('endTips') }}
    </view>
  </view>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  isEmpty: {
    type: Boolean,
    default: false
  },
  emptyTips: {
    type: String,
    default: ''
  },
  isAll: {
    type: Boolean,
    default: false
  },
  allTips: {
    type: String,
    default: ''
  },
  emptyImg: {
    type: Number,
    default: 1
  }
})
</script>

<style lang="scss" scoped>
/* 列表为空 */
.component-empty-all-tips{
  width: 100%;

  .empty {
    padding: 100rpx 0;
    text-align: cneter;
  }
  .empty-icon {
    display: block;
    width: 200rpx;
    height: 200rpx;
    margin: 0 auto;
    margin-bottom: 20rpx;
  }

  .empty-text {
    text-align: center;
    color: #999;
    line-height: 40rpx;
    margin-top: 10rpx;
  }

  /* 加载完成 */
  .load-all {
    padding: 40rpx 0;
    text-align: center;
    color: #999;
  }
}
</style>
