<template>
	<div id="normal-container">
		<IntegratedLayout>
			<div class="content">
				<div class="title-text">{{ news_detail.title || '' }}</div>
				<div class="rate-box">
					<Rate v-model="news_detail.rating" readonly />
					<div class="flex" style="gap: 20px">
						<CommentBtn :comment-count="commentCount" />
					</div>
				</div>
				<div class="terms-item">
					<div class="item-title">
						<img src="/ToolDetail/icon_note.png" alt="">
						<span>Introduction: </span>
					</div>
					<div class="item-content">
						{{ news_detail.summary || '' }}
					</div>
				</div>
				<div class="terms-item">
					<div class="item-title">
						<img src="/ToolDetail/icon_clock.png" alt="">
						<span>Data update: </span>
					</div>
					<div class="item-content">{{ news_detail.publishTime || '' }}</div>
				</div>
				<div class="terms-item">
					<div class="item-title">
						<img src="/ToolDetail/like_icon.png" alt="">
						<span>Like: </span>
					</div>
					<div class="item-content">{{ news_detail.likeCount || 0 }}</div>
				</div>
				<div class="tags">
					<div class="tag-item" v-for="(it, index) in tagList" :key="index">{{ it }}</div>
				</div>
				<div class="diver"></div>
				<div class="container flex">
					<div class="left-content flex-1 flex flex-col">
						<!--<div class="sketch flex justify-between">-->
						<!--	<div class="flex items-center" style="gap: 8px">-->
						<!--		<img style="width: 18px; height: 18px" src="/launches/detail/icon_fly.png" alt="" />-->
						<!--		<div class="text">This is the <span style="color: #7B61FF">6</span> release of Sketch</div>-->
						<!--	</div>-->
						<!--	<div class="flex items-center more">-->
						<!--		<div>View more</div>-->
						<!--		<img src="/launches/detail/icon_arrow.png" alt="" />-->
						<!--	</div>-->
						<!--</div>-->
						<div class="card flex-1">
							<div class="article-content">
								<div v-html="news_detail.content || ''"></div>
							</div>
						</div>
					</div>
					<div class="right-content">
						<div class="card">
							<div class="flex items-center" style="margin-top: 20px">
								<img alt="" src="/launches/detail/icon_hourse.png" class="icon" />
								<div class="content-title">Company Information</div>
							</div>
							<div class="diver-line"></div>
							<ProjectItem :item="{name: 'Sketch.com', iconUrl: '/launches/web/sketch.png'}" />
							<ProjectItem :item="{name: 'Github.com', iconUrl: '/launches/web/github.png'}" />
							<ProjectItem :item="{name: 'Facebook.com', iconUrl: '/launches/web/facebook.png'}" />
							<ProjectItem :item="{name: 'Instagram.com', iconUrl: '/launches/web/instagram.png'}" />
							<ProjectItem :item="{name: 'Twitter.com', iconUrl: '/launches/web/twitter.png'}" />
							<div class="more flex items-center justify-between" style="margin-top: 20px">
								<div>A total of 8 projects were released</div>
								<img src="/launches/detail/icon_arrow.png" alt="" />
							</div>
						</div>
						<div class="card" style="margin-top: 20px">
							<div class="flex items-center" style="margin-top: 20px">
								<img alt="" src="/launches/detail/icon_finance.png" class="icon" />
								<div class="content-title">Special Financing</div>
							</div>
							<div class="diver-line"></div>
							<FinanceItem />
							<FinanceItem />
							<FinanceItem />
							<div class="flex justify-end" style="margin-top: 30px">
								<div class="more flex items-center justify-between" style="gap: 14px">
									<div>View more</div>
									<img src="/launches/detail/icon_arrow.png" alt="" />
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="related">
					<div class="related-title flex justify-between items-center">
						<div class="title">Related Products</div>
						<div @click="goToViewMore" class="more pointer">
							View more<i class="el-icon-arrow-right"></i>
						</div>
					</div>
					<div class="card">
						<div class="flex-between-center list">
							<RelatedTool :item="{
								title: 'Figma',
								summary: 'Easily create highly interactive prototypes',
								likeCount: 123,
								rating: 4.5
							}" />
							<RelatedTool :item="{
								title: 'Figma',
								summary: 'Easily create highly interactive prototypes',
								likeCount: 123,
								rating: 4.5
							}" />
							<RelatedTool :item="{
								title: 'Figma',
								summary: 'Easily create highly interactive prototypes',
								likeCount: 123,
								rating: 4.5
							}" />
						</div>
					</div>
				</div>
				<Comment comment-type="article" :id="news_detail.id" @update:commentCount="handleCommentCountUpdate" />
			</div>
		</IntegratedLayout>
	</div>
</template>

<script>
import CommentBtn from "@/pages/ToolDetail/components/CommentBtn.vue";
import Comment from "@/pages/ToolDetail/Comment/index.vue";
import RelatedTool from "@/pages/Launches/Detail/RelatedTool.vue";
import ProjectItem from "@/pages/Launches/Detail/ProjectItem.vue";
import FinanceItem from "@/pages/Launches/Detail/FinanceItem.vue";

export default {
	components: {FinanceItem, ProjectItem, RelatedTool, CommentBtn, Comment},
	data() {
		return {
			news_detail: {},
			commentCount: 0,
			news_slug: '',
		}
	},
	methods: {
		// 获取新闻详情
		async getNewsDetail(newsSlug) {
			const {data: res} = await this.$api.article.getArticleDetail(newsSlug);
			const {code, data} = res;
			if (code === 0 && data) {
				this.news_detail = {...data};
			}
		},
		stringJsonToObject(str) {
			// 将json字符串转为对象，捕获错误，当str为空或者转对象失败时默认返回空数组
			try {
				return JSON.parse(str);
			} catch (e) {
				console.error('Error parsing JSON string:', e);
				return [];
			}
		},
		goToViewMore() {
			// 返回上一页
			this.$router.go(-1);
		},
		handleCommentCountUpdate(count) {
			this.commentCount = count;
		},
	},
	watch: {
		'$route'(to, from) {
			// 当路由参数发生变化时重新加载数据
			if (to.query.news_slug !== from.query.news_slug) {
				this.news_slug = to.query.news_slug;
				if (this.news_slug) {
					this.getNewsDetail(this.news_slug);
				}
			}
		}
	},
	mounted() {
		this.news_slug = this.$route.query.news_slug;
		if (this.news_slug) {
			this.getNewsDetail(this.news_slug);
		}
	},
	computed: {
		tagList() {
			if (!this.news_detail.tags) {
				return [];
			}
			return this.stringJsonToObject(this.news_detail.tags || '[]');
		}
	},
}
</script>

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

	.diver {
		margin-top: 20px;
		border-top: 4px solid #E2E8F0;
		margin-bottom: 20px;
	}

	.title-text {
		font-size: 34px;
		color: #1E293B;
		font-family: 'Poppins-SemiBold', serif;
		font-weight: 600;
		margin-top: 80px;
	}

	.rate-box {
		margin-top: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn-wrapper {
			display: flex;
			align-items: center;
			gap: 20px;
		}
	}

	.terms-item {
		margin-bottom: 30px;
		display: flex;
		align-items: flex-start;
		gap: 7px;

		.item-title {
			display: flex;
			align-items: center;
			gap: 8px;
			color: #1E293B;
			font-family: 'Poppins-Medium', serif;

			img {
				width: 24px;
				height: 24px;
			}
		}

		.item-content {
			font-family: 'Poppins-Regular', serif;
			color: #64748B;
		}
	}

	.tags {
		display: flex;
		overflow-x: auto;
		gap: 12px;
		scrollbar-width: none;
		-ms-overflow-style: none;
		user-select: none;
		flex-wrap: wrap;
		width: 80%;

		.tag-item {
			font-family: 'Poppins-Medium', serif;
			flex-shrink: 0;
			padding: 4px 12px;
			border-radius: 12px;
			@include gradient-border($linear-gradient-start, $linear-gradient-end);
		}
	}

	.container {
		gap: 20px;

		.right-content {
			width: 372px;

			.diver-line {
				margin-top: 20px;
				border-top: 2px solid #E2E8F0;
			}

			.content-title {
				margin-left: 6px;
				font-family: 'Poppins-SemiBold', serif;
				font-size: 24px;
				color: #1E293B;
				font-weight: 600;
			}

			.icon {
				width: 24px;
				height: 24px;
			}

			.more {
				cursor: pointer;
				border-radius: 6px;
				padding: 8px 15px;
				border: 1px solid #e2e8f0;
				font-family: 'Poppins-Regular', serif;
				color: #64748B;

				img {
					width: 16px;
					height: 16px;
				}
			}
		}

		.left-content {
			.sketch {
				padding: 22px;
				background-color: #F5F4FF;
				border-radius: 12px;
				.text {
					font-family: 'Poppins-Regular', serif;
					color: #64748B;
					font-size: 18px;
				}

				.more {
					cursor: pointer;
					border-radius: 6px;
					padding: 8px 15px;
					border: 1px solid #e2e8f0;
					font-family: 'Poppins-Regular', serif;
					color: #64748B;

					img {
						width: 16px;
						height: 16px;
					}
				}
			}
		}
	}
	.related {
		margin-top: 60px;
		.related-title {
			.title {
				margin-bottom: 20px;
				font-size: 30px;
				color: #1E293B;
				font-family: 'Poppins-SemiBold', serif;
				font-weight: 600;
				&::before {
					content: '';
					display: inline-block;
					width: 6px;
					height: 26px;
					background: $header-backgroungd;
					margin-right: 8px;
					border-radius: 0 6px 6px 0;
				}
			}
			.more {
				display: block;
				text-align: right;
				color: $grey-color;
				font-size: $mid-font-size;
				font-family: 'Poppins-Regular', serif;
			}
		}
		.list {
			gap: 60px;
			margin: 40px 10px 40px 10px;
		}
	}
}
</style>
