<template>
	<div id="normal-container" class="daily-news-content" v-loading.fullscreen.lock="fullscreenLoading">
		<IntegratedLayout>
			<div class="content">
				<div class="views-title">{{ newsDetail.title || '' }}</div>
				<div class="views-header flex-between-center">
					<div class="description">
						{{ newsDetail.summary || '' }}
					</div>
					<div class="flex flex-col" style="gap: 16px">
						<div class="flex" style="gap: 20px">
							<ThumbBtn :like-count="newsDetail.likeCount || 0" :id="newsDetail.id || 0" type="article" @like-success="refreshToolDetail" />
							<CommentBtn :comment-count="commentCount" />
						</div>
						<div class="flex items-center justify-center" style="padding: 0 7px; gap: 8px">
							<img src="/ToolDetail/icon_clock1.png" alt="" style="width: 16px; height: 16px" />
							<div style="font-size: 14px; color: #869EC2; font-family: 'Poppins-Regular', serif; line-height: 18px">
								{{ formatDate(newsDetail.publishTime) }}
							</div>
						</div>
					</div>
				</div>
				<div class="container flex justify-between">
					<div class="left-content flex flex-col">
						<div class="card preview-wrapper">
							<img :src="newsDetail.coverImage || ''" alt="" />
						</div>
						<div class="flex-1">
							<NewsDetail :article="newsDetail" />
						</div>
						<div>
							<div class="comment-title">Related news</div>
							<div class="flex-between-center" style="gap: 20px">
								<NewsCardItem v-for="it in relatedNewsList" :key="it.id" :item="it" @refresh="goToRefreshPage" />
							</div>
						</div>
					</div>
					<div class="right-content">
						<!--轮播图-->
						<div class="card swiper-box">
							<el-carousel :autoplay="false" height="140px">
								<el-carousel-item v-for="item in 4" :key="item">
									<img style="width: 100%; height: 140px" alt="" src="/" />
								</el-carousel-item>
							</el-carousel>
						</div>
						<!--网站导航-->
						<div class="card pop-list">
							<div style="padding: 24px 4px">
								<PopularToolList />
							</div>
						</div>
						<!--文章列表-->
						<div class="card">
							<div style="padding: 24px 4px">
								<div class="clearfix">
									<img src="/logo/hot.png" :style="{marginRight: '6px'}" alt=""/>
									Latest Article
								</div>
								<div class="list-scroll">
									<div class="list">
										<ArticleCardItem v-for="it in 16" :key="it" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<Comment comment-type="article" :id="newsDetail.id" @update:commentCount="handleCommentCountUpdate" />
			</div>
		</IntegratedLayout>
	</div>
</template>

<script>
import ThumbBtn from "@/pages/ToolDetail/components/ThumbBtn.vue";
import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
import Comment from "@/pages/ToolDetail/Comment/index.vue";
import ArticleCardItem from "@/pages/DailyNews/components/ArticleCardItem.vue";
import NewsCardItem from "@/pages/DailyNews/components/NewsCardItem.vue";
import NewsDetail from "@/pages/DailyNews/NewsDetailIndex/NewsDetail.vue";
import PopularToolList from "@/pages/Home/components/PopularToolList.vue";

export default {
	components: {
		ThumbBtn,
		CommentBtn,
		Comment,
		ArticleCardItem,
		NewsCardItem,
		NewsDetail,
		PopularToolList,
	},
	data() {
		return {
			news_slug: '',
			newsDetail: {},
			articleList: [],
			commentCount: 0,
			fullscreenLoading: false,
		}
	},
	methods: {
		// 刷新工具详情数据
		async refreshToolDetail() {
			if (this.news_slug) {
				await this.getNewsDetail(this.news_slug);
			}
		},
		// 重置页面
		goToRefreshPage(item) {
			if (item.slug) {
				this.$router.push('/news-detail?news_slug=' + item.slug);
			}
		},
		formatDate(dateString) {
			if (!dateString) return '';
			const date = new Date(dateString);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const day = String(date.getDate()).padStart(2, '0');
			return `${year}-${month}-${day}`;
		},
		// 获取新闻详情
		async getNewsDetail(slug) {
			const {data: res} = await this.$api.article.getArticleDetail(slug);
			const {code, data} = res;
			if (code === 0) {
				this.newsDetail = {...data};
			}
		},
		// 获取相关文章列表
		async getArticleListData(page = 1, limit = 4) {
			const params = {page, limit, articleType: 'news'};
			const {data: res} = await this.$api.article.getArticleList(params);
			const {code, data} = res;
			if (code === 0 && data.list) {
				this.articleList = data.list;
			}
		},
		handleCommentCountUpdate(count) {
			this.commentCount = count;
		},
		async onLoad() {
			this.fullscreenLoading = true;
			this.news_slug = this.$route.query.news_slug;
			if (this.news_slug) {
				await this.getNewsDetail(this.news_slug);
				await this.getArticleListData();
			}
			this.fullscreenLoading = false;
		}
	},
	mounted() {
		this.onLoad();
	},
	watch: {
		$route(to, from) {
			this.news_slug = to.query.news_slug;
			if (this.news_slug) {
				this.$router.go(0);
			}
		}
	},
	computed: {
		relatedNewsList() {
			if (!this.newsDetail.id) {
				return [];
			}
			return this.articleList.filter(e => e.id !== this.newsDetail.id).slice(0, 3);
		}
	},
}
</script>

<style scoped lang="scss">
.card {
	padding: 16px;
	background-color: #FFFFFF;
	border-radius: 12px;
	box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.08);
}

.daily-news-content {
	flex: 1;
	overflow-y: auto;
	position: relative;
	.content {
		padding-top: 87px;
		padding-bottom: 120px;
		.gradient-title {
			font-family: 'Poppins-SemiBold', serif;
			font-size: 18px;
			font-weight: 600;
		}
		.views-title {
			font-family: 'Poppins-Bold', serif;
			font-size: 40px;
			font-weight: 700;
			margin-top: 78px;
		}
		.views-header {
			margin-top: 10px;
			.description {
				margin-right: 350px;
				font-family: 'Poppins-Medium', serif;
				font-size: 18px;
				color: #64748B;
			}
		}
		.container {
			gap: 20px;
			margin-top: 114px;
			.right-content {
				width: 372px;
				display: flex;
				flex-direction: column;
				gap: 20px;
				.list-scroll {
					overflow-y: auto;
					overflow-x: hidden;
					height: 1350px;
				}
				.swiper-box {
					height: 174px;
					::v-deep .el-carousel {
						.el-carousel__arrow {
							opacity: 0 !important;
							transition: none !important;
						}
						.el-carousel__indicators {
							.el-carousel__indicator {
								height: 4px !important;
								width: 12px !important;
								border-radius: 2.66px !important;
								border: 0.66px solid #2563eb !important;
								background: transparent !important;
								margin: 0 3px 0 3px !important;
								padding: 0 !important;

								.el-carousel__button {
									background-color: transparent;
								}

								&.is-active {
									border: none !important;
									width: 20px !important;
									background: linear-gradient(0deg, #2563EB 22%, #7B61FF 73%) !important;
								}

								// 重置其他可能的默认样式
								&:before,
								&:after {
									display: none !important;
								}
							}
						}
					}
				}
				.clearfix {
					display: flex;
					align-items: center;
					font-size: $larg-font-size;
					font-weight: bold;
					font-family: 'Poppins-SemiBold', serif;
				}
				.pop-list {
					.pop-item {
						display: grid;
						grid-auto-rows: 1fr;
						grid-template-columns: repeat(3, auto);
						justify-content: space-between;
						gap: 32px;

						.box {
							display: flex;
							flex-direction: column;
							align-items: center;

							.img-box {
								width: 50px;
								height: 50px;
								background: #FFFFFF;
								border-radius: 12px;
								border: 1px solid #E2E8F0;
								@include flex-center;
								margin-bottom: 12px;

								&:hover {
									transform: scale(1.15);
									cursor: pointer;
									@include gradient-border($linear-gradient-start, $linear-gradient-end);
									box-shadow: 0 5px 7px 0 #00000014;
								}
							}

							.tool-name {
								font-family: 'Poppins-Medium', serif;
								color: #64748B;
							}
						}
					}
				}
				.article-list {
					flex: 1;
				}
			}
			.left-content {
				flex: 1;
				gap: 20px;
				.preview-wrapper {
					height: 320px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.comment-title {
					font-size: 30px;
					font-weight: 600;
					margin-bottom: 30px;
					font-family: 'Poppins-SemiBold', serif;
					color: #1E293B;
					display: flex;
					align-items: center;
					&::before {
						content: '';
						display: inline-block;
						width: 6px;
						height: 26px;
						background: $header-backgroungd;
						margin-right: 8px;
						border-radius: 0 6px 6px 0;
					}
				}
			}
		}
	}
}
</style>
