<template>
	<view>
		<status-nav navBarTitle="我要评价" returnColor="#c2c2c2"></status-nav>
		<container-subgroup>
			<view slot="content" style="margin: 0 -30rpx;">
				<view class="bacf fon28 pad-sx30 pad-zy40">
					<view class=" bold disjbac fw line-h50">
						<view class="mar-y20">长沙XXXXXXXXX项目名称</view>
						<view>GD20220108-1002</view>
					</view>
					<view class="mar-s10 mar-x30" style="color: #6b6a6a;">服务时间：2022-01-11 15 : 27</view>
					<view class="radius20 pad30 dis" style="border: 2rpx solid #dcdcdc;">
						<image src="/static/public/icon-evaluate-pen.png" mode="widthFix" lazy-load style="width: 25rpx;height: 30rpx;"></image>
						<textarea v-model="serviceExperience" class="fon24 mar-z20 width100" style="height: 200rpx;" placeholder="写下您的服务体验，帮助我们更好的管理提升" placeholder-style="font-size:24rpx;color: #aaaaaa;" />
					</view>
					<view class="fon30 bold mar-sx30">上传图片</view>
					<view class="disac">
						<view @tap="chooseImg(index)" class="mar-y20" v-for="(item,index) in imgList" :key="index" style="background-color: #dcdcdc;">
							<view v-if="item.imgsrc==''" class="evaluate-addimg" style="width: 142rpx;height: 142rpx;"></view>
							<image v-else :src="item.imgsrc" mode="aspectFill" lazy-load style="width: 142rpx;height: 142rpx;vertical-align: middle;"></image>
						</view>
					</view>
				</view>
				<view class="bacf fon28 pad-sx30 pad-zy40 mar-s20">
					<view class="fon30 bold mar-sx30">您的评价</view>
					<view class="mar-s40 mar-x50" style="color: #545454;">
						<view class="mar-x40 disac"><text class="mar-y40">技术服务</text><rate :size="42" :gutter="40" :curentClick="0" v-model="rateNum" @change="chooseRate"></rate></view>
						<view class="disac"><text class="mar-y40">客服态度</text><rate :size="42" :gutter="40" :curentClick="1" v-model="attitudeNum" @change="chooseRate"></rate></view>
					</view>
				</view>
				<!-- 提交保存 -->
				<view class="person-btn" style="margin-top: 50rpx;">提交保存</view>
			</view>
		</container-subgroup>
	</view>
</template>

<script>
	import rate from '@/components/rate.vue';
	export default {
	    components:{
	        rate
	    },
		data() {
			return {
				imgList:[//上传图片数组
					{imgsrc:''},
					{imgsrc:''},
					{imgsrc:''}
				],
				rateNum:5,//技术服务评分
				attitudeNum:5,//客服态度评分
				serviceExperience:''//服务体验
			}
		},
		methods: {
			// 选择图片
			chooseImg(index){
				uni.chooseImage({
					count:1,
					sourceType:['album','camera'],
					sizeType:['compressed'],
					success: (res) => {
						this.imgList[index].imgsrc = res.tempFilePaths[0];
					}
				})
			},
			chooseRate(arr){
				switch (arr[1]){
					case 0:
					 this.rateNum = arr[0];
						break;
					case 1:
					 this.attitudeNum = arr[0];
						break;
				}
			   
			},
		}
	}
</script>

<style>

</style>