<template>
	<view class="container">
		<view class="top-box">
			<u--textarea v-model="value1" placeholder="请输入内容" count></u--textarea>
		</view>

		<view class="bottom-box">
			<view class="text-item">
				<view class="item-l">
					<span>默认回复</span>
					<span class='l-text'>(点击文本使用)</span>
				</view>
				<view class="item-r" @click="handlerEdit">
					{{ editType ? '编辑' : '保存' }}
				</view>
			</view>
			<u--textarea :disabled='editType' v-model="value2" placeholder="请输入内容"></u--textarea>
		</view>

		<button class="btn" @click="handlerSubmitBtn">提交</button>
	</view>
</template>

<script>
	import {
		addEvaluateRecoverApi
	} from '@/api/merchant/evaluate';
	export default {

		data() {
			return {
				value1: '',
				value2: '亲爱的顾客，感谢您认可我们的服务，我们会努力做得更好，祝您生活愉快',
				editType: true,
				assessId: "",
			}
		},
		onLoad(query) {
			console.log(query, "query")
			this.assessId = query.assessId
		},
		methods: {
			async request(assessId, recoverMsg) {
				const res = await addEvaluateRecoverApi({
					assessId,
					recoverMsg
				})
				console.log(res, "sdad")
				
				if(res.code == "OK"){
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack(-1)
					}, 1500)
				}
			 
			},
			// 点击编辑按钮
			handlerEdit() {
				this.editType = !this.editType
			},
			// 点击提交按钮
			handlerSubmitBtn() {
				const value = this.value1 ? this.value1 : this.value2;
				this.request(this.assessId, value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F7F7F7 !important;
		min-height: 100vh;

		.top-box,
		.bottom-box {
			background-color: #fff;
			padding: 20rpx;
			margin: 20rpx;
		}

		.bottom-box {
			.text-item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.item-l {
					font-size: 28rpx;
					color: #000;

					.l-text {
						font-size: 26rpx;
						color: #CCCFD5;
						margin-left: 10rpx;
					}
				}

				.item-r {
					color: #1C76D2;
					font-size: 28rpx
				}
			}
		}

		.btn {
			background-color: #5992BB !important;
			color: #fff;
			font-size: 32rpx;
			border-radius: 40rpx;
			margin-top: 40rpx;
			width: 95%;
		}
	}

	::v-deep view.data-v-81cd9d32,
	scroll-view.data-v-81cd9d32,
	swiper-item.data-v-81cd9d32 {
		background-color: #F7F7F7 !important;
	}

	::v-deep .u-textarea__count.data-v-81cd9d32 {
		background-color: #F7F7F7 !important;
	}
</style>