<template>
    <div class="padding-box">
      <div class="news-card">
        <div v-for="item in props.content3" :key="item.id" class="news-item" @click="handleNewsClick(item)">
          <div class="image-wrapper">
            <img :src="getImageUrl(item.photo)" :alt="item.title" loading="lazy" />
          </div>
          <div class="content">
            <h3 class="title">{{ item.title }}</h3>
            <time class="subtitle">{{item.createTime}}</time>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  
  interface NewsItem {
    id: number | string
    noticeTitle: string
    remark: string
    // 添加其他需要的属性
  }
  
  // Props 定义
  interface Props {
    content3: NewsItem[]
    action?: string
  }
  
  const props = withDefaults(defineProps<Props>(), {
    content3: () => [],
    action: ''
  })
  
  // 事件
  const emit = defineEmits<{
    (e: 'itemClick', item: NewsItem): void
  }>()
  
  // 获取完整图片URL
  const getImageUrl = (remark: string) => {
    return 'http://118.107.9.143:8080/jeecg-boot/' + remark
  }
  
  // 处理新闻点击
  const handleNewsClick = (item: NewsItem) => {
    emit('itemClick', item)
  }
  </script>
  
  <style lang="scss" scoped>
  .news-card {
    margin: 7.5px 0; // 15rpx / 2
    padding: 0;
    border-radius: 5px; // 10rpx / 2
    font-family: pingfang;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .news-item {
    display: flex;
    padding: 15px;
    gap: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  
    &:hover {
      background-color: rgba(0, 0, 0, 0.02);
    }
  
    &:active {
      background-color: rgba(0, 0, 0, 0.05);
    }
  
    &:not(:last-child) {
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
  }
  
  .image-wrapper {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
  
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
  
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  
  .content {
    flex: 1;
    min-width: 0; // 防止文本溢出
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }
  
  .subtitle {
    font-size: 14px;
    color: #999;
    margin-top: auto;
  }
  </style>