<template>
  <view class="empty-container" :class="[size]">
    <!-- 空状态图片 -->
    <view class="empty-image">
      <image 
        v-if="image" 
        :src="image" 
        mode="aspectFit"
        class="image"
      ></image>
      <view v-else class="default-icon" :style="{ color: iconColor }">
        <text class="iconfont" :class="iconClass"></text>
      </view>
    </view>
    
    <!-- 空状态文本 -->
    <view class="empty-content">
      <text class="empty-title" v-if="title">{{ title }}</text>
      <text class="empty-description" v-if="description">{{ description }}</text>
    </view>
    
    <!-- 操作按钮 -->
    <view class="empty-actions" v-if="showAction">
      <button 
        class="action-button" 
        :class="[buttonType]"
        @click="onActionClick"
      >
        {{ actionText }}
      </button>
    </view>
    
    <!-- 自定义插槽 -->
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'Empty',
  
  props: {
    // 空状态图片
    image: {
      type: String,
      default: ''
    },
    // 图标类名
    iconClass: {
      type: String,
      default: 'icon-empty'
    },
    // 图标颜色
    iconColor: {
      type: String,
      default: '#cccccc'
    },
    // 标题
    title: {
      type: String,
      default: '暂无数据'
    },
    // 描述
    description: {
      type: String,
      default: ''
    },
    // 是否显示操作按钮
    showAction: {
      type: Boolean,
      default: false
    },
    // 操作按钮文本
    actionText: {
      type: String,
      default: '重新加载'
    },
    // 按钮类型
    buttonType: {
      type: String,
      default: 'primary',
      validator: (value) => ['primary', 'secondary', 'text'].includes(value)
    },
    // 大小
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    }
  },
  
  methods: {
    // 操作按钮点击
    onActionClick() {
      this.$emit('action')
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  text-align: center;
  
  &.small {
    padding: 40rpx 30rpx;
    
    .empty-image {
      .image {
        width: 120rpx;
        height: 120rpx;
      }
      
      .default-icon {
        font-size: 80rpx;
      }
    }
    
    .empty-title {
      font-size: 28rpx;
    }
    
    .empty-description {
      font-size: 24rpx;
    }
  }
  
  &.medium {
    padding: 60rpx 40rpx;
    
    .empty-image {
      .image {
        width: 160rpx;
        height: 160rpx;
      }
      
      .default-icon {
        font-size: 100rpx;
      }
    }
    
    .empty-title {
      font-size: 32rpx;
    }
    
    .empty-description {
      font-size: 28rpx;
    }
  }
  
  &.large {
    padding: 80rpx 50rpx;
    
    .empty-image {
      .image {
        width: 200rpx;
        height: 200rpx;
      }
      
      .default-icon {
        font-size: 120rpx;
      }
    }
    
    .empty-title {
      font-size: 36rpx;
    }
    
    .empty-description {
      font-size: 32rpx;
    }
  }
}

.empty-image {
  margin-bottom: 30rpx;
  
  .image {
    width: 160rpx;
    height: 160rpx;
    opacity: 0.6;
  }
  
  .default-icon {
    font-size: 100rpx;
    color: #cccccc;
    opacity: 0.6;
  }
}

.empty-content {
  margin-bottom: 40rpx;
  
  .empty-title {
    display: block;
    font-size: 32rpx;
    font-weight: 500;
    color: #666666;
    margin-bottom: 16rpx;
    line-height: 1.4;
  }
  
  .empty-description {
    display: block;
    font-size: 28rpx;
    color: #999999;
    line-height: 1.5;
    max-width: 400rpx;
  }
}

.empty-actions {
  .action-button {
    border: none;
    border-radius: 12rpx;
    padding: 20rpx 40rpx;
    font-size: 28rpx;
    font-weight: 500;
    
    &.primary {
      background: linear-gradient(135deg, #2E8B57, #3CB371);
      color: #ffffff;
    }
    
    &.secondary {
      background: #ffffff;
      color: #2E8B57;
      border: 2rpx solid #2E8B57;
    }
    
    &.text {
      background: transparent;
      color: #2E8B57;
      text-decoration: underline;
    }
    
    &::after {
      border: none;
    }
  }
}

/* 预设的空状态样式 */
.empty-container {
  // 无数据
  &.no-data {
    .default-icon {
      color: #e6e6e6;
    }
  }
  
  // 无网络
  &.no-network {
    .default-icon {
      color: #ff6b6b;
    }
  }
  
  // 搜索无结果
  &.no-search {
    .default-icon {
      color: #ffa726;
    }
  }
  
  // 加载失败
  &.load-error {
    .default-icon {
      color: #ef5350;
    }
  }
}
</style>