<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>
@use '@/styles/common.scss';

.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;
      @extend .text-title-3-bold;
      color: var(--text-primary-80-color);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

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

      }
    }

    .time {
      text-align: right;
      @extend .text-tip-2;
      color: var(--text-primary-65-color);
    }
  }

  .right-footer {
    @extend .text-compact;
    color: var(--text-primary-65-color);
    @include common.text-ellipsis(2);
  }
}
</style>