<template>
  <view class="no-data-container">
    <!-- 图标 -->
    <view class="no-data-icon">
      <uni-icons 
        :type="iconType" 
        :size="iconSize" 
        :color="iconColor" 
      />
    </view>
    
    <!-- 提示文字 -->
    <text class="no-data-text">
      {{ text }}
    </text>
  </view>
</template>

<script>
// 导入uni-ui图标组件
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';

export default {
  name: 'NoData',
  components: {
    uniIcons
  },
  props: {
    // 提示文字
    text: {
      type: String,
      default: '暂无数据'
    },
    // 图标类型
    iconType: {
      type: String,
      default: 'search' // 可以使用其他图标如: 'info', 'help', 'minus', etc.
    },
    // 图标大小
    iconSize: {
      type: [Number, String],
      default: 60
    },
    // 图标颜色
    iconColor: {
      type: String,
      default: '#C0C4CC'
    }
  }
}
</script>

<style lang="scss" scoped>
.no-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 40rpx 0; /* 添加上下padding值 */
  
  .no-data-icon {
    margin-bottom: 20rpx;
    opacity: 0.5;
  }
  
  .no-data-text {
    font-size: 28rpx;
    color: #909399;
    font-weight: 400;
  }
}
</style>