<template>
  <view class="empty">
    <u-empty icon="https://download.shjiuze.cn/assets/image/empty/list.png" text=" ">
      <template #default>
        <view class="empty__description">
          <view v-if="status" class="status">{{ status }}</view>
          <view v-if="tips" class="tips">{{ tips }}</view>
        </view>
      </template>
    </u-empty>
  </view>
</template>

<script>
export default {
  name: 'Empty',
  props: {
    status: String,
    tips: String,
  },
};
</script>

<style lang="scss">
  .empty {
    .empty__description {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: $font-md;
      .status {
        font-weight: bold;
        font-size: $font-md;
        color: $color-text;
        text-align: center;
      }
      .tips {
        box-sizing: border-box;
        color: $color-text-caption;
        margin-top: $padding-base;
        font-size: $font-sm;
      }
    }
  }
</style>
