<template>
	<view class="reply-page">
		<!-- 导航栏 -->
		<view class="navbox">
			<view class="status_bar"></view>
			<uni-nav-bar
			left-icon="left"
			title="回复"
			@clickLeft="goBack"
			color="#8B2316"
			
			:border="false"
			backgroundColor="#eee"
		>
			<template #right>
				<view class="nav-right" @click="confirmReply">
					<view class="btn-confirm" >确定</view>
				</view>
			</template>
		</uni-nav-bar>
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content">
			<view class="input-container">
				<textarea 
					class="reply-input" 
					v-model="replyText"
					:adjust-position="false"
					:placeholder="placeholder"
					:auto-height="true"
					:maxlength="maxLength"
					:disabled="isSubmitting"
				></textarea>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
import api from '@/api/api'
import { onLoad } from "@dcloudio/uni-app";
const video_uuid=ref('');
const name=ref('');
const comment_partent=ref('');
onLoad((options) => {
	video_uuid.value=options.video_uuid;
    placeholder.value='回复 '+options.name+':';
    comment_partent.value=options.comment_partent;
	name.value=options.name;
})

// 响应式数据
const statusBarHeight = ref(0)
const replyText = ref('')
const isSubmitting = ref(false)
const maxLength = 500
const placeholder = ref('')

// 计算属性
const replyLength = computed(() => replyText.value.length)
const canSubmit = computed(() => replyText.value.trim().length > 0 && !isSubmitting.value)
const remainingChars = computed(() => maxLength - replyLength.value)

// 监听器
watch(replyText, (newValue) => {
	if (newValue.length > maxLength) {
		replyText.value = newValue.slice(0, maxLength)
	}
})
const addCommentV2=async()=>{
	const res=await api.addCommentV2({
		article_uuid:video_uuid.value,
		type: "8",
		comment:replyText.value+'||'+name.value+'：'+comment_partent.value
	})
	if(res.code==200){
		uni.$emit('replySuccess',true);
		console.log('replySuccess')
		uni.showToast({ title: '回复成功', icon: 'none' })
		replyText.value = '';
		
		uni.navigateBack();
	}
}

onUnmounted(() => {
	// 清理工作
	//console.log('回复页面已卸载')
})

// 方法
const goBack = () => {
	uni.navigateBack();
}

const confirmReply = async () => {
    console.log(1111)
	if (!canSubmit.value) return
	
	isSubmitting.value = true
	
	try {
        addCommentV2();
	} catch (error) {
		console.error('回复失败:', error)
		uni.showToast({
			title: '回复失败，请重试',
			icon: 'error'
		})
	} finally {
		isSubmitting.value = false
	}
}

const startVoiceInput = () => {
	// 语音输入功能
	uni.showToast({
		title: '语音输入功能',
		icon: 'none'
	})
}

const clearText = () => {
	replyText.value = ''
}
</script>

<style lang="scss" scoped>
// 变量定义
$primary-color: #ff2442;
$text-color: #000000;
$text-light: #999999;
$text-medium: #333333;
$border-color: #e0e0e0;
$border-light: #f0f0f0;
$white: #ffffff;
$green: #00a86b;
$orange: #ff6900;
$blue: #007aff;

.reply-page {
	background-color: $white;
	min-height: 100vh;
}

// 状态栏样式
.status-bar {
	background-color: $white;

	.status-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px 16px;
		height: 20px;

		.time {
			font-size: 14px;
			font-weight: 600;
			color: $text-color;
		}

		.status-icons {
			display: flex;
			align-items: center;
			gap: 8px;

			.icon-group {
				display: flex;
				gap: 4px;

				.app-icon {
					width: 16px;
					height: 16px;
					border-radius: 3px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 10px;
					color: $white;

					&.green {
						background-color: $green;
					}

					&.orange {
						background-color: $orange;
					}

					&.red {
						background-color: $primary-color;
					}

					&.blue {
						background-color: $blue;
					}
				}
			}

			.network-info {
				display: flex;
				align-items: center;
				gap: 4px;

				.bluetooth-icon {
					width: 12px;
					height: 8px;
					background-color: $text-color;
					border-radius: 2px;
				}

				.speed {
					font-size: 10px;
					color: $text-color;
				}

				.signal-bars {
					display: flex;
					gap: 1px;
					align-items: end;

					.bar {
						width: 2px;
						background-color: $text-color;

						&:nth-child(1) { height: 3px; }
						&:nth-child(2) { height: 5px; }
						&:nth-child(3) { height: 7px; }
						&:nth-child(4) { height: 9px; }
					}
				}

				.network-type {
					font-size: 10px;
					color: $text-color;
					font-weight: 600;
				}

				.wifi-icon {
					width: 12px;
					height: 8px;
					background-color: $text-color;
					border-radius: 2px;
				}
			}

			.battery {
				font-size: 12px;
				color: $text-color;
				font-weight: 600;
			}
		}
	}
}
.btn-confirm {
	font-size: 28rpx;
	color: #8B2316;
	transition: opacity 0.3s ease;
}
// 导航栏样式
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background-color: $white;
	border-bottom: 1px solid $border-light;

	.nav-left, .nav-right {
		width: 60px;
		display: flex;
		align-items: center;
	}

	.nav-right {
		justify-content: flex-end;
	}

	.back-arrow {
		font-size: 24px;
		color: $primary-color;
		font-weight: bold;
	}

	.nav-title {
		font-size: 18px;
		color: $primary-color;
		font-weight: 600;
	}

	.confirm-btn {
		font-size: 16px;
		color: $primary-color;
		font-weight: 600;
		transition: opacity 0.3s ease;

		&.disabled {
			opacity: 0.5;
			color: $text-light;
		}
	}
}

// 主内容区域
.main-content {
	flex: 1;
	padding: 10px 16px;
	background-color: #fff;
	margin-top: calc(var(--status-bar-height) + 44px);
	.input-container {
		position: relative;
		background-color: $white;
		border: 1px solid $border-color;
		border-radius: 8px;
		min-height: 200px;
		padding: 16px;

		.input-placeholder {
			font-size: 14px;
			color: $text-light;
			margin-bottom: 8px;
		}

		.reply-input {
			width: 100%;
			min-height: 120px;
			font-size: 16px;
			color: $text-medium;
			line-height: 1.5;
			border: none;
			outline: none;
			resize: none;
		}

		.input-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12px;
			padding-top: 12px;
			border-top: 1px solid $border-light;

			.char-count {
				font-size: 12px;
				color: $text-light;
				transition: color 0.3s ease;

				&.warning {
					color: $primary-color;
				}
			}

			.action-buttons {
				display: flex;
				align-items: center;
				gap: 8px;

				.clear-btn {
					width: 32px;
					height: 32px;
					background-color: $border-light;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: background-color 0.3s ease;

					&:active {
						background-color: $border-color;
					}

					.clear-icon {
						font-size: 14px;
						color: $text-light;
					}
				}

				.voice-btn {
					width: 40px;
					height: 40px;
					background-color: $primary-color;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 2px 8px rgba(255, 36, 66, 0.3);
					transition: transform 0.2s ease;

					&:active {
						transform: scale(0.95);
					}

					.voice-icon {
						font-size: 18px;
						color: $white;
					}
				}
			}
		}
	}
}
</style>
