<template>
	<view class="comment">
		<view class="main-container">
			<view class="goods-comment" v-for="(goods, index) in goodsList" :key="index">
				<view class="goods-info">
					<image :src="goods.goods_image"></image>
					<view class="goods-text">
						<view class="goods-name u-line-1">{{ goods.goods_name }}</view>
						<!-- <view class="goods-spec u-line-1">{{  }}</view> -->
					</view>
				</view>
				<view class="rate">
					<view class="title">描述相符</view>
					<u-rate :count="5" v-model="describe[index]" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
				</view>
				<u-input v-model="content[index]" type="textarea" height="100" :auto-height="true" placeholder="发表你的评价吧，收货时心情如何？" />
				<u-upload 
					:ref="'upload' + index" 
					:custom-btn="true" 
					:max-count="count" 
					:auto-upload="false"
					@on-uploaded="uploadImage"
					:action="action"
					:header="header"
					:form-data="formData"
					:name="fileName"
				>
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<image src="../static/mine/27.png"></image>
					</view>
				</u-upload>
			</view>
		</view>
		<view class="order-rate">
			<view class="rate">
				<view class="title">物流评分</view>
				<u-rate :count="5" active-color="#FF780F" inactive-color="#CCCCCC" v-model="logistics" gutter="20" size="32"></u-rate>
			</view>
			<view class="rate">
				<view class="title">服务态度</view>
				<u-rate :count="5" v-model="service" active-color="#FF780F" inactive-color="#CCCCCC" gutter="20" size="32"></u-rate>
			</view>
		</view>
		<view class="write-btn" @click="submitComment">发表意见</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			orderId: '',
			count: 4, // 最大图片数量
			logistics: 0, // 物流服务
			service: 0, // 服务态度
			action: this.$u.http.config.baseUrl + '/Upload/uploadfile', // 下面是上传图片的参数
			header: {
				"authorization": 'Bearer' + " " + uni.getStorageSync('token')
			},
			fileName: 'common',　// 与formData name 一样
			formData: {
				name: 'common', // 其他图片
			},
			describe: [],
			content: [],
			imageList: [],
			goodsList: [],
			imageIndex: 0, // 图片上传标识
		}
	},
	beforeMount() {
		// this.init();
		// this.getOrderInfo();
	},
	onLoad(option) {
		this.orderId = option.oid;
		this.getOrderInfo(option.oid);
	},
	methods: {
		uploadImage(lists) {
			let imageList = [];
			lists.forEach(res => {
				if(res.response.errCode == 0) imageList.push(res.response.data.file_name);
			})
			this.imageList[this.imageIndex] = imageList;
			if(this.imageIndex == this.goodsList.length - 1) this.addOrderEvaluate();
		},
		setModelKey(data) {
			data.forEach(() => {
				this.content.push('');
				this.describe.push(0);
				this.imageList.push([]);
			})
		},
		getOrderInfo(id) {
			this.$u.api.getOrderInfo({
				order_id: id,
			}).then(res => {
				if(res.errCode == 0) {
					// this.goodsList = res.data.extend_order_goods;
					this.goodsList = [1,2];
					this.setModelKey(this.goodsList);
				}
			})
		},
		verifyParams() {
			this.goodsList.forEach((_, index) => {
				if(this.$u.test.isEmpty(this.content[index])) {
					this.$u.toast('内容不可为空');
					return false;
				}
			})
			return true;
		},
		submitComment() {
			this.goodsList.forEach((_, index) => {
				this.imageIndex = index;
				const upload = 'upload' + index;
				this.$refs[upload][0].upload();
				
			})
			// let i = 0;
			// while(JSON.stringify(this.imageList[this.imageIndex]) != '[]' && i <= this.goodsList.length) {
			// 	this.imageIndex = i;
			// 	const upload = 'upload' + index;
			// 	this.$refs[upload][0].upload();
			// 	i++;
			// }
		},
		addOrderEvaluate() {
			if(!this.verifyParams()) return false;
			let files = [];
			console.log(this.imageList);
			this.imageList.forEach((item, index) => {
				files[index] = '';
				// console.log(item);
				item.forEach((img, idx) => {
					if(idx < item.length-1) {
						files[index] += img + ',';
					} else {
						files[index] += img;
					}
				})
			})
			let params = {
				id: this.orderId,
				content: this.content,
				scores_one: this.logistics,
				scores_two: this.service,
				scores_three: this.describe,
				file: files,
			};
			// console.log(params);
			// this.$u.api.updateOrderEvaluate(params).then(res => {
			// 	this.$u.toast(res.message);
			// })
		},
	},
};
</script>
<style lang="scss" scoped>
.comment {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	.main-container {
		margin-bottom: 10rpx;
		.goods-comment {
			background-color: #ffffff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			.goods-info {
				display: flex;
				margin-bottom: 40rpx;
				> image {
					width: 113rpx;
					height: 106rpx;
					border-radius: 5rpx;
					margin-right: 20rpx;
					background-color: antiquewhite;
				}
				.goods-text {
					.goods-name {
						width: 530rpx;
						font-size: 28rpx;
						color: rgba(0,0,51,1);
						margin-bottom: 20rpx;
					}
					.goods-spec {
						max-width: 300rpx;
						box-sizing: content-box;
						padding: 10rpx 15rpx;
						font-size: 24rpx;
						color: rgba(153,153,153,1);
						background:rgba(236,236,236,1);
						border-radius: 6rpx;
						display: inline-block;
					}
				}
			}
			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;
				> image {
					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);
			}
		// }
	}
	.order-rate {
		background-color: #ffffff;
		padding: 33rpx 30rpx;
	}
	.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>