<template>
	<view class="comment">
		<!-- <navbar pageName="评论"></navbar> -->
		<view class="content">
			<view class="text" v-if="title == '商户'">
				<textarea v-model="text" placeholder="请输入您的评论" />
			</view>
			<view class="text" v-else>
				<textarea v-model="comment" placeholder="请输入您的评论" />
			</view>

			<view class="fast">
				<view class="title">
					<text class="line" />
					<text>点击下方一键评论</text>
				</view>
				<template v-if="title == '商户'">
					<view class="tag">
						<view class="word"
							v-for="(item, index) in jstag" :key="index"
							@click="addJsComment(item)">
							{{item.value}}
						</view>
					</view>
				</template>
				<template v-else>
					<view class="tag">
						<view class="word"
							v-for="(item, index) in tag" :key="index"
							@click="addComment(item)">
							{{item.value}}
						</view>
					</view>

					<view class="title">
						<text class="line" />
						<text>评分</text>
					</view>
					<view class="star">
						<u-rate v-model="nStar" size="20" gutter="10"></u-rate>
					</view>
				</template>
			</view>

			<view class="btn_box" v-if="title == '商户'">
				<view class="btn" @click="jsSubmit">提交评价</view>
			</view>
			<view class="btn_box" v-else>
				<view class="btn" @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		commentOrder,
		tCommentUser
	} from '@/api/index.js'
	export default {
		data() {
			return {
				comment: '',
				text: '',
				orderNo: '',
				jsId: '',
				orderId: '',
				openId: '',
				name: '',
        nickName:'',
				nStar: 0,
				title: '',
				jstag: [{
						value: '素质高'
					},
					{
						value: '年轻'
					},
					{
						value: '素质低'
					},
					{
						value: '好说话'
					},
				],
				tag: [{
						value: '手法好'
					},
					{
						value: '专业'
					},
					{
						value: '态度好'
					},
					{
						value: '服务很满意'
					},
				]
			}
		},
		onLoad(options) {
			this.orderId = options.cId
			this.orderNo = options.orderNo

			this.jsId = options.cJsId
			this.name = options.cName

      this.nickName = options.nickName
			this.title = options.title
			this.openId = options.cOpenId
		},
		watch: {
			txt(txt) {
				if (txt.indexOf('\n') != -1) { //敲了回车键了
					uni.hideKeyboard() //收起软键盘
				}
			}
		},
		methods: {
			addComment(item) {
				this.comment = this.comment + ' ' + ' ' + item.value
			},
			addJsComment(item) {
				this.text = this.text + ' ' + ' ' + item.value
			},
			submit() {
				if (this.comment.trim() == '') return;
				let params = {
          openId:uni.getStorageSync('wx_copenid'),
					orderId: this.orderId,
					orderNo: this.orderNo,
					jsId: this.jsId,
					name: this.name,
					nickName: this.nickName,

					star: this.nStar,
					text: this.comment.trim(),
				}
				commentOrder(params).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '评论成功',
						})
						setTimeout(() => {
							// uni.switchTab({
							// 	url: '/pages/order/order'
							// })
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.msg,
						})
					}
				})
			},
			//商户评价客户
			jsSubmit() {
				let data = {}
				data.text = this.text.trim(),
				data.jsId = this.jsId,
				data.orderNo = this.orderNo,
				data.name = this.name,
				data.openId = this.openId
				tCommentUser(data).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '评论成功',
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.data.msg,
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment {
		width: 100vw;
		height: 100vh;
		background: #F7FFFF;

		.content {
			// padding: 30rpx;

			.text {
				margin-bottom: 28rpx;
				padding: 30rpx;

				background: linear-gradient(90deg, #E7FDFD 0%, #D3FBF9 100%);
			}

			textarea {
				border: 1px solid #dcdcdc;
				width: calc(100% - 40rpx);
				padding: 20rpx;
				border-radius: 16rpx;
				background: #FEFEFE;
				font-size: 26rpx
			}

			.fast {
				width: 686rpx;
				margin: 0 auto;
				background: linear-gradient(35deg, #FFFFFF 0%, #E4FFFD 100%);
				box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
				border-radius: 16rpx;
				padding: 24rpx;

				.title {
					font-weight: 600;
					display: flex;
					align-items: center;

					.line {
						display: inline-block;
						width: 6rpx;
						height: 34rpx;
						margin-right: 12rpx;
						border-radius: 4rpx;
						background: #20CBC2;
					}
				}

				.tag {
					width: 100%;
					margin-top: 24rpx;
					display: flex;
					flex-wrap: wrap;

					.word {
						margin-right: 24rpx;
						margin-bottom: 24rpx;
						padding: 4rpx 20rpx;
						background: rgba(32, 203, 194, 0.1);
						box-shadow: 0px 4rpx 12rpx 0px rgba(88, 209, 187, 0.1);
						border-radius: 8rpx;
						font-size: 28rpx;
					}
				}

				.star {
					margin-top: 12rpx;
				}
			}

			.btn_box {
				width: 100%;
				position: fixed;
				left: 0;
				bottom: 0;
				height: 116rpx;
				background: #FFFFFF;

				.btn {
					width: 670rpx;
					height: 76rpx;
					background: linear-gradient(90deg, #1AD7CE 0%, #21C9C1 100%);
					border-radius: 106rpx;
					color: #fff;
					margin: 20rpx auto;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	::v-deep.u-rate {
		// width: 100%;
		// margin-top: 30rpx;
		// padding: 0px 25% ;
		.u-star-wrap {
			margin: 0px 10rpx !important;
		}

		.u-icon {
			font-size: 50rpx !important;

		}
	}
</style>
