<script setup>
	// 
	import {
		watch,
		reactive
	} from 'vue';

	// 商品评价
	const rateValue = reactive(['', '非常差', '差', '一般', '好', '非常好'])
	// 
	const form = reactive({
		rate1: 0,
		rate2: 0,
		rate3: 0,
	})

	watch(form, (ev) => {
		console.log('form', ev)
	}, {
		deep: true,
	})
</script>

<template>
	<view class="app">
		<view class="container oh ptb30 imgList df fww">
			<view class="imgs upload wh140">
				<image class="wh140" src="/static/shop-upload-image.png" mode="aspectFill" />
			</view>
		</view>

		<view class="message container">
			<textarea class="txtplus mtb20 plr20" placeholder="展开说说对商品的想法吧" placeholder-class="placeholderStyle" />
		</view>

		<view class="stars container">
			<view class="item df aic mtb20">
				<view class="key w200">描述相符</view>
				<view class="value mlr20">
					<uni-rate v-model="form.rate1" :max="5" color="#d8d8d8" activeColor="#FF9B27" />
				</view>
				<view class="c999 f28">{{rateValue[form.rate1]}}</view>
			</view>
			<view class="item df aic mtb20">
				<view class="key w200">物流服务</view>
				<view class="value mlr20">
					<uni-rate v-model="form.rate2" color="#d8d8d8" activeColor="#FF9B27" />
				</view>
				<view class="c999 f28">{{rateValue[form.rate2]}}</view>
			</view>
			<view class="item df aic mtb20">
				<view class="key w200">服务态度</view>
				<view class="value mlr20">
					<uni-rate v-model="form.rate3" color="#d8d8d8" activeColor="#FF9B27" />
				</view>
				<view class="c999 f28">{{rateValue[form.rate3]}}</view>
			</view>
		</view>

		<view class="fill" style="height: 120rpx;"></view>

		<view class="footer plr30 bfff shadow">
			<view class="btn lg primary">发布评论</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.container {
		overflow: hidden;
		margin: 20rpx 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #333;
		font-size: 32rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}
</style>