<template>
  <!-- 推荐团课卡片 -->
  <view class="recommend-card" :style="cardStyle">
    <!-- 卡片头部：推荐信息 -->
    <view class="card-header">
      <text class="recommend-title">{{ recommend.recommendTitle || '推荐课程' }}</text>
      <text class="recommend-content">{{ recommend.recommendContent }}</text>
      <view class="recommend-reason" v-if="recommend.recommendReason">
        <text class="reason-label">推荐理由：</text>
        <text class="reason-text">{{ recommend.recommendReason }}</text>
      </view>
    </view>
    
    <!-- 分割线 -->
    <view class="divider"></view>
    
    <!-- 卡片主体：团课信息 -->
    <view class="card-body">
      <!-- 团课封面 -->
      <view class="course-image-wrapper">
        <image :src="courseImage" mode="aspectFill" class="course-image" />
        <view class="image-overlay"></view>
      </view>
      
      <!-- 团课详情 -->
      <view class="course-info">
        <text class="course-name">{{ courseName }}</text>
        
        <!-- 课程标签 -->
        <view class="course-tags">
          <text :class="['course-tag', tagType]">{{ tagText }}</text>
          <text class="course-type">{{ courseTypeName }}</text>
        </view>
        
        <!-- 课程时间 -->
        <view class="course-time" v-if="courseStartTime">
          <text class="time-icon">📅</text>
          <text class="time-text">{{ formattedTime }}</text>
        </view>
        
        <!-- 地点 -->
        <view class="course-location" v-if="courseLocation">
          <text class="location-icon">📍</text>
          <text class="location-text">{{ courseLocation }}</text>
        </view>
        
        <!-- 参与人数 -->
        <view class="course-members">
          <text class="members-icon">🔥</text>
          <text class="members-text">{{ courseCurrentMembers || 0 }}/{{ courseMaxMembers || 0 }}人</text>
        </view>
        
        <!-- 课程描述 -->
        <text class="course-description" v-if="courseDescription">{{ courseDescription }}</text>
      </view>
    </view>
    
    <!-- 卡片底部：操作按钮 -->
    <view class="card-footer">
      <view class="action-btn" @click="handleJoinCourse">
        <text>立即预约</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  recommend: {
    type: Object,
    required: true,
    default: () => ({})
  },
  width: {
    type: [Number, String],
    default: '100%',
    description: '卡片宽度'
  },
  borderRadius: {
    type: [Number, String],
    default: 24,
    description: '卡片圆角，单位 rpx'
  }
})

// 计算卡片样式
const cardStyle = computed(() => {
  const style = {}
  if (props.width) {
    style.width = typeof props.width === 'number' ? `${props.width}rpx` : props.width
  }
  if (props.borderRadius) {
    style.borderRadius = typeof props.borderRadius === 'number' ? `${props.borderRadius}rpx` : props.borderRadius
  }
  return style
})

// 团课信息
const courseName = computed(() => props.recommend.groupCourse?.courseName || '未知课程')
const courseStartTime = computed(() => props.recommend.groupCourse?.startTime)
const courseEndTime = computed(() => props.recommend.groupCourse?.endTime)
const courseMaxMembers = computed(() => props.recommend.groupCourse?.maxMembers)
const courseCurrentMembers = computed(() => props.recommend.groupCourse?.currentMembers)
const courseLocation = computed(() => props.recommend.groupCourse?.location)
const courseDescription = computed(() => props.recommend.groupCourse?.description)
const courseId = computed(() => props.recommend.groupCourse?.id)

// 课程封面图片
const courseImage = computed(() => {
  const coverImage = props.recommend.groupCourse?.coverImage
  if (!coverImage) return 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
  if (coverImage.startsWith('http')) return coverImage
  return `https://your-domain.com${coverImage}`
})

// 课程类型映射
const courseTypeName = computed(() => {
  const typeMap = {
    1: '瑜伽',
    2: '搏击',
    3: '塑形'
  }
  return typeMap[props.recommend.groupCourse?.courseType] || '课程'
})

// 课程标签文本
const tagText = computed(() => {
  const current = courseCurrentMembers.value || 0
  const max = courseMaxMembers.value || 0
  if (current >= max) return '已满员'
  if (props.recommend.groupCourse?.status === 2) return '已结束'
  if (props.recommend.groupCourse?.status === 1) return '已取消'
  if (max > 0 && current / max >= 0.8) return '热门'
  return '推荐'
})

// 课程标签类型
const tagType = computed(() => {
  const current = courseCurrentMembers.value || 0
  const max = courseMaxMembers.value || 0
  if (current >= max) return 'full'
  if (props.recommend.groupCourse?.status === 2) return 'ended'
  if (props.recommend.groupCourse?.status === 1) return 'ended'
  if (max > 0 && current / max >= 0.8) return 'hot'
  return 'default'
})

// 格式化课程时间
const formattedTime = computed(() => {
  if (!courseStartTime.value) return ''
  const start = new Date(courseStartTime.value)
  const date = `${start.getMonth() + 1}月${start.getDate()}日`
  const time = `${String(start.getHours()).padStart(2, '0')}:${String(start.getMinutes()).padStart(2, '0')}`
  
  if (courseEndTime.value) {
    const end = new Date(courseEndTime.value)
    const endTime = `${String(end.getHours()).padStart(2, '0')}:${String(end.getMinutes()).padStart(2, '0')}`
    return `${date} ${time}-${endTime}`
  }
  
  return `${date} ${time}`
})

// 处理预约课程点击
const handleJoinCourse = () => {
  if (props.recommend.groupCourse?.status === 2) {
    uni.showToast({ title: '课程已结束', icon: 'none' })
    return
  }
  if (props.recommend.groupCourse?.status === 1) {
    uni.showToast({ title: '课程已取消', icon: 'none' })
    return
  }
  const current = courseCurrentMembers.value || 0
  const max = courseMaxMembers.value || 0
  if (current >= max) {
    uni.showToast({ title: '课程已满员', icon: 'none' })
    return
  }
  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${courseId.value}` })
}
</script>

<style lang="scss">
.recommend-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(45, 74, 90, 0.1);
  border: 1rpx solid rgba(124, 181, 204, 0.2);
  margin-bottom: 24rpx;
}

// 卡片头部
.card-header {
  padding: 24rpx;
  background: linear-gradient(135deg, rgba(124, 181, 204, 0.1), rgba(156, 207, 223, 0.05));
}

.recommend-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #2D4A5A;
  margin-bottom: 12rpx;
  display: block;
}

.recommend-content {
  display: block;
  font-size: 26rpx;
  color: #5A7A8A;
  line-height: 1.6;
  margin-bottom: 12rpx;
}

.recommend-reason {
  display: flex;
  align-items: flex-start;
  gap: 8rpx;
}

.reason-label {
  font-size: 24rpx;
  color: #8CA0B0;
  flex-shrink: 0;
}

.reason-text {
  font-size: 24rpx;
  color: #6A8A9A;
  line-height: 1.5;
}

// 分割线
.divider {
  height: 1rpx;
  background: linear-gradient(90deg, transparent, rgba(124, 181, 204, 0.3), transparent);
  margin: 0 24rpx;
}

// 卡片主体
.card-body {
  padding: 24rpx;
  display: flex;
  gap: 24rpx;
}

.course-image-wrapper {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.course-image {
  width: 100%;
  height: 100%;
}

.image-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(45, 74, 90, 0.4) 0%, transparent 50%);
}

// 团课详情
.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.course-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #2D4A5A;
}

.course-tags {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.course-tag {
  padding: 6rpx 16rpx;
  border-radius: 10rpx;
  font-size: 20rpx;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #7CB5CC, #9CCFDF);
  &.hot {
    background: linear-gradient(135deg, #FF8C69, #FFA07A);
  }
  &.full {
    background: linear-gradient(135deg, #A0B8C8, #B8CCD8);
  }
  &.ended {
    background: linear-gradient(135deg, #C0CCD0, #D0D8DC);
  }
}

.course-type {
  font-size: 22rpx;
  color: #8CA0B0;
}

.course-time,
.course-location,
.course-members {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.time-icon,
.location-icon,
.members-icon {
  font-size: 24rpx;
}

.time-text,
.location-text,
.members-text {
  font-size: 24rpx;
  color: #5A7A8A;
}

.course-description {
  font-size: 24rpx;
  color: #8CA0B0;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

// 卡片底部
.card-footer {
  padding: 16rpx 24rpx 24rpx;
}

.action-btn {
  width: 100%;
  height: 80rpx;
  background: linear-gradient(135deg, #82DC82, #66CC66);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(130, 220, 130, 0.35);
  
  text {
    font-size: 28rpx;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
