<template>
	<div class="pc_all">
		<!-- <PageTop></PageTop> -->

		<div class="content">
			<div class="top_title">
				<text class="pageTitle">编辑精选</text>

				<div class="r_input">
					<input
						v-model="form.keyword"
						placeholder="请输入搜索内容"
						class="input"
						@keyup.enter="getNewsList"
						@clear="getNewsList"
						@blur="getNewsList"
					/>
					<div class="input_button" @click="getNewsList">搜索</div>
				</div>
			</div>

			<div class="line"></div>

			<div class="r_list">
				<div class="list_item" v-for="(item, index) in newsList" :key="index">
					<div class="list_item_content">
						<text class="item_title" @click="goDetail(item)" v-html="item.title"></text>
						<text class="item_summary" v-html="item.summary"></text>

						<div class="item_bottom">
							<div>
								<text class="time">{{ item.source }}</text>
								<text class="time" style="margin-left: 15px">{{ formatTime(item.time) }}</text>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="width: 100%; display: flex; justify-content: center" v-if="newsList && newsList.length > 0">
				<el-pagination
					v-model:current-page="currentPage"
					:page-size="form.size"
					layout="prev, pager, next"
					:total="form.total"
					@current-change="currentChange"
					@size-change="sizeChange"
				/>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue';
// import PageTop from "@/pages/realtimeInfo/pc/components/PageTop.vue";
import dayjs from 'dayjs/esm/index';
import { Local, Session } from '/@/utils/storage';
import { editTopNews } from '/@/api/cankao';
import { useRoute, useRouter } from 'vue-router';

const pageSizes = ref([10, 20, 30, 40]);
const form = reactive({
	keyword: '',
	page: 1,
	size: 10,
	total: 10,
});
const currentPage = ref(form.page);

const route = useRoute();
const router = useRouter();

const pageType = ref(4);
const newsList = ref([]);

function formatTime(timestamp) {
	const date = new Date(Number(timestamp).toString().length === 10 ? timestamp * 1000 : timestamp);
	return (
		[date.getFullYear(), (date.getMonth() + 1).toString().padStart(2, '0'), date.getDate().toString().padStart(2, '0')].join('-') +
		' ' +
		[date.getHours().toString().padStart(2, '0'), date.getMinutes().toString().padStart(2, '0'), date.getSeconds().toString().padStart(2, '0')].join(
			':'
		)
	);
}

async function getNewsList() {
	// 编辑精选
	let { code, data } = await editTopNews({
		...form,
	});
	if (code == 200) {
		newsList.value = data.list;
		form.total = data.total;
		data.list.forEach((item) => {
			item.summary = item.summary.replace(form.keyword, "<span style='color: #007aff'>" + form.keyword + '</span>');
			item.title = item.title.replace(form.keyword, "<span style='color:  #007aff'>" + form.keyword + '</span>');
		});
	}
}

function goDetail(item) {
	let id = null;
	if (pageType.value != 4) {
		id = item.news_id;
	} else {
		id = item.id;
	}

	router.push({
		path: '/indexPC',
		query: {
			id: id,
			type: pageType.value,
		},
	});
	// uni.navigateTo({
	// 	url: '/pages/realtimeInfo/pc/indexPC?id=' + id + '&type=' + pageType.value,
	// });
}

function currentChange(page) {
	form.page = page;
	getNewsList();
}

onMounted(async (e) => {
	console.log('🚀 ~ route.query:', route.query);

	if (route.query?.token && (!Session.get('token') || Session.get('token') == 'undefined')) {
		uni.showLoading({
			title: '加载中',
			mask: true,
		});
		sendToken({
			token: route.query.token,
		}).then((res) => {
			uni.hideLoading();
			if (res.code == 200) {
				Session.set('token', res.data.token);
				Session.set('userPhone', res.data.phone);

				// 解构路由参数，排除token
				const { token, ...otherQuery } = route.query;
				// 若存在token，替换路由清除参数
				if (token) {
					router.replace({
						path: route.path, // 保持当前路径不变
						query: otherQuery, // 保留其他参数
					});
				}

				setTimeout(() => {
					window.location.reload();
				}, 500);
			}
		});
	} else {
		if (!Session.get('token') || Session.get('token') == 'undefined') {
			LoginShow.value = true;
		}
	}

	// 解构路由参数，排除token
	const { token, ...otherQuery } = route.query;
	// 若存在token，替换路由清除参数
	if (token) {
		router.replace({
			path: route.path, // 保持当前路径不变
			query: otherQuery, // 保留其他参数
		});
	}
	getNewsList();
});

const LoginShow = ref(false);
const isLoginStatus = ref();
// 关闭弹框
const handlePopupClose = () => {
	LoginShow.value = false;
};

// 登录成功之后的回调
const handlePopupSuccessCallback = () => {
	isLoginStatus.value = true;
	window.location.reload();
	// uni.navigateTo({
	//   url: "/pages/realtimeInfo/rankDetail?type=" + type,
	// });
};

// 登录失败之后的回调
const handlePopupErrorCallback = () => {
	console.log('登录失败');
};
</script>
<style scoped lang="scss">
.pc_all {
	background: #f5f7fd;
	width: 100vw;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content {
	background-color: white;
	width: 55vw;
	min-width: 100vw;
	min-height: 100vh;
	padding: 20px 30px;
}

.top_title {
	display: flex;
	align-items: center;

	.pageTitle {
		font-family: AlibabaPuHuiTiM;
		font-size: 26px;
		color: #1a1a1a;
		font-weight: bold;
	}

	.title_icon {
		width: 90px;
		height: 25px;
		margin-left: 10px;
	}
}

.line {
	width: 100%;
	height: 1px;
	background-color: #f0f0f0;
	margin-top: 25px;
}

.r_list {
	display: flex;
	flex-direction: column;
}

.list_item {
	display: flex;
	min-height: 100px;
	padding: 15px 0;
	border-bottom: 1px solid #f6f6f6;
	margin-top: 15px;

	.r_list_item_num {
		width: 50px;

		display: flex;
		text-align: center;
	}

	.list_item_num {
		margin-top: 5px;
		width: 20px;
		height: 20px;

		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;

		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 18px;
		color: #ffffff;
		padding-bottom: 2.5px;
	}

	.num1 {
		background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
		border-radius: 3px;
	}

	.num2 {
		background: linear-gradient(169deg, #a9c3e3 0%, #92b2e0 100%);
		border-radius: 3px;
	}

	.num3 {
		background: linear-gradient(169deg, #f2996e 0%, #f77741 100%);
		border-radius: 3px;
	}

	.nol_num {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 20px;
		color: #93a2b3;
		line-height: 28px;
		text-align: left;
		font-style: normal;
	}

	.list_item_content {
		display: flex;
		flex-direction: column;

		flex: 1;
	}

	.item_title:hover {
		color: #057cff;
	}

	.item_title {
		font-family: PingFangSC, PingFang SC;
		font-weight: bold;
		font-size: 20px;
		color: #1a1a1a;
		cursor: pointer;
	}

	.item_summary {
		font-family: PingFangSC, PingFang SC;
		font-weight: normal;
		font-size: 16px;
		color: #333333;
		margin-top: 10px;

		/* 必须：限制内容不溢出容器 */
		overflow: hidden;
		/* 必须：超出部分显示省略号 */
		text-overflow: ellipsis;
		/* 必须：将元素设置为webkit弹性盒模型（用于控制行数） */
		display: -webkit-box;
		/* 关键：限制显示的行数（这里设为2行） */
		-webkit-line-clamp: 2;
		/* 必须：设置弹性盒的排列方向为垂直（让文本换行） */
		-webkit-box-orient: vertical;

		/* 可选：调整行高和容器高度，确保刚好容纳2行文本 */
		line-height: 1.5;
		/* 行高 */
		max-height: 3em;
		/* 2行总高度 = 行高 × 2（1.5×2=3） */
	}
}

.item_bottom {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
	margin-bottom: 5px;

	.time {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #919191;
		line-height: 20px;
		text-align: left;
		font-style: normal;
	}

	.score {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 18px;
		color: #ffa800;
		line-height: 25px;
		text-align: right;
		font-style: normal;
	}
}

.search_btn {
	border: none;
	display: flex;
	width: 56px;
	height: 44px;
	padding: 8px 15px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	border-radius: 8px;
	background: #0062d9;
	margin-right: 5px;
}

.input {
	border: none;
	flex: 1;
	margin-left: 10px;
}

.input_button {
	display: flex;
	width: 140px;
	height: 100%;
	// padding: 8px 15px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	border-radius: 0 10px 10px 0;
	background: #007aff;

	color: white;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 18px;
	color: #ffffff;
	line-height: 25px;
	text-align: left;
	font-style: normal;
	cursor: pointer;
}

.r_input {
	background-color: white;
	border-radius: 10px;
	border: 1px solid #e3e3e3;
	flex: 1;
	height: 52px;
	display: flex;
	align-items: center;
	margin-left: 30px;
	margin-top: 3px;

	:deep(.el-input__inner::placeholder) {
		color: #ccced3;
		font-family: 'PingFang SC';
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	:deep(.el-input__wrapper) {
		box-shadow: 0 0 0 #fff;
	}
}
</style>
