<template>
  <view class="empty-state" :class="{ 'empty-state-small': size === 'small' }">
    <!-- 图标/图片 -->
    <view class="empty-icon">
      <image v-if="image" :src="image" class="empty-image" mode="aspectFit"></image>
      <u-icon v-else :name="iconName" :size="iconSize" :color="iconColor"></u-icon>
    </view>

    <!-- 文字描述 -->
    <view class="empty-text">{{ text }}</view>
    <view v-if="description" class="empty-description">{{ description }}</view>

    <!-- 操作按钮 -->
    <view v-if="showButton" class="empty-action">
      <view class="empty-button" @tap="handleAction">
        {{ buttonText }}
      </view>
    </view>

    <!-- 自定义插槽 -->
    <view v-if="$slots.default" class="empty-slot">
      <slot></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

type EmptyType = 'default' | 'order' | 'room' | 'review' | 'search' | 'network' | 'error'

interface Props {
  type?: EmptyType        // 预设类型
  text?: string           // 主文字
  description?: string    // 描述文字
  image?: string          // 自定义图片
  icon?: string           // 自定义图标
  size?: 'normal' | 'small' // 尺寸
  showButton?: boolean    // 是否显示按钮
  buttonText?: string     // 按钮文字
}

const props = withDefaults(defineProps<Props>(), {
  type: 'default',
  size: 'normal',
  showButton: false,
  buttonText: '重新加载'
})

const emit = defineEmits<{
  'action': []
}>()

// 预设配置
const presets: Record<EmptyType, { icon: string; text: string; description?: string }> = {
  default: {
    icon: 'empty-data',
    text: '暂无数据'
  },
  order: {
    icon: 'order',
    text: '暂无订单',
    description: '快去预订心仪的房源吧'
  },
  room: {
    icon: 'home',
    text: '暂无房源',
    description: '换个条件试试看'
  },
  review: {
    icon: 'chat',
    text: '暂无评价',
    description: '快来成为第一个评价的人'
  },
  search: {
    icon: 'search',
    text: '没有找到相关内容',
    description: '换个关键词试试'
  },
  network: {
    icon: 'wifi-off',
    text: '网络连接失败',
    description: '请检查网络设置后重试'
  },
  error: {
    icon: 'error-circle',
    text: '加载失败',
    description: '请稍后重试'
  }
}

// 图标名称
const iconName = computed(() => {
  return props.icon || presets[props.type].icon
})

// 图标尺寸
const iconSize = computed(() => {
  return props.size === 'small' ? 96 : 120
})

// 图标颜色
const iconColor = computed(() => {
  return '#D4D4D4'
})

// 文字
const text = computed(() => {
  return props.text || presets[props.type].text
})

// 描述
const description = computed(() => {
  return props.description || presets[props.type].description
})

// 按钮点击
const handleAction = () => {
  emit('action')
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 48rpx;
  min-height: 400rpx;
}

.empty-state-small {
  padding: 80rpx 32rpx;
  min-height: 300rpx;
}

/* 图标/图片 */
.empty-icon {
  margin-bottom: $spacing-xl;
  animation: fadeIn 0.5s ease;
}

.empty-image {
  width: 240rpx;
  height: 240rpx;
}

.empty-state-small .empty-image {
  width: 180rpx;
  height: 180rpx;
}

/* 文字 */
.empty-text {
  font-size: $font-lg;
  color: $text-secondary;
  margin-bottom: $spacing-sm;
  text-align: center;
  animation: fadeIn 0.5s ease 0.1s both;
}

.empty-state-small .empty-text {
  font-size: $font-base;
}

.empty-description {
  font-size: $font-sm;
  color: $text-tertiary;
  text-align: center;
  line-height: $line-height-relaxed;
  animation: fadeIn 0.5s ease 0.2s both;
}

/* 操作按钮 */
.empty-action {
  margin-top: $spacing-2xl;
  animation: fadeIn 0.5s ease 0.3s both;
}

.empty-button {
  padding: $spacing-md $spacing-2xl;
  background: $gradient-primary;
  color: $text-inverse;
  font-size: $font-base;
  font-weight: $font-medium;
  border-radius: $radius-round;
  transition: $transition-all;

  &:active {
    transform: scale(0.95);
    opacity: 0.9;
  }
}

.empty-state-small .empty-button {
  padding: $spacing-sm $spacing-xl;
  font-size: $font-sm;
}

/* 自定义插槽 */
.empty-slot {
  margin-top: $spacing-xl;
  animation: fadeIn 0.5s ease 0.4s both;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
