<template>
	<view class="flex-col align-center">
		<view class="w700 radius padding margin-top" style="background-color: antiquewhite;">
			<text class="text-sm">我们非常重视您的消费体验，并希望能够通过您的反馈来改进我们的服务。请您分享真实的消费体验，感谢您的合作和支持！</text>
		</view>
		<view class="w700 margin">
			<text class="text-bold text-lg">{{ goodsTitle }}</text>
		</view>
		<view class="w700 radius padding bg-white">
			<view class="flex-row">
				<u-icon name="star-fill" size="40rpx" color="#ffaa00"></u-icon><text
					class="text-lg margin-left-xs">评分</text>
			</view>
			<view class="flex-row margin-top margin-bottom">
				<u-rate count="5" v-model="postData.commentStar" size="50rpx" activeColor="#ffaa00"></u-rate>
			</view>
		</view>
		<view class="w700 radius padding bg-white margin-top">
			<view class="flex-row">
				<u-icon name="edit-pen" size="40rpx" color="#ffaa00"></u-icon><text
					class="text-lg margin-left-xs">评价内容</text>
			</view>
			<view class="flex-row margin-top margin-bottom">
				<u--textarea v-model.trim="postData.commentDesc" placeholder="记录您的消费体验,为其他会员做购买参考" count
					height="100"></u--textarea>
			</view>
		</view>
		<view class="w750 padding margin-top" style="position: fixed; bottom: 0;">
			<u-button type="primary" text="提交" @click="commentOrder" throttleTime="500"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsTitle: '',
				postData: {
					id: null,
					commentStar: null,
					commentDesc: ''
				}
			}
		},
		methods: {

			async commentOrder() {
				if (this.postData.commentStar == null) {
					return this.$refs.uToast.show({
						message: '请对以上服务/商品进行评分~',
						type: 'error'
					})
				}
				if (this.postData.commentDesc.length < 5) {
					return this.$refs.uToast.show({
						message: '请至少输入5个字的评价~',
						type: 'error'
					})
				}

				const res = await this.$request({
					url: '/orderApi/commentOrder',
					method: 'POST',
					data: this.postData
				})

				this.$modal.msgSuccess('谢谢您评价成功')
				setTimeout(() => {
					this.$tab.reLaunch('/pages/tabBar/order/order')
				}, 500)

			}
		},
		onLoad(option) {
			this.goodsTitle = decodeURIComponent(option.goodsTitle)
			this.postData.id = option.orderId
		}
	}
</script>

<style>

</style>