<template>
	<app-layout>
		<view v-if="is_show">
			<form>
				<view v-for='(item,index) in appraiseData' :key='index'>
					<view class="main-left evaObj">
						<image mode="aspectFill" :src='item.goods_pic_url'></image>
						<view class="main-between-y">
							<view class="title t-omit-two">{{item.goods_name}}</view>
							<view class="main-between cross-center">
								<view class="price">￥2466.00</view>
								<view class="num">x1</view>
							</view>
						</view>
					</view>
					<view class="evalContent">
						<view class="item">
							<view class="main-left cross-center title">
								<image class="icon"
									src="https://t17.9026.com/web/statics/image/user-center/evaluate1.png" mode="">
								</image>整体评价
							</view>
							<textarea class="evalClass" placeholder-class="evalphlVal" v-model="item.content" maxlength="30" auto-height
								placeholder="为了我们更好的反馈，请您填写整体评价" />
						</view>
						<view class="item">
							<view class="main-left cross-center title">
								<image class="icon"
									src="https://t17.9026.com/web/statics/image/user-center/evaluate2.png" mode="">
								</image>材质质量
							</view>
							<textarea class="evalClass" placeholder-class="evalphlVal" v-model="item.quality_comment" maxlength="30" auto-height
								placeholder="为了我们更好的反馈，请您填写材质质量" />
						</view>
						<view class="item">
							<view class="main-left cross-center title">
								<image class="icon"
									src="https://t17.9026.com/web/statics/image/user-center/evaluate3.png" mode="">
								</image>商品风格
							</view>
							<textarea class="evalClass" placeholder-class="evalphlVal" v-model="item.style_comment" maxlength="30" auto-height
								placeholder="为了我们更好的反馈，请您填写材质质量" />
						</view>
					</view>
					<!-- <view class="uploddimg">
						<image src="https://t17.9026.com/web/statics/image/user-center/takePicture.png" mode=""></image>
						<view class="text">上传图片</view>
					</view> -->
					<view class='image-box'>
						<app-upload-image :sign='item.id' @imageEvent='imageEvent' :count="3" :maxNum='maxNum'>
						</app-upload-image>
					</view>
				</view>
				<button class="tij" @click="formSubmit">提交</button>
			</form>
		</view>
	</app-layout>
</template>

<script>
	import AppUploadImage from "@/components/basic-component/app-upload-image/app-upload-image.vue";
	export default {
		components: {
			'app-upload-image': AppUploadImage,
		},
		data() {
			return {
				id: null,
				maxNum: 6, //最大图片上传数量
				appraiseData: [],
				is_show: false,
			};
		},
		onLoad(options) {
			this.$commonLoad.onload(options);
			this.id = options.id;
			this.getOrderDetail();
		},
		methods: {
			// 上传图片
			imageEvent(e) {
				let sign = e.sign;
				let imageList = e.imageList;
				this.appraiseData.forEach(item => {
					if (item.id === sign) {
						item.pic_list = imageList;
						return false;
					}
				});
				this.appraiseData = this.appraiseData;
			},
			formSubmit() {
				uni.showLoading({
					title: '提交中'
				});
				this.$request({
					url: this.$api.order.appraise,
					method: 'post',
					data: {
						appraiseData: JSON.stringify(this.appraiseData),
						order_id: this.id,
					},
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						uni.redirectTo({
							url: `/pages/order/appraise-finish/index?id=${this.id}`,
						});
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false
						})
					}
				}).catch(() => {
					uni.hideLoading();
				});
			},
			getOrderDetail() {
				this.$showLoading();
				this.$request({
					url: this.$api.order.detail,
					data: {
						id: this.id
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code === 0) {
						let detail = res.data.detail;
						let appraise = [];
						detail.detail.forEach(function(item) {
							appraise.push({
								id: item.id,
								goods_pic_url: item.goods_info.pic_url ? item.goods_info.pic_url :
									item.goods.goodsWarehouse.cover_pic,
								goods_name: item.goods.goodsWarehouse.name,
								content: '',
								quality_comment:'',
								style_comment:'',
								pic_list: [],
								grade_level: 3,
							})
						});
						this.appraiseData = appraise;
						this.is_show = true;
					} else {
						uni.showModal({
							title: '',
							content: res.msg,
							showCancel: false,
						});
						// uni.navigateBack();
					}
				}).catch(() => {
					self.$hideLoading();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.image-box{
		padding: 40rpx 0 0 36rpx;
	}
	.tij {
		width: 678rpx;
		height: 90rpx;
		background: #A18353;
		border-radius: 6rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.uploddimg {
		width: 187rpx;
		height: 126rpx;
		background: #F4F4F4;
		opacity: 0.8;
		border-radius: 8rpx;
		margin: 56rpx 36rpx;
		padding-top: 31rpx;

		image {
			width: 48rpx;
			height: 38rpx;
			display: block;
			margin: 0 auto 14rpx;
		}

		.text {
			text-align: center;
			font-size: 20rpx;
			font-weight: 500;
			color: #666666;
		}
	}

	.evalContent {
		background-color: #fff;
		margin-top: 16rpx;

		.evalClass {
			width: 678rpx;
			min-height: 171rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin: 24rpx auto 0;
		}

		/deep/.evalphlVal {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			padding: 33rpx 31rpx;
		}

		.item {
			padding: 40rpx 36rpx 0;

			.title {
				
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 11rpx;
			}
		}
	}

	.evaObj {
		padding: 37rpx 37rpx 20px;
		background-color: #fff;

		image {
			width: 111rpx;
			height: 110rpx;
			margin-right: 24rpx;
		}

		.title {
			width: 530rpx;
			font-size: 26rpx;

			font-weight: 500;
			color: #666666;
		}

		.price {
			font-size: 24rpx;
			font-weight: 500;
			color: #222222;
		}

		.num {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
		}
	}
</style>
