<template>
  <view class="remaining-time" :class="computedClass">
    <uni-icons 
      :type="isExpired ? 'clock' : 'time'" 
      :size="14" 
      class="icon"
    ></uni-icons>
    <text class="text">{{ displayText }}</text>
  </view>
</template>

<script>
export default {
  name: 'RemainingTime', 
  props: {
    // 截至日期（ISO格式，如：'2025-12-31T23:59:59'）
    expireDate: {
      type: String,
      required: true,
      validator(value) {
        // 验证日期格式有效性
        return !isNaN(Date.parse(value));
      }
    },
    // 阈值天数（超过此值为绿色，否则红色）
    thresholdDays: {
      type: Number,
      required: true,
			default: 3,
      validator(value) {
        return value >= 0;
      }
    }
  },
  computed: {
    // 计算剩余天数（负数表示逾期）
    remainingDays() {
      const now = new Date();
      const expire = new Date(this.expireDate);
      const diffTime = expire - now;
      // 转换为天数并四舍五入
      return Math.round(diffTime / (1000 * 60 * 60 * 24));
    },
    // 是否已逾期
    isExpired() {
      return this.remainingDays < 0;
    },
    // 显示文本
    displayText() {
      if (this.isExpired) {
        return `已逾期 ${Math.abs(this.remainingDays)} 天`;
      }
      return `剩余 ${this.remainingDays} 天`;
    },
    // 计算样式类
    computedClass() {
      if (this.isExpired) {
        return 'expired'; // 逾期状态
      }
      return this.remainingDays > this.thresholdDays 
        ? 'normal' // 正常状态（超过阈值）
        : 'warning'; // 警告状态（低于阈值）
    }
  }
};
</script>

<style scoped>
.remaining-time {
  display: inline-flex;
  align-items: center;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  line-height: 1;
}

.icon {
  margin-right: 8rpx;
}

.text {
  font-weight: 500;
}

/* 正常状态（超过阈值） */
.normal {
  color: #00b42a; /* 绿色 */
}

/* 警告状态（低于阈值） */
.warning {
  color: #f53f3f; /* 红色 */
}

/* 逾期状态 */
.expired {
  background-color: #fef0f0;
  color: #f53f3f; /* 红色背景+红色文字 */
}
</style>