<template>
  <!-- 推荐团课卡片 -->
  <view class="recommend-card" :style="cardStyle" @click="handleCardClick">
    <!-- 卡片头部：图片 + 推荐标题 -->
    <view class="card-header">
      <!-- 团课封面 -->
      <view class="course-image-wrapper">
        <image :src="courseImage" mode="aspectFill" class="course-image" />
        <view class="image-overlay"></view>
        <!-- 状态标签 -->
        <text :class="['status-tag', tagType]">{{ tagText }}</text>
      </view>
      <!-- 推荐标题区 -->
      <view class="header-info">
        <text class="recommend-title">{{ recommend.recommendTitle || '推荐课程' }}</text>
        <text class="recommend-content">{{ recommend.recommendContent }}</text>
      </view>
    </view>
    
    <!-- 课程信息栏 -->
    <view class="info-bar">
      <view class="info-item">
        <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/time.png" class="info-icon" />
        <text class="info-text">{{ formattedTime }}</text>
      </view>
      <view class="info-item" v-if="courseLocation">
        <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/intensity.png" class="info-icon" />
        <text class="info-text">{{ courseLocation }}</text>
      </view>
      <view class="info-item">
        <image src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/hot.png" class="info-icon" />
        <text class="info-text">{{ courseCurrentMembers || 0 }}/{{ courseMaxMembers || 0 }}人</text>
      </view>
    </view>

    <!-- 推荐理由 -->
    <view class="card-reason" v-if="recommend.recommendReason">
      <text class="reason-text">{{ recommend.recommendReason }}</text>
    </view>

    <!-- 卡片底部：操作按钮 -->
    <view class="card-footer" @click.stop="handleJoinCourse">
      <view class="action-btn">
        <text>立即预约</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import { getCourseCoverUrl } from '@/utils/request.js'

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 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 courseId = computed(() => props.recommend.groupCourse?.id)

// 课程封面图片
const courseImage = computed(() => {
  const coverImage = props.recommend.groupCourse?.coverImage
  const url = getCourseCoverUrl(coverImage) || 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=400&q=80'
  console.log('[RecommendCourseCard] 封面URL:', {
    'courseName': props.recommend.groupCourse?.courseName,
    '原始coverImage': coverImage,
    '转换后URL': url,
    '是否完整URL': url && url.startsWith('http')
  })
  return url
})

// 课程标签文本
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 handleCardClick = () => {
  if (!props.recommend.groupCourse) {
    uni.showToast({ title: '课程信息不完整', icon: 'none' })
    return
  }
  uni.navigateTo({ url: `/pages/groupCourse/detail?id=${courseId.value}` })
}

// 处理预约课程点击
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 {
  width: 100%;
  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 {
  display: flex;
  gap: 24rpx;
  padding: 24rpx;
}

.course-image-wrapper {
  width: 160rpx;
  height: 160rpx;
  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.3) 0%, transparent 60%);
}

// 状态标签（图片左下角）
.status-tag {
  position: absolute;
  left: 8rpx;
  bottom: 8rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 18rpx;
  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);
  }
}

// 推荐标题区
.header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.recommend-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #2D4A5A;
  margin-bottom: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-content {
  font-size: 24rpx;
  color: #5A7A8A;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 信息栏：时间 | 地点 | 人数
.info-bar {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 0 24rpx 16rpx;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.info-icon {
  width: 28rpx;
  height: 28rpx;
}

.info-text {
  font-size: 22rpx;
  color: #5A7A8A;
}

// 推荐理由
.card-reason {
  margin: 0 24rpx;
  padding: 16rpx;
  background: rgba(124, 181, 204, 0.06);
  border-radius: 12rpx;
  border-left: 4rpx solid #7CB5CC;
}

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

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

.action-btn {
  width: 100%;
  height: 72rpx;
  background: linear-gradient(135deg, #82DC82, #66CC66);
  border-radius: 36rpx;
  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>
