<template>
  <view class="notice-item" @tap="handleClick">
    <view class="item-main">
      <text class="item-title line-2">{{ item.title }}</text>
      <view class="item-time">
        <text class="time-text">发布时间：{{ formattedTime }}</text>
      </view>
    </view>
    </view>
</template>

<script>
export default {
  name: "NoticeCard",
  props: {
    // 接收外部传入的公告对象数据
    item: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 利用计算属性自动处理时间格式化
    formattedTime() {
      const timeStr = this.item.create_time;
      if (!timeStr) return '--:--:--';
      
      let formatted = timeStr;
      if (timeStr.includes('.') && !timeStr.includes('-')) {
        formatted = timeStr.replace(/\./g, '-');
        if (formatted.match(/\d{4}-\d{2}-\d{2}\d{2}:\d{2}:\d{2}/)) {
          formatted = formatted.replace(/(\d{4}-\d{2}-\d{2})(\d{2}:\d{2}:\d{2})/, '$1 $2');
        }
      }
      if (formatted.includes('-') && formatted.includes(':')) {
        return formatted;
      }
      return timeStr;
    }
  },
  methods: {
    handleClick() {
      // 触发组件的 click 事件，把当前项的数据抛出去
      this.$emit('click', this.item);
    }
  }
};
</script>

<style lang="scss" scoped>
.notice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  transition: all 0.2s ease;
  
  .item-main {
    flex: 1;
    min-width: 0; // 防止文字溢出
    
    .item-title {
      font-size: 30rpx;
      font-weight: 500;
      color: #101010;
      line-height: 42rpx;
      margin-bottom: 16rpx;
    }
    
    .item-time {
      display: flex;
      align-items: center;
      
      .time-icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
        opacity: 0.6;
      }
      
      .time-text {
        font-size: 22rpx;
        color: #999;
        line-height: 30rpx;
      }
    }
  }
}

// 多行省略
.line-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
</style>