<template>
	<div id="normal-container" 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 :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="/" alt="" style="width: 100%; height: 100%" />
						</div>
						<div class="flex-1">
							<NewsDetail :article="newsDetail" />
						</div>
					</div>
					<div class="right-content">
						<!--轮播图-->
						<div class="card swiper-box">
							<el-carousel :autoplay="false" height="140px">
								<el-carousel-item v-for="(item, i) in banner" :key="i">
									<img :src="item.imageUrl || ''" alt="" style="height: 140px; width: 100%;" />
								</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 latestNewsList" :key="it.id" :item="it" @refresh="goToRelatedNewsDetail" />
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div style="margin-top: 44px">
					<div class="comment-title">Related news</div>
					<div class="flex" style="gap: 20px">
						<NewsCardItem v-for="it in relatedNewsList" :key="it.id" :item="it" @refresh="goToToolDetail" />
					</div>
				</div>
				<Comment comment-type="article" :id="newsDetail.id" @update:commentCount="handleCommentCountUpdate" />
			</div>
		</IntegratedLayout>
	</div>
</template>

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

export default {
	components: {
		NewsDetail,
		ArticleCardItem,
		NewsCardItem,
		ThumbBtn, CommentBtn,
		Comment,
		PopularToolList,
	},
	data() {
		return {
			newsDetail: {},
			news_slug: '',
			articleList: [],
			latestNewsList: [],
			type: '',
			commentCount: 0,
			fullscreenLoading: false,
		}
	},
	methods: {
		// 刷新工具详情数据
		refreshToolDetail() {
			if (this.news_slug) {
				this.getNewsDetail(this.news_slug);
			}
		},
		// 重新跳转路由
		goToToolDetail(item) {
			if (item.slug) {
				this.$router.push('/tools-detail?news_slug=' + item.slug + '&type=' + this.type)
			}
		},
		// 侧边新闻重新跳转路由
		goToRelatedNewsDetail(item) {
			if (item.slug && item.articleType) {
				this.$router.push('/tools-detail?news_slug=' + item.slug + '&type=' + item.articleType)
			}
		},
		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, type) {
			if (!type) {
				return false;
			}
			const params = {page, limit, articleType: type};
			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 getLatestArticleListData() {
			const params = {
				page: 1,
				limit: 21,
				excludeTypes: ['launches'],
				sortField: 'publish_time',
				sortOrder: 'desc',
			};
			const {data: res} = await this.$api.article.getArticleList(params);
			const {code, data} = res;
			if (code === 0 && data.list) {
				this.latestNewsList = data.list.filter(e => e.id !== this.newsDetail.id);
			}
		},
		async onLoad() {
			this.fullscreenLoading = true;
			this.news_slug = this.$route.query.news_slug;
			this.type = this.$route.query.type;
			if (this.news_slug && this.type) {
				await this.$store.dispatch('getBannerConfig');
				await this.getNewsDetail(this.news_slug);
				await this.getArticleListData(1, 4, this.type);
				await this.getLatestArticleListData();
			}
			this.fullscreenLoading = false;
		},
	},
	watch: {
		// 监听路由变化
		'$route'(to, from) {
			this.news_slug = to.query.news_slug;
			this.type = to.query.type;
			if (this.news_slug && this.type) {
				this.$router.go(0);
			}
		}
	},
	mounted() {
		this.onLoad();
	},
	computed: {
		relatedNewsList() {
			if (!this.newsDetail.id) {
				return [];
			}
			return this.articleList.filter(e => e.id !== this.newsDetail.id);
		},
		banner() {
			const bannerConfig = this.$store.getters.bannerConfig;
			if (bannerConfig.news && bannerConfig.news.length > 0) {
				return bannerConfig.news;
			}
			return [];
		},
	},
}
</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);
}
.content {
	padding-top: 192px;
	padding-bottom: 100px;
	.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;
		margin-bottom: 40px;
		.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;
				margin-bottom: 20px;
				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;
			}
			.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;
				}
			}
		}
	}
	.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>
