<template>
  <div class="news-wrapper">
    <div class="news-header">
      <div class="news-header-left">
        <div class="news-header-icon">
          <img src="./news-icon.svg" alt="" />
        </div>
        <div class="news-header-title">{{ "新闻资讯" }}</div>
        <div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
      </div>
    </div>
    <div class="news-main">
      <div class="news-item" v-for="(news, index) in newsList" :key="index" @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>
    </div>
  </div>
</template>

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

  // 新闻列表数据
  newsList: {
    type: Array,
    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 handleToMoreNews = () => {
  emit('more-click')
};
const handleToNewsAnalysis = (item, index) => {
  emit('item-click', item, index)
};
</script>
<style lang="scss" scoped>
.news-wrapper {
  width: 792px !important;
  height: 450px !important;
  border-radius: 10px !important;
  box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1) !important;
  background: rgba(255, 255, 255, 1) !important;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  overflow: hidden;


  .news-header {
    height: 48px !important;
    border-bottom: 1px solid rgba(234, 236, 238, 1) !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    position: relative !important;
    width: 100%;
    box-sizing: border-box;

    .news-header-left {
      display: flex !important;

      .news-header-icon {
        margin-left: 19px !important;
        margin-top: 14px !important;
        width: 24px !important;
        height: 24px !important;

        img {
          width: 100% !important;
          height: 100% !important;
        }
      }

      .news-header-title {
        margin-top: 11px !important;
        margin-left: 17px !important;
        height: 26px !important;
        color: var(--color-main-active) !important;
        font-family: 'Source Han Sans CN' !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 26px !important;
      }
    }

    .more {
      width: 45px;
      height: 24px;
      position: absolute;
      top: 12px;
      right: 27px;
      color: rgba(20, 89, 187, 1);
      font-family: 'Source Han Sans CN';
      font-size: 16px;
      font-weight: 400;
      line-height: 24px;
      cursor: pointer;
    }
  }

  .news-main {
    height: 401px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;

    .news-item {
      display: flex;
      height: 78px;
      width: 749px;
      margin-left: 21px;
      border-bottom: 1px solid rgba(240, 242, 244, 1);
      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: 72px;
        height: 48px;
        margin-top: 15px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        width: 657px;
        margin-left: 20px;

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

          .title {
            margin-top: 14px;
            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 {
            width: 157px;
            text-align: right;
            height: 22px;
            margin-top: 14px;
            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 {
          width: 657px;
          height: 24px;
          color: rgba(59, 65, 75, 1);
          font-family: 'Source Han Sans CN';
          font-size: 16px;
          font-weight: 400;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>