<template>
	<view>
		<uni-nav-bar  :statusBar="true" left-icon="left"   title="Review" color="#000000"   :fixed="true" @clickLeft="back">
			<block slot="right">
				<view class="nav_right">
					<button @click="reviewSub">Submit</button>
				</view>
			</block>
		</uni-nav-bar>
		<view class="body" v-for="(item,index) in orderDate.order_goods " :key="index">
			<view class="order_popup_commodity">
				<view class="good_info" >
					<view class="good_info_left ">
						<view class="good_info_image">
							<image :src="item.goods_thumb || item.goods_img" mode=""></image>
						</view>
						<view class="left_info">
							<view class="info_name">{{item.goods_name}}</view>
							<view class="left_info_bottom">
								<view class="info_lable" v-if="item.goods_attr">
									<text>{{item.goods_attr |goodsAttr}}</text>
									<image src="/static/img/bottom.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="review">
				<view class="review_title">
					<text>Score</text>
					<uni-rate size="22"  disabledColor="red" v-model="query.comment_rank"  active-color="red" :is-fill="false" class="rate" v-if="reviewType==0"/>
					<uni-rate size="22"  disabledColor="red" v-model="query1.comments[index].comment_rank"  active-color="red" :is-fill="false" class="rate" v-else/>
				</view>
				<view class="review_content">
					<image src="../../static/img/write.png" mode=""></image>
					<textarea placeholder="Write reviews" v-if="reviewType==0" v-model="query.comment"></textarea>
					<textarea placeholder="Write reviews" v-else v-model="query1.comments[index].comment"></textarea>
				</view>
				<view class="reason_upload">
					<view class="reason_upload_item" @click="UploadVideo">
						<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""v-if="!VideoSrc"></image>
						<image :src="VideoSrc" class="upload_item_camera" mode="" v-else></image>
						<view>Upload the video</view>
					</view>
					<view class="reason_upload_item" @click="Upimg" >
						<image src="/static/img/camera.png" class="upload_item_camera" mode="" v-if="!imgSrc"></image>
						<image :src="imgSrc" class="upload_item_camera" mode="" v-else></image>
						<view>Upload pictures</view>
					</view>
					
					<view class="reason_upload_item reason_upload_item1">
						<!-- <image :src="" class="upload_item_image" mode=""></image> -->
					</view>
					
				</view>
				<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {defaultRequest2,defaultRequest3} from '../../api/index.js'
	export default {
		data() {
			return {
				orderDate:{},
				// 评论状态 0、单个评论 1批量评论
				reviewType:0,
				query:{
					_action:'commentordergoods',
					order_id:'',
					order_sn:'',
					rec_id:'',
					goods_id:'',
					comment:'',
					comment_rank:'',
					commentlabels:''
				},
				query1:{
					_action:'commentorder',
					order_id:'',
					order_sn:'',
					comments:[]
				},
				VideoSrc:'',
				imgSrc:''
			}
		},
		methods:{
			// 提交评论内容
			reviewSub(){
				let data
				if(this.reviewType==0){
					this.commentordergoods()
				}else{
					// data=this.query1
					this.commentordergoods1()
				}
				console.info(data)
			},
			// 单个评论内容
			commentordergoods(){
				defaultRequest2(this.query).then(res=>{
					console.info(res)
					if(res.error==0){
						uni.showToast({
							icon:'none',
							title:'Comment successful!'
						})
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}
				})
			},
			// 批量评论内容
			commentordergoods1(){
				defaultRequest2(this.query1,'comments').then(res=>{
					console.info(res)
					if(res.error==0){
						uni.showToast({
							icon:'none',
							title:'Comment successful!'
						})
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}
				})
			},
			
			back(){
				uni.navigateBack()
			},
			// 上传视频
			UploadVideo(){
				var that = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function (res) {
						console.log(res)
					 that.VideoSrc = res.tempFilePath;
									}
				})
			},
			
			// 上传图片
			Upimg(){
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			}
		},
		onLoad(e) {
			let datas=JSON.parse(e.data)
			this.orderDate=datas
			if(datas.order_goods.length>1){
				this.reviewType=1
				this.query1.order_id=datas.order_id
				this.query1.order_sn=datas.order_sn
				datas.order_goods.map(item=>{
					let data={
						rec_id:item.rec_id,
						goods_id:item.goods_id,
						comment:'',
						comment_rank:'',
						commentlabels:item.goods_attr.replace(/\s\n/g,' ')
					}
					this.query1.comments.push(data)
				})
			}else{
				this.query.order_id=datas.order_id
				this.query.order_sn=datas.order_sn
				this.query.rec_id=datas.order_goods[0].rec_id
				this.query.goods_id=datas.order_goods[0].goods_id
				this.commentlabels=datas.order_goods[0].goods_attr.replace(/\s\n/g,' ')
			}
		},
		filters:{
			goodsAttr(e){
				return e.replace(/\s\n/g,';');
			}
		}
	}
</script>


<style lang="scss" scoped>
	.review{
		padding: 0 26rpx;
		padding-top: 35.33rpx;
		
		.review_title{
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 32rpx;
			margin-bottom: 44rpx;
			.rate{
				margin-left: 24.67rpx;
			}
		}
		.review_content{
			display: flex;
			image{
				width: 29.33rpx;
				height: 29.33rpx;
			}
			textarea{
				font-size: 28rpx;
				font-weight: 400;
				width: 100%;
				height: 113.33rpx;
				margin-left: 4rpx;
			}
		}
		.reason_upload{
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 34.67rpx;
			.reason_upload_item{
				border: 1px dashed #D2D2D2;
				border-radius: 15rpx;
				width: 156rpx;
				height: 156rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 12rpx;
				color: #BFBCBC;
				margin-right: 23.33rpx;
				
				&:nth-child(3n+3){
					margin-right: 0;
				}
				.upload_item_camera{
					width: 72rpx;
					height: 54.67rpx;
					margin-bottom: 14rpx;
				}
				.upload_item_camera1{
					width: 72rpx;
					height: 72rpx;
					// margin-bottom: 14rpx;
					
				}
				.upload_item_image{
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
				}
			}
			.reason_upload_item1{
				position: relative;
				&::after{
					content: "";
					width: 30.67rpx;
					height: 30.67rpx;
					position: absolute;
					right: -12rpx;
					top: -12rpx;
					z-index: 99;
					background-image: url("@/static/img/close3.png");
					background-size: 100% 100%;
				}
			}
		}
		.reason_upload_tips{
			font-size: 20rpx;
			color: #666666;
		}
	}
	.uni-navbar{
		font-size: 32rpx;
		font-weight: bold;
	}
	.nav_right{
		
		
		button{
			width: 116.67rpx;
			height: 48rpx;
			background-color: black;
			margin: 0;
			line-height: 48rpx;
			border-radius: 24rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: white;
			padding-left: 0;
			padding-right: 0;
		}
	}
	.body{
		border-top: 14.67rpx #F6F5FA solid;
	}
	.order_popup_commodity{
		padding: 0 33.33rpx;
		border-bottom: 14.67rpx #F6F5FA solid;
	}
	
</style>