<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 showNewsList" :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 { computed } from "vue";
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 showNewsList = computed(() => {
  return props.newsList.slice(0,5)
})


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;
	border: 1px solid rgba(234, 236, 238, 1) !important;

	.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: 54px;
			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: 76px;
			width: 749px;
			margin-left: 21px;
			border-bottom: 1px solid rgba(240, 242, 244, 1);
			cursor: pointer;

			&:hover {
				background: var(--color-bg-hover);

				.right-top .title {
					text-decoration: underline;
					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>
