<template>
	<div class="comment-content">
		<div class="comment-title">
			Comment
			<span class="little-text">（{{commentList.length}} comments）</span>
		</div>
		<!--写评论-->
		<div class="write-comment-box card">
			<div class="flex-between-center mb-30">
				<div class="flex-1">
					<h2 class="content-title">Would you recommend Skywork?</h2>
					<div class="rate-box flex-between-center">
						<div class="flex items-center">
							<Rate v-model="rate" />
							<span class="little-text">Full score: 5 points</span>
						</div>
						<div class="flex items-center gap-16" v-if="alarmText">
							<img src="/logo/icon_alarm.png" alt="" />
							<p class="color-01">{{ alarmText }}</p>
						</div>
					</div>
				</div>
				<div class="comment-avatar flex-center">
					<img src="/logo/logo-rect.png" alt="" />
				</div>
			</div>
			<!--评论输入框-->
			<el-input
				type="textarea"
				placeholder="Please express your opinions"
				v-model="commentText"
				:maxlength="1000"
				show-word-limit
				class="comment-textarea"
			>
			</el-input>
			<div class="information-container flex-between-center">
				<el-input
					v-model="nickName"
					placeholder="NickName"
					:maxlength="50"
					class="nickname-input"
				/>
				<el-input
					v-model="email"
					placeholder="Email"
					:maxlength="50"
					class="email-input"
				/>
			</div>
			<div class="submit-button flex-center" @click="submitComment">
				<span>Submit</span>
				<img src="/ToolDetail/icon_arrow.png" alt="" />
			</div>
		</div>
		<!--评论列表-->
		<div class="comment-list card" v-if="commentList.length">
			<div class="list-header flex-between-center">
				<h2 class="content-title">All comments <span class="little-text">（{{commentList.length}} comments）</span></h2>
				<div class="more pointer" v-if="!checkMore" @click="checkMore = true">
					View more<i class="el-icon-arrow-right"></i>
				</div>
			</div>
			<div class="comment-list-wrap">
				<CommentItem v-for="(it, index) in filterList" :key="index" :item="it" />
			</div>
		</div>
	</div>
</template>

<script>
import CommentItem from "@/pages/ToolDetail/components/CommentItem.vue";
import Rate from "@/components/Rate.vue";

export default {
	components: {
		CommentItem,
		Rate,
	},
	props: {
		commentType: {
			type: String,
			default: 'tool',
		},
		id: {
			type: Number,
			default: 0,
		},
	},
	data() {
		return {
			commentText: '',
			nickName: '',
			email: '',
			rate: 0,
			commentList: [],
			checkMore: false,
			alarmText: '',
		}
	},
	methods: {
		// 获取评论列表
		async getCommentListData() {
			if (this.id) {
				const params = this.commentType === 'tool' ? {toolId: this.id} : {articleId: this.id};
				const {data: res} = await this.$api.comment.getToolCommentList(params);
				const {code, data} = res;
				if (code === 0 && data.list && data.list instanceof Array) {
					this.commentList = [...data.list];
					// 向父组件传递评论数量
					this.$emit('update:commentCount', this.commentList.length);
				} else {
					// 即使没有数据也更新评论数量为0
					this.$emit('update:commentCount', 0);
				}
			}
		},
		// 验证昵称
		validateNickname() {
			if (!this.nickName) {
				this.alarmText = 'Please enter your nickname';
				return false;
			} else if (this.nickName.length >= 50) {
				this.alarmText = 'Nickname should not exceed 50 characters';
				return false;
			}
			return true;
		},

		// 验证邮箱
		validateEmail() {
			if (!this.email) {
				this.alarmText = 'Please enter your email';
				return false;
			}

			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
			if (!emailRegex.test(this.email)) {
				this.alarmText = 'Please fill in the correct email address';
				return false;
			}

			if (this.email.length >= 50) {
				this.alarmText = 'Email should not exceed 50 characters';
				return false;
			}

			return true;
		},

		// 验证评论内容词数
		validateComment() {
			if (!this.commentText) {
				this.alarmText = 'Please enter your comment';
				return false;
			}

			const wordCount = this.commentText.length;
			if (wordCount > 1000) {
				this.alarmText = 'Comment should not exceed 1000 words';
				return false;
			}

			return true;
		},
		// 提交评论
		async submitComment() {
			if (!this.id) {
				return false;
			}
			// 清除之前的警告信息
			this.alarmText = '';

			// 验证各项输入
			const isCommentValid = this.validateComment();
			const isNicknameValid = this.validateNickname();
			const isEmailValid = this.validateEmail();

			if (!isCommentValid || !isNicknameValid || !isEmailValid) {
				return;
			}

			const params = {
				content: this.commentText,
				username: this.nickName,
				email: this.email,
				rating: this.rate,
			};

			this.commentType === 'tool' ? params.toolId = this.id : params.articleId = this.id;
			const {data: res} = await this.$api.comment.addToolComment(params);
			const {code} = res;
			if (code === 0) {
				this.$message.success('Comment submitted successfully');
				this.rate = null;
				this.commentText = '';
				this.nickName = '';
				this.email = '';
				await this.getCommentListData();
			} else {
				this.$message.error('Comment submission failed');
			}
		}
	},
	watch: {
		id: {
			handler(newVal) {
				if (newVal) {
					this.getCommentListData();
				}
			},
			immediate: true
		}
	},
	computed: {
		filterList() {
			if (!this.checkMore) {
				return this.commentList.slice(0, 5);
			} else {
				return this.commentList;
			}
		}
	},
}
</script>

<style scoped lang="scss">
.mb-30 {
	margin-bottom: 30px;
}
.gap-16 {
	gap: 16px;
}
.color-01 {
	color: #CD0E4AFF;
}
.card {
	background-color: #fff;
	border-radius: 12px;
	padding: 30px;
	box-shadow: 0 10px 30px 0 #0000000d;
}
.comment-content {
	padding-top: 40px;
	.comment-title {
		font-size: 30px;
		font-weight: 600;
		margin-bottom: 30px;
		font-family: 'Poppins-SemiBold';
		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;
		}
	}
	.write-comment-box {
		.rate-box {
			margin-top: 14px;
			font-family: 'Poppins-Regular';
			color: #E2E8F0;
			.little-text {
				margin-left: 30px;
				display: block;
			}
			img {
				width: 16px;
				height: 16px;
			}
		}
		::v-deep .el-textarea {
			.el-textarea__inner {
				border-color: #E2E8F0 !important;
				padding: 30px !important;
				height: 320px !important;
				&::placeholder {
					color: #E2E8F0 !important;
				}
			}
		}
		.information-container {
			margin-top: 20px;
			gap: 20px;
			::v-deep .el-input {
				.el-input__inner {
					border-color: #E2E8F0 !important;
					&::placeholder {
						color: #64748B !important;
					}
				}
			}
		}
		.submit-button {
			padding: 8px 38px;
			background: $header-backgroungd;
			border-radius: 12px;
			gap: 4px;
			margin-top: 30px;
			color: #fff;
			font-size: 18px;
			font-family: 'Poppins-Medium';
			width: fit-content;
			margin-left: auto;
			cursor: pointer;
			img {
				width: 24px;
				height: 24px;
			}
			&:active {
				opacity: 0.8;
			}
		}
		.comment-avatar {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			border: 1px solid #E2E8F0;
			margin-left: 24px;
			img {
				width: 24px;
				height: 24px;
			}
		}
	}
	.comment-list {
		margin-top: 20px;
		.list-header {
			margin-top: 30px;
			margin-bottom: 20px;
		}
		.comment-list-wrap {
			padding-right: 36px;
		}
	}
}
.little-text {
	font-size: 14px;
	font-family: 'Poppins-Regular';
	color: #64748B;
	vertical-align: middle;
	margin-left: 8px;
}
.content-title {
	font-size: 24px;
	font-weight: 600;
	font-family: 'Poppins-SemiBold';
	color: #1E293B;
	line-height: 24px;
	margin: 0;
}
.more {
	display: block;
	text-align: right;
	color: $grey-color;
	font-size: $mid-font-size;
	font-family: 'Poppins-Regular';
}
</style>
