<template>
	<view>
		<image @click="togglePopup" class="suspension-img" :class="{'rotated': isOpen}"
			src="https://des.dayunyuanjian.cn/epicSoul/taozi/suspension-icon.png" mode=""></image>

		<view v-if="isOpen" class="mask" @click="closeMessage"></view>

		<view v-if="isOpen" class="message-popup" :style="popupStyle">
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">我要留言</text>
					<view class="header-line"></view>
				</view>
				<input v-model="nickname" class="input-field" placeholder="我的昵称" maxlength="20" :disabled="loading" />
				<input v-model="email" type="text" class="input-field" placeholder="我的邮箱" :disabled="loading" />
				<textarea v-model="messageText" class="textarea-field" placeholder="我想对TA说：" maxlength="500"
					:disabled="loading"></textarea>
				<view class="char-count">
					<text>{{ messageText.length }}/500</text>
				</view>
				<view class="button-group">
					<button @click="closeMessage" :disabled="loading" class="btn-cancel">
						返回
					</button>
					<button @click="handleSubmit" :disabled="loading" class="btn-submit"
						:class="{'btn-disabled': !canSubmit}">
						<view v-if="loading" class="loading-icon"></view>
						<text>{{ loading ? '发布中...' : '发布' }}</text>
					</button>
				</view>
			</view>
		</view>

		<view v-if="toast.show" class="toast" :class="toast.type">
			<view class="toast-icon" :class="toast.type">
				<view v-if="toast.type === 'success'" class="success-icon"></view>
				<view v-if="toast.type === 'error'" class="error-icon"></view>
			</view>
			<text class="toast-message">{{ toast.message }}</text>
			<view class="toast-progress">
				<view class="progress-bar" :style="{animationDuration: '3s'}"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendMessage
	} from '@/static/js/common';

	export default {
		data() {
			return {
				isOpen: false,
				popupStyle: {
					opacity: 0,
					transform: 'translate(-50%, -50%) scale(0.9)'
				},
				nickname: "",
				email: "",
				messageText: "",
				loading: false,
				toast: {
					show: false,
					type: 'success',
					message: ''
				}
			};
		},
		computed: {
			canSubmit() {
				const hasNickname = this.nickname.trim().length > 0;
				const hasMessage = this.messageText.trim().length > 0;
				const validEmail = this.isValidEmail(this.email);

				return hasNickname && hasMessage && validEmail;
			}
		},
		watch: {
			nickname() {
				// 可以在这里添加日志输出
			},
			email() {
				// 可以在这里添加日志输出
			},
			messageText() {
				// 可以在这里添加日志输出
			}
		},
		methods: {
			togglePopup() {
				if (this.isOpen) {
					this.closeMessage();
				} else {
					this.openPop();
				}
			},
			openPop() {
				this.isOpen = true;
				setTimeout(() => {
					this.popupStyle = {
						opacity: 1,
						transform: 'translate(-50%, -50%) scale(1)'
					};
				}, 50);
			},
			closeMessage() {
				this.popupStyle = {
					opacity: 0,
					transform: 'translate(-50%, -50%) scale(0.9)'
				};
				setTimeout(() => {
					this.isOpen = false;
				}, 400);
			},
			isValidEmail(email) {
				if (!email.trim()) return false;
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				return emailRegex.test(email);
			},
			showToast(type, message) {
				this.toast.show = true;
				this.toast.type = type;
				this.toast.message = message;
				setTimeout(() => {
					this.toast.show = false;
				}, 3000);
			},
			handleSubmit() {
				if (!this.nickname.trim()) {
					this.showToast('error', '请填写昵称');
					return;
				}

				if (!this.isValidEmail(this.email)) {
					this.showToast('error', '请填写正确的邮箱地址');
					return;
				}

				if (!this.messageText.trim()) {
					this.showToast('error', '请填写留言内容');
					return;
				}
				this.submitMessage();
			},
			async submitMessage() {
				try {
					this.loading = true;
					const res = await sendMessage({
						nickname: this.nickname.trim(),
						email: this.email.trim(),
						content: this.messageText.trim()
					});

					if (res && res.code === 1) {
						this.nickname = "";
						this.email = "";
						this.messageText = "";
						this.showToast('success', '留言发布成功！');
						setTimeout(() => {
							this.closeMessage();
						}, 1500);
					} else {
						this.showToast('error', res?.msg || '发布失败，请重试');
					}
				} catch (error) {
					console.error('发布留言失败:', error);
					this.showToast('error', '网络错误，请重试');
				} finally {
					this.loading = false;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.suspension-img {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		right: 0;
		top: 18%;
		z-index: 9;
		transition: transform 0.3s ease;

		&.rotated {
			transform: rotate(180deg);
		}

		&:active {
			opacity: 0.8;
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 10;
		animation: fadeIn 0.3s ease forwards;
	}

	.message-popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.9);
		z-index: 11;
		width: 75%;
		max-width: 650rpx;
		transition: opacity 0.4s ease, transform 0.4s ease;
	}

	.popup-content {
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.2);
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		max-height: 80vh;
	}

	.popup-header {
		margin-bottom: 30rpx;
	}

	.popup-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #ec4899;
		margin-bottom: 10rpx;
	}

	.header-line {
		height: 2rpx;
		background-color: #ec4899;
		width: 100%;
	}

	.input-field {
		height: 90rpx;
		padding: 0 20rpx;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;

		&:focus {
			border-color: #ec4899;
		}
	}

	.textarea-field {
		text-indent: 10rpx;
		width: 100%;
		height: 300rpx;
		border: 2rpx solid #ccc;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;

		&:focus {
			border-color: #ec4899;
		}
	}

	.char-count {
		text-align: right;
		font-size: 24rpx;
		color: #888;
		margin-bottom: 20rpx;
	}

	.button-group {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.btn-cancel {
		flex: 1;
		background-color: #fff;
		color: #ec4899;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		border: 2rpx solid #ccc;
		font-size: 28rpx;
		text-align: center;

		&:active {
			background-color: #f5f5f5;
		}
	}

	.btn-submit {
		flex: 1;
		background-color: #f5a3cc;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		border: none;
		font-size: 28rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		&:active {
			background-color: darken(#ec4899, 10%);
		}
	}

	.loading-icon {
		width: 30rpx;
		height: 30rpx;
		border: 4rpx solid #fff;
		border-top-color: transparent;
		border-radius: 50%;
		margin-right: 10rpx;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	.toast {
		position: fixed;
		top: 160rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100000;
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(10rpx);
		max-width: 80%;
		animation: toastIn 0.5s ease forwards;

		&.success {
			background-color: rgba(34, 197, 94, 0.9);
		}

		&.error {
			background-color: rgba(239, 68, 68, 0.9);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes toastIn {
		from {
			opacity: 0;
			transform: translateX(-50%) translateY(-20rpx);
		}

		to {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}
	}

	.toast-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.success-icon {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 4rpx solid #fff;
		position: relative;

		&:after {
			content: '';
			position: absolute;
			top: 40%;
			left: 28%;
			width: 45%;
			height: 25%;
			border-left: 4rpx solid #fff;
			border-bottom: 4rpx solid #fff;
			transform: rotate(-45deg);
			animation: checkmark 0.8s ease-out forwards;
		}
	}

	.error-icon {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 4rpx solid #fff;
		position: relative;

		&:before,
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 60%;
			height: 4rpx;
			background-color: #fff;
			animation: crossmark 0.8s ease-out forwards;
		}

		&:before {
			transform: translate(-50%, -50%) rotate(45deg);
		}

		&:after {
			transform: translate(-50%, -50%) rotate(-45deg);
		}
	}

	.toast-message {
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
	}

	.toast-progress {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 0 0 16rpx 16rpx;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;
		background-color: rgba(255, 255, 255, 0.5);
		width: 100%;
		animation: progress 3s linear forwards;
	}

	@keyframes progress {
		from {
			width: 100%;
		}

		to {
			width: 0%;
		}
	}

	@keyframes checkmark {
		0% {
			opacity: 0;
			transform: scale(0) rotate(-45deg);
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 1;
			transform: scale(1) rotate(-45deg);
		}
	}

	@keyframes crossmark {
		0% {
			opacity: 0;
			transform: translate(-50%, -50%) scale(0) rotate(var(--rotation, 45deg));
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1) rotate(var(--rotation, 45deg));
		}
	}
</style>