<template>
  <div class="box3-item" @click="handleToNewsAnalysis(news)">
    <div class="left">
      <img :src="news[props.img] ? news[props.img] : DefaultIconNews" alt="" />
    </div>
    <div class="right">
      <div class="right-top">
        <div class="title"><span class="text-inner">{{ news[props.title] }}</span></div>
        <div class="time">{{ news[props.from] }}</div>
      </div>
      <div class="right-footer">{{ news[props.content] }}</div>
    </div>
  </div>
</template>

<script setup>
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
const props = defineProps({

  // 新闻列表数据
  news: {
    type: Object,
    default: () => { }
  },

  img: {
    type: String,
    default: 'img'
  },
  title: {
    type: String,
    default: "title"
  },
  from: {
    type: String,
    default: "from"
  },
  content: {
    type: String,
    default: "content"
  },

});
const emit = defineEmits(['item-click', 'more-click']);

const handleToNewsAnalysis = (item, index) => {
  emit('item-click', item, index)
};
</script>
<style lang="scss" scoped>
.box3-item {
  display: flex;
  align-items: center;
  height: 78px;
  margin: 0px 21px;
  cursor: pointer;

  &:hover {
    .right-top .title {
      color: rgb(5, 95, 194) !important;
      font-weight: 700;
    }

    .right-top .text-inner {
      border-bottom-color: rgb(5, 95, 194) !important;
    }
  }
}

.left {
  width: 97px;
  // flex-shrink: 0;
  height: 72px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }
}

.right {
  flex: 1;
  min-width: 0;
  margin-left: 20px;

  .right-top {
    display: flex;
    justify-content: space-between;

    .title {
      // width: 500px;
      height: 24px;
      color: rgba(59, 65, 75, 1);
      font-family: 'Source Han Sans CN';
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .text-inner {
        border-bottom: 1px solid transparent;

      }
    }

    .time {
      text-align: right;
      height: 22px;
      color: rgba(95, 101, 108, 1);
      font-family: 'Source Han Sans CN';
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .right-footer {
    height: 48px;
    /* 调整为2行的高度：24px × 2 = 48px */
    color: rgba(59, 65, 75, 1);
    font-family: 'Source Han Sans CN';
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    overflow: hidden;
    display: -webkit-box;
    /* 关键 */
    -webkit-line-clamp: 2;
    /* 显示2行 */
    -webkit-box-orient: vertical;
    /* 垂直方向排列 */
    text-overflow: ellipsis;
    /* 第二行省略号 */
    white-space: normal;
    /* 改为 normal */
    word-break: break-word;
    /* 允许单词换行 */
  }
}
</style>