<template>
	<div class="ask-page">
		<div class="left">
			<div class="left-title">
				<img src="./assets/icon01.png" alt />
				<div class="tit">新闻资讯</div>
				<div class="more" @click="handleToNewsDetail">更多 +</div>
			</div>
			<div class="left-main">
				<div v-for="item in leftList" :key="item.newsId" class="main-item">
					<img :src="item.newsImage" alt />
					<div class="item-content">
						<div class="title">{{item.newsTitle}}</div>
						<el-tooltip
							effect="dark"
							:content="item.newsContent"
							popper-class="common-prompt-popper"
							placement="top"
							:show-after="500"
						>
							<div class="content">{{item.newsContent}}</div>
						</el-tooltip>
						<div class="time">{{item.newsDate}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="right">
			<div class="right-title">
				<img src="./assets/icon02.png" alt />
				<div class="tit">社交媒体</div>
				<div class="more" @click="handleToSocialDetail">更多 +</div>
			</div>
			<div class="right-main">
				<div class="trump" v-for="item in rightList">
					<img :src="item.personImage" alt />
					<div class="trump-main">
						<div class="cl1">{{ item.personName }}</div>
						<div class="cl2">{{ item.remarks }}</div>
						<div class="cl3">{{ item.time }}&nbsp; 发布于{{ item.orgName }}</div>
					</div>
				</div>
				<!-- <div class="mask">
					<img src="./assets/title02.png" alt />
					<div class="mask-main">
						<div class="cl1">{{ rightList[1].name }}</div>
						<div class="cl2">{{ rightList[1].content }}</div>
						<div class="cl3">{{ rightList[1].time }}</div>
					</div>
				</div>
				<div class="malaby">
					<img src="./assets/title03.png" alt />
					<div class="malaby-main">
						<div class="cl1">{{ rightList[2].name }}</div>
						<div class="cl2">{{ rightList[2].content }}</div>
						<div class="cl3">{{ rightList[2].time }}</div>
					</div>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import router from "@/router"
import image01 from './assets/image01.png'
import image02 from './assets/image02.png'
import image03 from './assets/image03.png'
import image04 from './assets/image04.png'
import image05 from './assets/image05.png'

import title01 from './assets/title01.png'
import title02 from './assets/title02.png'
import title03 from './assets/title03.png'
import { getNews, getRemarks } from '@/api/ruleRestriction/index.js'

const leftList = ref([]);
const rightList = ref([]);

const getNewsList = async () => {
  try {
    const res = await getNews('0108');
    // console.log('----res', res)
    if (res && res.code === 200) {
      // console.log('----getNewsList', res.data)
      leftList.value = res.data
    }
  } catch (error) {
    console.error("获取新闻资讯接口失败:", error);
  }
}

const getRemarksList = async () => {
  try {
    const res = await getRemarks('0108');
    // console.log('----res', res)
    if (res && res.code === 200) {
      // console.log('----getRemarksList', res.data)
      rightList.value = res.data
    }
  } catch (error) {
    console.error("获取社交媒体接口失败:", error);
  }
}

// 查看更多新闻资讯
// 查看新闻资讯详情
const handleToNewsDetail = item => {
	const route = router.resolve({
		path: "/newsAnalysis",
		query: {
			newsId: item.id
		}
	});
	window.open(route.href, "_blank");
};

// 查看社交媒体详情
const handleToSocialDetail = item => {
	const route = router.resolve({
		path: "/characterPage",
		query: {
			personId: item.id
		}
	});
	window.open(route.href, "_blank");
};


onBeforeMount(async () => {
  await getNewsList()
  await getRemarksList()
})

</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.ask-page {
	width: 1600px;
	height: 450px;
	display: flex;
	justify-content: space-between;
	.left {
		width: 792px;
		height: 450px;
		margin-right: 16px;
		border-radius: 10px;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background-color: #fff;
		.left-title {
			width: 792px;
			height: 48px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 19px;
				height: 19px;
				position: absolute;
				top: 16px;
				left: 21px;
			}
			.tit {
				margin-left: 60px;
				width: 80px;
				height: 48px;
				padding: 11px 0;
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				color: rgb(5, 95, 194);
			}
			.more {
				width: 49px;
				height: 24px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(5, 95, 194);
				position: absolute;
				top: 12px;
				right: 27px;
				cursor: pointer;
			}
		}
		.left-main {
			width: 792px;
			height: 402px;
			padding: 20px 22px 21px 21px;
			overflow-y: auto;
      overflow-x: hidden;
			.main-item {
				width: 749px;
				height: 64px;
				display: flex;
				border-bottom: 1px solid rgba(240, 242, 244, 1);
				margin-bottom: 14px;
				&:hover {
					background-color: #f9f9f9;
				}
				img {
					width: 72px;
					height: 48px;
					margin-right: 20px;
					cursor: pointer;
				}
				.item-content {
					width: 657px;
					height: 50px;
					position: relative;
					.title {
						font-size: 16px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
						cursor: pointer;
					}
					.content {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
						cursor: pointer;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的内容 */
						text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
					}
					.time {
						position: absolute;
						top: 0px;
						right: 0px;
						font-size: 14px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 22px;
						color: rgb(95, 101, 108);
						cursor: pointer;
					}
				}
			}
		}
	}
	.right {
		width: 792px;
		height: 450px;
		border-radius: 10px;
		border: 1px solid rgb(234, 236, 238);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background-color: #fff;
		.right-title {
			width: 792px;
			height: 48px;
			border-bottom: 1px solid rgb(234, 236, 238);
			position: relative;
			img {
				width: 19px;
				height: 19px;
				position: absolute;
				top: 16px;
				left: 21px;
			}
			.tit {
				margin-left: 60px;
				width: 80px;
				height: 48px;
				padding: 11px 0;
				font-size: 20px;
				font-weight: 700;
				font-family: "Microsoft YaHei";
				line-height: 26px;
				color: rgb(5, 95, 194);
			}
			.more {
				width: 49px;
				height: 24px;
				font-size: 16px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				line-height: 24px;
				color: rgb(5, 95, 194);
				position: absolute;
				top: 12px;
				right: 27px;
				cursor: pointer;
			}
		}
		.right-main {
			width: 792px;
			height: 402px;
			padding: 23px 30px 25px 21px;
      overflow-y: auto;
      overflow-x: hidden;
			.trump {
				width: 740px;
				height: 148px;
				margin-bottom: 16px;
				display: flex;
				img {
					width: 36px;
					height: 36px;
					margin-right: 8.5px;
				}
				.trump-main {
					width: 695.6px;
					height: 148px;
					background-image: url("./assets/title01bg.png");
					padding: 11px 14px 12px 22.5px;
					background-size: cover;
					position: relative;
					.cl1 {
						font-size: 16px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
						margin-bottom: 5px;
					}
					.cl2 {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
					}
					.cl3 {
						position: absolute;
						top: 11px;
						right: 14px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 30px;
						color: rgb(95, 101, 108);
					}
				}
			}
			.mask {
				width: 740px;
				height: 76px;
				margin-bottom: 16px;
				display: flex;
				img {
					width: 36px;
					height: 36px;
					margin-right: 8.5px;
				}
				.mask-main {
					width: 695.6px;
					height: 76px;
					background-image: url("./assets/title02bg.png");
					padding: 11px 14px 12px 22.5px;
					background-size: cover;
					position: relative;
					.cl1 {
						font-size: 16px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
						margin-bottom: 5px;
					}
					.cl2 {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
					}
					.cl3 {
						position: absolute;
						top: 11px;
						right: 14px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 30px;
						color: rgb(95, 101, 108);
					}
				}
			}
			.malaby {
				width: 740px;
				height: 98px;
				margin-bottom: 16px;
				display: flex;
				img {
					width: 36px;
					height: 36px;
					margin-right: 8.5px;
				}
				.malaby-main {
					width: 695.6px;
					height: 98px;
					background-image: url("./assets/title03bg.png");
					padding: 11px 14px 12px 22.5px;
					background-size: cover;
					position: relative;
					.cl1 {
						font-size: 16px;
						font-weight: 700;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
						margin-bottom: 5px;
					}
					.cl2 {
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 24px;
						color: rgb(59, 65, 75);
					}
					.cl3 {
						position: absolute;
						top: 11px;
						right: 14px;
						font-size: 16px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						line-height: 30px;
						color: rgb(95, 101, 108);
					}
				}
			}
		}
	}
}
</style>

<style>
.common-prompt-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;
	max-width: 1000px;
}

.common-prompt-popper.el-popper .el-popper__arrow::before {
	background-color: rgb(59, 65, 75) !important;
	border-color: rgb(59, 65, 75) !important;
}
</style>
