<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.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="#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">
						<image src="/static/img/vedio.png" class="upload_item_camera1" mode=""v-if="!VideoSrc"></image>
						<video :src="VideoSrc" class="upload_item_camera2" mode="" 
						id="videoId" 
						object-fit="contain"
						@play="play"
						@fullscreenchange="fullscreenchange"
						v-else>
						</video>
						<view v-if="!VideoSrc">Upload the video</view>
					</view>
					
					<view class="reason_upload_item" @click="Upimg()">
						<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 class="reason_upload_item reason_upload_item1" v-if="imgSrc">
						<image :src="imgSrc" class="upload_item_image" mode="" ></image>
					</view>
				</view>
				<view class="reason_upload_tips">Upload JPG, PNG format, within 3M</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,defaultRequest5} 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:'',
				imgSrc:'',
				imglist:[],
				 videoPlay: false,
				videoUrl: '',
				ids:[]

			}
		},
		methods:{
			
			
			// 播放时进入全屏
			play(index) {
				let videoContext = uni.createVideoContext('videoId', this)
				videoContext.requestFullScreen()
			},
			 
			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId', this).pause();
				} 
			},
			//退出全屏时停止
			fullscreenchange (e){
				if(!e.detail.fullScreen){
					this.videoContext.stop()
				}
			},
			reviewSub(){
				this.query.attachments =  this.ids
				let data
				if(this.reviewType==0){
					this.commentordergoods()
				}else{
					// data=this.query1
					this.commentordergoods1()
				}
				console.info(data)
				defaultRequest(this.query).then( res =>{
					console.log(res)
				})
			},
			// 单个评论内容
			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
				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)
									 // this.video = lists.data
									 that.VideoSrc = lists.data.attachment_url
									 // console.log(this.VideoSrc,'000')
									 that.ids.push(lists.data.attachment_id)
									 console.log(that.ids)
					 				  // this.imglist = lists.data
					 				 // that.imglist = this.imglist.push(lists.data)
					 				 // console.log(that.imglist)
					 			}
					 		});
									}
				})
			},
			// 上传图片
			Upimg(){
				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');
						 // let afile = {
						 // 	afile:file
						 // } 
						// console.log(afile)
						// defaultRequest5(data,afile).then(res =>{
						// 	console.log(res)
						// })
						// let str =  {
						// 	_action: 'uploadcommentfile',
						// 	atype:1,
						// }
						// let _action = encryptDes(JSON.stringify('uploadcommentfile'),'6780f04cf2e211ec86a8005056c00008');
						// let type = encryptDes(JSON.stringify(1),'6780f04cf2e211ec86a8005056c00008');
						
						
						uni.uploadFile({
									url: 'https://en.meixx.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)
										  this.imglist = lists.data
										  that.imgSrc = lists.data.attachment_url
										  
										 // this.imglist = this.imglist.push(lists.data)
										 console.log(that.imgSrc)
										 that.ids.push( lists.data.attachment_id)
										 console.log(that.ids)
									}
								});
					
						
						
					}
				});
			}
		},
		onLoad(e) {
			let datas=JSON.parse(e.data)
			console.log(datas)
			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
			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;
				background-size: 100%;
				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;
				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;
				}
				.upload_item_image{
					// background-color: aqua;
					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>