<template>
	<view class="comment">
		<view class="main-container">
			<textarea @blur="bindTextAreaBlur" auto-height placeholder="发表你的评价吧，收货时心情如何？" maxlength="200" />
			<u-upload 
				ref="uUpload" 
				@on-uploaded="onUploaded" 
				:custom-btn="true" 
				:max-count="count" 
				:auto-upload="false"
			>
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<img src="../static/mine/27.png" />
				</view>
			</u-upload>
		</view>
		<view class="rate">
			<view>
				<view class="title">物流评分</view>
				<u-rate :count="5" current="1" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
			</view>
			<view>
				<view class="title">服务态度</view>
				<u-rate :count="5" current="1" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
			</view>
			<view>
				<view class="title">描述相符</view>
				<u-rate :count="5" current="1" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
			</view>
		</view>
		<view class="write-btn">发表意见</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			count: 4,
			logistics: 1,
			service: 1,
			describe: 1
		}
	}
};
</script>
<style lang="scss" scoped>
.comment {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	.main-container {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 10rpx;
		textarea {
			width: 100% !important;
			margin-bottom: 60rpx;
		}
		.slot-btn {
			width: 140rpx;
			height: 140rpx;
			background: rgba(236,236,236,1);
			border-radius: 10rpx;
			text-align: center;
			> img {
				margin-top: 48rpx;
				width: 54rpx;
				height: 49rpx;
			}
		}
	}
	.rate {
		background-color: #ffffff;
		padding: 33rpx 30rpx;
		> view {
			display: flex;
			&:not(:last-child) {
				margin-bottom: 35rpx;
			}
			.title {
				margin-right: 25rpx;
				font-size: 28rpx;
				color: rgba(51,51,51,1);
			}
		}
	}
	.write-btn {
		margin: 120rpx auto 0;
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 46rpx;
		font-size: 36rpx;
		color: rgba(255,255,255,1);
		text-align: center;
		line-height: 98rpx;
	}
}
</style>