<template>
  <view class="empty-container">
    <view v-if="!image && !hasDefaultImage" class="empty-icon">
      <text class="icon-text">📭</text>
    </view>
    <image 
      v-else
      class="empty-image" 
      :src="image || defaultImage" 
      mode="aspectFit"
      @error="handleImageError"
    />
    <text class="empty-text">{{ text || '暂无数据' }}</text>
    <button 
      v-if="showButton" 
      class="empty-btn" 
      @click="handleButtonClick"
    >
      {{ buttonText || '去相亲' }}
    </button>
  </view>
</template>

<script>
export default {
  name: 'Empty',
  props: {
    image: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: '暂无数据'
    },
    showButton: {
      type: Boolean,
      default: true
    },
    buttonText: {
      type: String,
      default: '去相亲'
    },
    buttonUrl: {
      type: String,
      default: '/pages/index/index'
    }
  },
  emits: ['click'],
  data() {
    return {
      defaultImage: '/static/ic_empty.png',
      hasDefaultImage: true // 使用空占位图
    }
  },
  methods: {
    handleImageError() {
      // 图片加载失败时，使用emoji替代
      this.hasDefaultImage = false
    },
    handleButtonClick() {
      this.$emit('click')
      
      // 如果有指定跳转URL，则跳转
      if (this.buttonUrl) {
        // 判断是否是tabbar页面
        const tabbarPages = ['/pages/index/index', '/pages/message/index', '/pages/mine/index']
        if (tabbarPages.includes(this.buttonUrl)) {
          uni.switchTab({ url: this.buttonUrl })
        } else {
          uni.navigateTo({ url: this.buttonUrl })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  
  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
    
    .icon-text {
      font-size: 120rpx;
    }
  }
  
  .empty-image {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 30rpx;
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
    text-align: center;
  }
  
  .empty-btn {
    min-width: 240rpx;
    height: 72rpx;
    line-height: 72rpx;
    padding: 0 40rpx;
    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
    color: #fff;
    font-size: 28rpx;
    border-radius: 36rpx;
    border: none;
    
    &::after {
      border: none;
    }
  }
}
</style>
