<template>
	<view>
		<uni-nav-bar  :statusBar="true" left-icon="left"   title="Review" color="#FFF"   backgroundColor="#000" :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 " :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="#B22234" v-model="query.comment_rank"  active-color="#B22234" :is-fill="false" class="rate" v-if="reviewType==0"/>
					<uni-rate size="22"  disabledColor="#B22234" v-model="query1.comments[index].comment_rank"  active-color="#B22234" :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(index)">
						<!-- <view class="reason_upload_item1 margin_left" @click="deleteImg(VideoId)" v-model="VideoId" v-if="VideoSrc"></view> -->
						<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""v-if="!item.src"></image>
						<video :src="item.src" class="upload_item_image" mode=""  
						:id="item.src" 
						v-model="item.video_id"
						controls
						:autoplay="false"
						object-fit="contain"
						:poster="item.src"
						@play="play(item,index)"
						@fullscreenchange="fullscreenchange(item)"
						@timeupdate="timeupdate"
						v-else>
						</video>
						<view v-if="!item.src">Upload the video</view>
					</view>
					
								
					<view class="reason_upload_item " v-for="(item1,index1) in item.imglist" :key="index1">
						<view class="reason_upload_item1" @click="deleteImg(0,item1.id,item,index,item1,index1)" v-model="item1.id"></view>
						<image :src="item1.url" class="upload_item_image" mode="" @click="clickIMg(item1.url)"></image>
					</view>
					<view class="reason_upload_item" @click="Upimg(index)">
						<image src="/static/img/camera.png" class="upload_item_camera" mode=""  ></image>
						<!-- <image :src="imgSrc" class="upload_item_camera" mode="" v-else></image> -->
					   <view>Upload pictures</view>
					</view>	
				</view>
				<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</view>
				<view class="reason_upload_tips"></view>
				<view class="reason_upload_tipV" @click="deleteImg(1,item.video_id,item,index)"  v-if="item.src">Delete Video</view>
				<!-- <view style="height: 100rpx;width: 100rpx;">
					<image :src="imgSrc" class="upload_item_image" style="height: 100%;width: 100%;"mode="" ></image>
				</view> -->
			</view>
			
		</view>
	</view>
</template>

<script>
	import {defaultRequest,defaultRequest2,defaultRequest3} from '../../api/index.js'
	import { encryptDes, decryptDes ,encrypt_by_des } from '@/utils/des.js'
	import Base64 from 'base-64';
	import cryptoJS from "crypto-js"
	import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/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:'',
				VideoId:'',
				imgSrc:'',
				imglist:[],
				 videoPlay: false,
				videoUrl: '',
				upvlist:[],
				ids:'',
				is_play:true,//是否自动播放
				videoContext:'',
				json_data:{
						appcode:'DOPE+' ,//应用编码
						appchannel:'FXXXXHUAWEI' ,//应用发布渠道
						appver: '1.0.0',//应用版本
						appname:'cnic_buyer' ,//应用名称
						manufacturer:'HUAWEI' ,//设备生产商
						phonebrand:'HORNOR' ,//设备品牌
						phonetype:'X30' ,//设备型号
						phoneos:'ANDROID',// 设备系统		
				}
				

			}
		},
		methods:{
			
			
			// 播放时进入全屏
			play(item,index) {
				this.VideoId = item.src
				console.log(111)
				// this.is_play = item.is_play		
				
					this.videoContext = uni.createVideoContext(item.src, this)
					this.videoContext.requestFullScreen()
				
			},
			 
			//退出全屏时暂停
			fullscreenchange(item) {
				// if (!e.detail.fullScreen) {
				// 	uni.createVideoContext(item.src, this).pause();
				// } 
			},
			
			//视频播放
			timeupdate(e){
				console.log(e)
				console.log(this.VideoId)
				// if(e.detail.currentTime > 0){
				// 	this.is_play = false
				// 	// console.log(this.is_play)
				// 	uni.createVideoContext(this.VideoId, this).pause();
				// }
			},
			reviewSub(){
				
				this.ids = this.ids.substring(0,this.ids.lastIndexOf(','))
				this.query.attachments =  this.ids
				this.query1.comments.map(item =>{
					item.attachments = item.attachments.substring(0,item.attachments.lastIndexOf(','))
				})
			     // this.query1.comments = JSON.stringify(this.query1.comments)			
				// this.query1 = JSON.parse(this.query1)
				if(this.reviewType==0){
					this.commentordergoods()
				}else{
					this.query1.comments.attachments =  this.ids
					// data=this.query1
					this.commentordergoods1()
				}
				
				// defaultRequest(this.query).then( res =>{
				// 	console.log(res)
				// 	if(res.error==0){
				// 		uni.showToast({
				// 			icon:'none',
				// 			title:'Comment successful!'
				// 		})
				// 		setTimeout(function(){
				// 			uni.navigateBack()
				// 		},2000)
				// 	}
				// })
			},
			// 单个评论内容
			commentordergoods(){
				defaultRequest2(this.query).then(res=>{
					console.info(res)
					console.log(this.query)
					if(res.error==0){
						uni.showToast({
							icon:'none',
							title:'Comment successful!'
						})
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}
				})
			},
			// 批量评论内容
			commentordergoods1(){
				
				// let str = Object.assign(this.json_data,this.query1)
				// console.log(str)
				//  let data = encryptDes(JSON.stringify(str),'6780f04cf2e211ec86a8005056c00008');
				// let str2 = decryptDes(data,'6780f04cf2e211ec86a8005056c00008')
				// console.log(str2)
				// uni.request({
				// 	url:'https://lilbeattranapismits.dopeplus.com/mapi/api_v2011.php?appcode=DOPE+',
				// 	method:'POST',
				// 	data:data,
				// 	success(res) {
				// 			let res2= decryptDes(res.data,'6780f04cf2e211ec86a8005056c00008');
				// 			console.log(JSON.parse(res2))
				// 		},
				// })
				defaultRequest2(this.query1).then(res=>{
					console.info(res)
					console.log(this.query1)
					// let str = encryptDes(JSON.stringify(this.query1),'6780f04cf2e211ec86a8005056c00008');
					// console.log(str)
					if(res.error==0){
						uni.showToast({
							icon:'none',
							title:'Comment successful!'
						})
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}
				})
			},
			clickIMg(url){
				console.log(url)
				let list = []
				list.push(url)
				wx.previewImage({
					urls:list, //需要预览的图片http链接列表，
					current: url, 
					indicator:'number',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			
			back(){
				uni.navigateBack()
			},
			// 上传视频
			UploadVideo(index){
				var that = this
				const json_data={
						appcode:'DOPE+' ,//应用编码
						appchannel:'FXXXXHUAWEI' ,//应用发布渠道
						appver: '1.0.0',//应用版本
						appname:'cnic_buyer' ,//应用名称
						manufacturer:'HUAWEI' ,//设备生产商
						phonebrand:'HORNOR' ,//设备品牌
						phonetype:'X30' ,//设备型号
						phoneos:'ANDROID',// 设备系统
						_action:'uploadcommentfile',//上传图片
						atype: 2,//视频类型
						// afile:res.tempFiles[0]
				}
				let data = encryptDes(JSON.stringify(json_data),'6780f04cf2e211ec86a8005056c00008');
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function (res) {
						console.log(res)
					 // that.VideoSrc = res.tempFilePath;
					 uni.uploadFile({
					 			url: 'https://lilbeattranapismits.dopeplus.com/mapi/api_v2011.php?appcode=DOPE+', 
					 			filePath: res.tempFilePath,
					 			name: 'afile',
					 			formData:{
					 				'data':data
					 			},
					 			success: (uploadFileRes) => {
					 				console.log(uploadFileRes);
					 				 let data=decryptDes(uploadFileRes.data,'6780f04cf2e211ec86a8005056c00008');
					 			      console.log(JSON.parse(data));
					 				 let lists = JSON.parse(data)
									
									 that.VideoSrc = lists.data.attachment_url
									 console.log(that.orderDate)
									 that.orderDate[index].src = lists.data.attachment_url
									 that.orderDate[index].video_id = lists.data.attachment_id
									 that.orderDate[index].is_play = true
									 console.log(that.orderDate)
									 uni.setStorageSync('orderDate',that.orderDate)
									 
									 that.ids += lists.data.attachment_id +','
									 console.log(that.ids)
									 uni.startPullDownRefresh()
									 that.query1.comments[index].attachments +=(lists.data.attachment_id) +','
									  
									 uni.setStorageSync('ids',that.ids)
					 			}
					 		});
									}
				})
			},
			// 上传图片
			Upimg(index){
				var that = this
				let url
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						console.info(res)
						console.log(JSON.stringify(res.tempFilePaths));
						 const tempFilePaths = res.tempFilePaths
						 console.log(res.tempFiles[0])
						 
						uni.getImageInfo({
						src: res.tempFilePaths[0],
						success: (path) => {
							pathToBase64(path.path).then(base64 => {
								   // console.log(base64); // 这就是转为base64格式的图片
								   url = base64
							})
							.catch(error => {
								console.error(error)
							})
						}})
						
						const json_data={
								appcode:'DOPE+' ,//应用编码
								appchannel:'FXXXXHUAWEI' ,//应用发布渠道
								appver: '1.0.0',//应用版本
								appname:'cnic_buyer' ,//应用名称
								manufacturer:'HUAWEI' ,//设备生产商
								phonebrand:'HORNOR' ,//设备品牌
								phonetype:'X30' ,//设备型号
								phoneos:'ANDROID',// 设备系统
								_action:'uploadcommentfile',//上传图片
								atype: 1,//图片类型
								// afile:res.tempFiles[0]
						}
						//加密
						 let data = encryptDes(JSON.stringify(json_data),'6780f04cf2e211ec86a8005056c00008');
						 let file = encryptDes(JSON.stringify(res.tempFiles[0]),'6780f04cf2e211ec86a8005056c00008')
					
						uni.uploadFile({
									url:'https://lilbeattranapismits.dopeplus.com/mapi/api_v2011.php?appcode=DOPE+', 
									filePath: tempFilePaths[0],
									name: 'afile',
									formData:{
										'data':data
									},
									success: (uploadFileRes) => {
										console.log(uploadFileRes);
										 let data=decryptDes(uploadFileRes.data,'6780f04cf2e211ec86a8005056c00008');
									      console.log(JSON.parse(data));
										 let lists = JSON.parse(data)							
										  let imglist = []
										  // that.imglist.push({
											 //  id:lists.data.attachment_id,
											 //  url:lists.data.attachment_url
										  // })
										  // that.imgSrc = lists.data.attachment_url
										  
										 // this.imglist = this.imglist.push(lists.data)
										
										 that.orderDate[index].imglist.push({
											  id:lists.data.attachment_id,
											  url:lists.data.attachment_url
										  })
										 console.log(that.orderDate)
										  uni.setStorageSync('orderDate',that.orderDate)
										 uni.setStorageSync('orderDate',that.orderDate)
										 uni.startPullDownRefresh()
										 // that.ids.push(lists.data.attachment_id)									
										 that.ids += lists.data.attachment_id +','
										 console.log(that.query1)
										 console.log(that.ids)
										 that.query1.comments[index].attachments +=(lists.data.attachment_id) +','
										 console.log(that.query1) 
									}
								});
					
						
						
					}
				});
				console.log(this.imglist)
			},
			//删除图片和视频
			deleteImg(e,id,item,index,item1,index1){
				
			   if(e==0){
				   let id = item.id
				   console.log(item)
				   item.imglist.map(i =>{
					  
					   if(i.id == item1.id){
						   console.log(111)
						   item.imglist.splice(index1,1)
						   console.log(item.imglist)
						   this.orderDate[index].imglist = item.imglist
						   uni.setStorageSync('orderDate',this.orderDate)
					   }
				   })
			   }else{
				    this.orderDate[index].src =''
					this.orderDate[index].video_id =''
					
					 uni.setStorageSync('orderDate',this.orderDate)
			   }
			this.orderDate = uni.getStorageSync('orderDate')
			   console.log(this.orderDate)
				console.log(this.ids)
				// this.ids.map(i =>{
				// 	if(i==id){
				// 		this.ids=this.ids.slice(id)
				// 	}
				// })
				this.ids = this.ids.replace(id+',','')
				console.log(this.ids)
				
				// 多评论
				this.query1.comments.map( i =>{
					const id_index2 = i.attachments.indexOf(id)
					i.attachments = i.attachments.replace(id+',','')
					this.query1.comments[index].attachments = i.attachments
					console.log(i.attachments)
					console.log(typeof(i.attachments))
				})
				console.log(this.query1)
			}
		},
		onLoad(e) {
	
			let datas=JSON.parse(e.data)
			console.log(datas)
			// let orderDate = uni.getStorageSync('orderDate')
			// this.ids = uni.getStorageSync('ids')
			// if(orderDate){
			// 	this.orderDate = orderDate
				
			// }else{
			// 	this.orderDate=datas.order_goods
			// }
			
			
			
			this.query.order_id = datas.order_id
			this.query.order_sn = datas.order_sn
			this.query.goods_id = datas.order_goods[0].goods_id
			this.query.rec_id = datas.order_goods[0].grec_id
			this.orderDate=datas.order_goods
			this.orderDate.map(item =>{
				if(!item.imglist){
					item.imglist = []
				}
				item.src =''
				item.video_id =''
			})
			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,' '),
						attachments:''
					}
					this.upvlist.push({
						src:''
					})
					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,' ')
			}
			console.log(this.query1)
		},
		onPullDownRefresh(){
			 if(this.ids.length>0){
				 this.orderDate = uni.getStorageSync('orderDate')
			 }
			setTimeout(function () {
						uni.stopPullDownRefresh();
					}, 1000);
		},
		
		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;
			z-index:10;
			background-color: #fff;
			flex-wrap: wrap;
			margin-bottom: 34.67rpx;
			.reason_upload_item{
				border: 1px dashed #D2D2D2;
				background-size: 100% !important;
				border-radius: 15rpx;
				width: 156rpx;
				height: 156rpx;
				margin-top:5rpx;
				z-index:19;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				font-size: 12rpx;
				color: #BFBCBC;
				margin-right: 23.33rpx;
				margin-left: 6rpx;
				image{
					height: 100%;
					width: 100%;
				}
				&: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_camera2{
					width: 156rpx;
					height: 156rpx;
					z-index:10 !important;
					background-color: #ccc;
				}
				.upload_item_image{
					// background-color: aqua;
					width: 100%;
					height: 100%;
					border-radius: 15rpx;
					z-index:20 !important;
				}
			}
			.reason_upload_item1{
				position: relative;
				&::after{
					content: "";
					z-index:25;
					width: 30.67rpx;
					height: 30.67rpx;
					position: absolute;
					margin-left: 65rpx;
					top: -12rpx;
					
					background-image: url("@/static/img/close3.png");
					background-size: 100% 100%;
				}
			}
			.margin_left{
				margin-left: 30rpx;
			}
		}
		.reason_upload_tips{
			font-size: 20rpx;
			color: #666666;
		}
		.reason_upload_tipV{
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #8c0000;
		}
	}
	.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;
		padding-bottom: 40rpx;
	}
	.order_popup_commodity{
		padding: 0 33.33rpx;
		border-bottom: 14.67rpx #F6F5FA solid;
	}
	
</style>