<template>
  <div class="news-card">
    
    <div class="news-card-image">
      <img v-if="item.imageUrl" :src="item.imageUrl" :alt="item.name" />
      <div v-else class="news-card-placeholder">
        <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
          <rect width="48" height="48" rx="6" fill="rgba(5,95,194,0.06)" />
          <path d="M16 32l6-8 4 5 6-8 6 11H16z" fill="rgba(5,95,194,0.15)" />
          <circle cx="20" cy="20" r="3" fill="rgba(5,95,194,0.15)" />
        </svg>
      </div>
    </div>
    <div class="news-card-content">
      <p class="news-card-title">{{ item.name }}</p>
      <div class="news-card-meta">
        <span class="news-card-date">{{ item.time }}</span>
          <span class="news-card-source">
        {{item.sourceName}}
      </span>
      </div>
    
    </div>
  </div>
</template>

<script setup>
defineProps({
  item: {
    type: Object,
    required: true,
  },
})
</script>

<style scoped>
.news-card {
  width: 398px;
  height: 300px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(230, 231, 232, 1);
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.news-card:hover {
  box-shadow: 0px 0px 24px 0px rgba(25, 69, 130, 0.16);
}
 
.news-card-image {
  position: absolute;
  left: 17px;
  right: 17px;
  top: 15px;
  bottom: 105px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(247, 248, 249, 1);
}
.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(5, 95, 194, 0.04) 0%, rgba(5, 95, 194, 0.08) 100%);
}
 
.news-card-content {
  position: absolute;
  left: 21px;
  right: 17px;
  bottom: 15px;
  height: 78px;
}
.news-card-source{
    position: absolute;
  right: 0;
  right: 0;
  top: 0;
    font-size: 18px;
  font-family: 'Source Han Sans CN', sans-serif;
  font-weight: 700;
  line-height: 24px;
  color: rgba(59, 65, 75, 1);
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.news-card-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  font-size: 18px;
  font-family: 'Source Han Sans CN', sans-serif;
  font-weight: 700;
  line-height: 24px;
  color: rgba(59, 65, 75, 1);
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.news-card-meta {
  position: absolute;
  left: 0;
  right: 28px;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

.news-card-date {
  font-size: 14px;
  font-family: 'Source Han Sans CN', sans-serif;
  font-weight: 400;
  line-height: 22px;
  color: rgba(95, 101, 108, 1);
}

.news-card-source {
  font-size: 14px;
  font-family: 'Source Han Sans CN', sans-serif;
  font-weight: 400;
  line-height: 22px;
  color: rgba(95, 101, 108, 1);
  position: absolute;
  right: -28px;
  bottom: 0;
}
</style>
