<template>
  <view class="sign-in-container">
    <view class="sign-in-header">
      <text class="sign-in-title">签到领积分</text>
    </view>
    <!-- 加载状态 -->
    <view v-if="loading" class="sign-in-loading">
      <u-loading-icon text="加载中..." mode="circle"></u-loading-icon>
    </view>
    <!-- 签到数据 -->
    <view v-else-if="signData && signData.length > 0" class="sign-in-days">
      <view 
        v-for="(day, index) in signData"
        :key="index"
        class="sign-day"
        @click="handleSign(day, index)"
      >
        <view class="sign-day-circle" :class="getSignCircleClass(day)">
          <ImageItem src="/static/points/Signed.png" v-if="day.status == '1' || day.status == '4'"/>
          <ImageItem src="/static/points/notSigned.png" v-else/>
          <text class="sign-day-number" v-if="[0,2].includes(day.status)">+{{ day.points }}</text>
        </view>
        <text :class="day.status == '1' || day.status == '4' ? 'sign-day-text' : 'day-text'">{{ getSignText(day) }}</text>
      </view>
    </view>
    <!-- 空状态 -->
    <view class="sign-in-empty" v-else>
    暂无签到活动
    </view>
  </view>
</template>

<script>
import ImageItem from "@/components/swiper/components/image.vue";

export default {
  components: {ImageItem},
  props: {
    signData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },
  methods: {
    getSignCircleClass(day) {
      return {
        'signed-circle': day.status == '1' || day.status == '4',
        'select-circle': day.status == '2',
      }
    },
    getSignText(day) {
      if (day.status == '1') return '已签到'
      if (day.status == '3') return '未签到'
      if (day.status == '4') {
        const currentDate = new Date();
        const dayDate = new Date(day.date);
        // 比较日期，忽略时间部分
        const currentDateOnly = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate());
        const dayDateOnly = new Date(dayDate.getFullYear(), dayDate.getMonth(), dayDate.getDate());
        if (dayDateOnly < currentDateOnly) {
          return '未开始';
        } else {
          return '已结束';
        }
      }
      return day.date
    },
    //0:未签, 1:已签, 2:今天未签到 , 3：断签，4：已过期
    handleSign(day, index) {
      if (day.status == '2') {
        // 处理签到逻辑
        this.$emit('sign', index)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.sign-in-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  
  .sign-in-header {
    margin-bottom: 26rpx;
    
    .sign-in-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .sign-in-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 146rpx;
  }
  
  .sign-in-days {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .sign-day {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .sign-day-circle {
        width: 80rpx;
        height: 96rpx;
        background: #FBF2E1;
        border-radius: 12rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 16rpx;
        position: relative;
      .image{
          width: 60rpx;
          height: 74rpx;
        }
        
        &.signed-circle {
          background: #F5F5F5;
        }
        
        &.select-circle {
          background: #FFEBC7;
        }

        .sign-day-number {
          font-size: 14rpx;
          color: #282100;
          position: absolute;
          top: 34rpx;
        }
      }
      .sign-day-text{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color:#999999;
      }

      .day-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #333333;
      }
    }
  }
  
  .sign-in-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 146rpx;
    color: #8f9ca2;
    font-size: 28rpx;
  }
}
</style>