<template>
	<view class="hzIndex">
		<hzHeader title="菜单评价"></hzHeader>
		<view class="hzContent" style="padding-top: 200upx;">
		<view class="content">
			<view class="star-rating">
				<view class="label">
					<text>菜谱评分<text style="color: red;">*</text>：</text>
				</view>
				<stars-rating :starsIndex="starsIndex1" :isEditStars="true" @starsClick="evaluateStar(1,$event)"></stars-rating>
			</view>
			<view class="star-rating">
				<view class="label">
					<text>菜品评分<text style="color: red;">*</text>：</text>
				</view>
				<stars-rating :starsIndex="starsIndex2" :isEditStars="true" @starsClick="evaluateStar(2,$event)"></stars-rating>
			</view>
			<view class="star-rating">
				<view class="label">
					<text>食堂服务<text style="color: red;">*</text>：</text>
				</view>
				<stars-rating :starsIndex="starsIndex3" :isEditStars="true" @starsClick="evaluateStar(3,$event)"></stars-rating>
			</view>
			<view class="star-rating">
				<view class="label">
					<text>就餐环境<text style="color: red;">*</text>：</text>
				</view>
				<stars-rating :starsIndex="starsIndex4" :isEditStars="true" @starsClick="evaluateStar(4,$event)"></stars-rating>
			</view>
			<view class="star-rating">
				<view class="label">
					<text>卫生状况<text style="color: red;">*</text>：</text>
				</view>
				<stars-rating :starsIndex="starsIndex5" :isEditStars="true" @starsClick="evaluateStar(5,$event)"></stars-rating>
			</view>
			
			<view>
				<view style="margin: 20upx;font-size: 32upx;">
					<text>上传图片：</text>
				</view>
				<view class="img-box">
					<view class="img-item" v-for="(item, index) in imgs" :key="index">
						<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
						<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
					</view>
					<view class="img-item upload-btn" @click="chooseImg()" v-if="imgs.length < 3"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
				</view>
			</view>
			
			<view>
				<view style="margin: 20upx;font-size: 32upx;">
					<text>建议意见：</text>
				</view>
				<textarea style="border: 1px solid #e5e5e5;border-radius: 10upx;font-size: 28upx;padding: 10upx;" value="" placeholder="请输入建议或意见" maxlength="500" v-model="evContent" />
			</view>
		</view>
		<view  class="occupied" style="height: 300upx;"></view>
		<view class="footer-btn"><view class="btn" @click="submit()">提交</view></view>
		</view>
	</view>
</template>

<script>
import starsRating from '@/components/starsRating';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import { addEvaluate } from '@/common/api.js';
import { callbackRequest, getStorage, alertTip, sureAlterTip,convertImgToBase64,uploadImg } from '@/common/util.js';
export default {
	components: { uniRate,starsRating },
	data() {
		return {
			starsIndex1: 0, // 默认星级评价分数
			starsIndex2: 0, // 默认星级评价分数
			starsIndex3: 0, // 默认星级评价分数
			starsIndex4: 0, // 默认星级评价分数
			starsIndex5: 0, // 默认星级评价分数
			imgs:[],
			imgsId:[],
			userInfo: getStorage('userInfo'),
			evContent: '', //评价内容
			day: '', 
			foodType: '',
			year: '',
			weeks: '',
			grade: 5,
			items: [
				{
					value: '0',
					name: '非常满意'
				},
				{
					value: '1',
					name: '满意',
					checked: 'true'
				},
				{
					value: '2',
					name: '一般'
				}
			],
			current:0
		};
	},
	onLoad(option) {
		this.day = option.day;
		this.foodType = option.foodType;
		this.year = option.year;
		this.weeks = option.weeks;
		
	},
	methods: {
		evaluateStar() {
			console.log(...arguments)	
			console.log(arguments[0])
			let starstype = arguments[0]
			if(starstype==1){
				this.starsIndex1 = arguments[1];
			}if(starstype==2){
				this.starsIndex2 = arguments[1];
			}if(starstype==3){
				this.starsIndex3 = arguments[1];
			}if(starstype==4){
				this.starsIndex4 = arguments[1];
			}if(starstype==5){
				this.starsIndex5 = arguments[1];
			}	
		},
		submit() {
			console.log(this.starsIndex1)
			console.log(this.starsIndex2)
			console.log(this.starsIndex3)
			console.log(this.starsIndex4)
			console.log(this.starsIndex5)
			
			if (this.starsIndex1==0) {
				alertTip('请选择菜谱评分');
				return false;
			}
			if (this.starsIndex2==0) {
				alertTip('请选择菜品评分');
				return false;
			}
			if (this.starsIndex3==0) {
				alertTip('请选择食堂服务');
				return false;
			}
			if (this.starsIndex4==0) {
				alertTip('请选择就餐环境');
				return false;
			}
			if (this.starsIndex5==0) {
				alertTip('请选择卫生状况');
				return false;
			}
			// if (this.imgsId.length==0) {
			// 	alertTip('请选择图片');
			// 	return false;
			// }
			// if (!this.evContent) {
			// 	alertTip('请输入建议意见');
			// 	return false;
			// }
			let data;
			data = {
				method: addEvaluate,
				data: {
					userId: this.userInfo.id,
					userName: this.userInfo.userName,
					evaluate: this.evContent,
					recipeScore:this.starsIndex1,
					varietyScore:this.starsIndex2,
					canteenScore:this.starsIndex3,
					diningScore:this.starsIndex4,
					healthScore:this.starsIndex5,
					weeks:this.weeks,
					year:this.year,
					foodType:this.foodType,
					day:this.day,
					photo:this.imgsId.join(','),
				}
			}
			callbackRequest(data).then(res => {
				if (res.data.returnCode == 1) {
					sureAlterTip('', '评价成功', false).then(_ => {
						uni.navigateBack(1);
					});
				} else {
					alertTip(res.data.returnMsg);
				}
			});
		},
		// 上传图片
		async chooseImg() {
			let chec = 0;
			let sty = [];
			let _this = this;
			uni.showActionSheet({
				itemList:['拍照','相册'],
				success:function(resp){
					chec = resp.tapIndex;
					if (chec == 0) {
						sty = ['camera']; //从相册相机选择 
					} else {
						sty = ['album']; //从相册相机选择
					}
					uni.chooseImage({
						count:3,
						sizeType: ['compressed'],
						sourceType: sty, 
						quality: 1,
						success: async function(res){
							let resData = res.tempFilePaths;
							for(let i=0;i<resData.length;i++){
								if(_this.imgs.length>3){
									break;
								}
								uni.getImageInfo({
									src: resData[i],
									success:async (path) => {
										convertImgToBase64(path.path, async function(base64) {
											if(_this.imgs.length<3){
												// _this.imgs.push(base64);
												uni.showLoading({
													title: '图片上传中'
												})
												let blength = base64.length;
												let glength = 7500;
												if(blength<=glength){
													let uploadParam = {
														base64: base64,
														userId:  getStorage('userInfo').userId+i,
														groupEnd: '1'
													}
													await uploadImg(uploadParam).then(resu => {
														resu = resu.data ;
														uni.hideLoading();
														if (resu.returnCode != 1) {
															alertTip(resu.returnMsg);
														}else{
															_this.imgs.push(base64);
															_this.imgsId.push(resu.returnData+".jpg");
															
														}
													});
												}else{
													let fnum = parseInt(blength/glength);
													for(let j=1;j<fnum+1;j++){
														if(j==fnum){
															let groupBase = base64.slice((j-1)*glength);
															console.log(groupBase.length,"groupBaselength");
															let uploadParam = {
																base64: groupBase,
																userId: getStorage('userInfo').userId+i,
																groupEnd: '1'
															}
															await uploadImg(uploadParam).then(resu => {
																resu = resu.data ;
																if (resu.returnCode == 1) {
																	_this.imgs.push(base64);
																	_this.imgsId.push(resu.returnData+".jpg");
																} else {
																	uni.hideLoading();
																	alertTip(resu.returnMsg);
																	return;
																}
															});
														}else{
															let groupBase = base64.slice((j-1)*glength,glength*j);
															let uploadParam = {
																base64: groupBase,
																userId: getStorage('userInfo').userId+i,
																groupEnd: '0'
															}
															await uploadImg(uploadParam).then(resu => {
																resu = resu.data ;
																if (resu.returnCode == 1) {
																} else {
																	uni.hideLoading();
																	alertTip(resu.returnMsg);
																	return;
																}
															});
														}
														
													}
													uni.hideLoading();
												}
												
												
											}
											
										});
									},
								});
							}
							
						}
					});
				},
				fail:function(resp){
					console.log(resp.errMsg);
				}
			});
		},
		removeImg(index) {
			this.imgs.splice(index, 1);
			this.imgsId.splice(index, 1);
			// console.log(this.imgs);
			// console.log(this.imgsId);
		},
		
	}
};
</script>

<style lang="scss">
@import '@/static/css/common.scss';
.star-rating{
	padding: 20upx 20upx;
	display: flex;
	
	.label{
		font-size: 32upx;
		margin-right: 20upx;
	}
}

.img-box {
	overflow: hidden;
	padding-top: 20rpx;
	padding-bottom: 10rpx;
	
	.img-item {
		float: left;
		width: 190upx;
		height: 190upx;
		border: 1px solid #ddd;
		margin: 0 22rpx 20upx 0upx;
		position: relative;
		box-sizing: border-box;

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}

		.remove-btn {
			position: absolute;
			top: -18upx;
			right: -18upx;
			width: 44upx;
			height: 44upx;
			z-index: 2;
		}
	}

	.upload-btn {
		.img {
			width: 60upx;
			height: 60upx;
			margin: unset;
		}
	}
}

.starActive {
		color: #ff8000;
}
.main {
	min-height: 100vh;
	background: #f3f3f3;
}
.content {
	margin: 0 20upx;
	border-radius: 20upx;
	padding: 30rpx;
	padding-bottom: 80upx;
	background: #fff;
	position: relative;
	font-size: 26upx;
	textarea {
		width: 100%;
		height: 300rpx;
		font-size: 28rpx;
		color: #666;
		line-height: 40rpx;
	}
}
.grade {
	font-size: 28upx;
	padding: 30rpx;
	text {
		font-size: 28rpx;
		color: #444;
		font-weight: bold;
	}
}
.grade .rate {
	margin-left: 80upx;
	margin-top: -18upx;
}
.uni-title {
	padding: 20upx 0upx;
	margin-left: 20px;
	font-size: 18px;
}
.radio {
	padding: 0 20px;
	width: 100%;
	height: 300rpx;
	font-size: 30upx;
	color: #666;
	line-height: 40rpx;
	style: 'transform:scale(0.7)';
	.rediobox {
		font-size: 28upx;
		margin-top: 30upx;
		width: 38upx;
		height: 38upx;
		// line-height: 10upx;
	}
	.txt {
		margin-left: 18upx;
		font-size: 28upx;
		// margin-top: 20px;
		// width: 35upx;
		// height: 35upx;
		// line-height: 35upx;
	}
}


/deep/.rediobox .uni-radio-input,
/deep/.rediobox .uni-radio-wrapper {
	width: 100%;
	height: 100%;
	border: #e5e5e5;
}
/deep/ .rediobox .uni-radio-input {
	margin-right: 0;
}
</style>
