<template>
  <view class="activity-card-container">
    <!-- 卡片标题 -->
    <view class="card-title" v-if="showTitle">
      <text class="title-text">{{ activity.name }}</text>
    </view>
    
    <!-- 活动卡片 -->
    <view class="activity-card" @click="handleCardClick">
      <view class="card-background">
        <image class="background-image" :src="activity.backgroundImage || getDefaultImage()" mode="aspectFill" />
        <view class="overlay"></view>
      </view>
      
      <view class="card-content">
        <!-- 活动主题 -->
        <view class="activity-theme" v-if="activity.theme">
          <text class="theme-text">{{ activity.theme }}</text>
        </view>
        
        <!-- 活动名称 -->
        <view class="activity-name">
          <text class="name-text">{{ activity.name }}</text>
        </view>
        
        <!-- 活动状态 -->
        <view class="activity-status">
          <text class="status-text" :class="statusClass">
            {{ statusText }}
          </text>
        </view>
        
        <!-- 活动时间 -->
        <view class="activity-time" v-if="activity.time">
          <text class="time-label">活动时间:</text>
          <text class="time-text">{{ activity.time }}</text>
        </view>


        <view class="line-button">
          <!-- 水平分割线 -->
          <view class="divider-line"></view>
          <!-- 报名按钮 -->
          <view class="register-button" @click.stop="handleRegister" v-if="activity.status === ACTIVITY_STATUS.REGISTERING">
            <text class="button-text">立即报名</text>
          </view>
        </view>

        
        <!-- 活动地点 -->
        <view class="activity-location" v-if="activity.location">
          <text class="location-label">地点:</text>
          <text class="location-text">{{ activity.location }}</text>
        </view>
        

      </view>
    </view>
  </view>
</template>

<script>
import { ACTIVITY_STATUS, ACTIVITY_STATUS_TEXT, ACTIVITY_STATUS_CLASS, DEFAULT_ACTIVITY_IMAGES } from '../../enum/activity.js'

export default {
  name: 'ActivityCard',
  props: {
    activity: {
      type: Object,
      required: true,
      default: () => ({
        id: '',
        name: '',
        theme: '',
        type: 'prayer',
        status: ACTIVITY_STATUS.REGISTERING,
        time: '',
        location: '',
        backgroundImage: ''
      })
    },
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      ACTIVITY_STATUS
    }
  },
  computed: {
    // 状态文本
    statusText() {
      return ACTIVITY_STATUS_TEXT[this.activity.status] || '未知状态'
    },
    
    // 状态样式类
    statusClass() {
      return ACTIVITY_STATUS_CLASS[this.activity.status] || ''
    }
  },
  methods: {
    // 获取默认背景图片
    getDefaultImage() {
      return DEFAULT_ACTIVITY_IMAGES[this.activity.type] || '/static/image/a1.png'
    },
    
    // 处理卡片点击
    handleCardClick() {
      this.$emit('card-click', this.activity)
    },
    
    // 处理报名
    handleRegister() {
      this.$emit('register', this.activity)
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  
  .card-title {
    width: 100%;
    margin-bottom: 20rpx;
    
    .title-text {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
    }
  }
}

.activity-card {
  width: 684rpx;
  height: 370rpx;
  border-radius: 24rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  
  .card-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    .background-image {
      width: 100%;
      height: 100%;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
    }
  }
  
  .card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 40rpx 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    .activity-theme {
      .theme-text {
        font-size: 28rpx;
        color: #fff;
        line-height: 1.4;
      }
    }
    
    .activity-name {
      .name-text {
        font-size: 36rpx;
        font-weight: bold;
        color: #fff;
        margin: 10rpx 0;
      }
    }
    
    .activity-status {
      .status-text {
        font-size: 24rpx;
        padding: 8rpx 16rpx;
        border-radius: 20rpx;
        display: inline-block;
        
        &.status-registering {
          color: #FFD700;
          background: rgba(255, 215, 0, 0.2);
        }
        
        &.status-ongoing {
          color: #4CAF50;
          background: rgba(76, 175, 80, 0.2);
        }
        
        &.status-finished {
          color: #9E9E9E;
          background: rgba(158, 158, 158, 0.2);
        }
      }
    }
    
    .activity-time {
      flex-direction: column; /* 改为垂直排列 */
      display: flex;
      margin-top: 20rpx;
      
      .time-label {
        font-size: 26rpx;
        color: #fff;
        margin-right: 10rpx;
      }
      
      .time-text {
        font-size: 26rpx;
        color: #fff;
        line-height: 1.4;
      }
    }
    .line-button{
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .divider-line {
        border-top: 1px solid rgba(255, 255, 255, 0.3); /* 上边框作为分隔线 */
        width: 404rpx;
      }
      .register-button {
        width: 132rpx;
        height: 40rpx;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 30rpx;

        .button-text {
          font-size: 22rpx;
          color: #333;
          font-weight: 400;
          white-space: nowrap;
          width: auto; /* 移除固定宽度 */
          padding: 0 20rpx; /* 左右对称留白 */
          text-align: center;
        }
      }
    }


    .activity-location {
      display: flex;
      align-items: flex-start;
      margin-bottom: 30rpx;
      
      .location-label {
        font-size: 26rpx;
        color: #fff;
        margin-right: 10rpx;
        white-space: nowrap;
      }
      
      .location-text {
        font-size: 26rpx;
        color: #fff;
        line-height: 1.4;
      }
    }
    

  }
}
</style> 