<template>
	<view>
		<view class="evaluate">
			<view class="goods_data">
				<image :src="goodData.img" mode=""></image>
				<view class="right">
					<p class="goods_name">{{goodData.title}}</p>
					<p class="goods_sku">{{goodData.goods_sku_text}}</p>
					<p class="goods_price">
						<text style="font-size: 24upx;">数量x{{goodData.number}}</text>
						<text :style="{color:colors}">￥{{goodData.money}}</text>
					</p>
				</view>
			</view>
			<view class="Rate">
				<p>整体评价</p>
				<view class="star">
					<image :src="item.img" mode="" v-for="(item,index) in stars" :key="index" @click="setStar(item,index)"></image>
				</view>
			</view>
			<view class="pingjia_box">
				<textarea placeholder="说说您的感受..." maxlength="-1" v-model="comment" />
				</view>
		<p class="youhui" style="border-bottom: none;">
			<text class="text1">上传图片</text>
			<text class="text3">(最多3张)</text>
		</p>
		<view class="img_box" >
			<view class="img_list" v-for="(item, index) in imgUrl" :key="index">
				<block v-if="item.type == 1">
					<image :src="item.url" mode="" class="imgs" @click="previewImg(item.url)"></image>
					<image z-index="9999" src="/static/images/search/close.png" mode="" class="close" @tap="delImg(index)"></image>
				</block>
				<block v-if="item.type == 2">
					<video :src="item.url" :poster="item.poster" :controls="false" :show-center-play-btn="false" :show-play-btn="false" :enable-progress-gesture="false">
							<cover-view class="covers"></cover-view>
							<cover-image v-if="showVideo == false" class="imgs" src="/static/images/goods/bofang.png" mode="" @click="onshowVideo(item.url)"></cover-image>
							<cover-image v-if="showVideo == false" src="/static/images/search/close.png" mode="" class="video_close" @tap="delImg(index)"></cover-image>
					</video>
				</block>
			</view>
			<view class="addImg"v-if="imgUrl.length < 3"  @tap="onChoose">
				<image src="/static/images/shexiang.png" mode=""></image>
				<p>添加图片/视频</p>
			</view>
		</view>
	</view>
	<view class="btns" :style="{background:colors}" @click="submit">提交评价</view>
	<!-- 预览视频弹窗APP 小程序 -->
	<view class="mask" v-if="showVideo == true" @touchmove.stop.prevent="ondefault" @click="hideShow">
		<view class="close">
			<image src="/static/images/goods/close.png"></image>
		</view>
	</view>
	<view class="previewvideo" v-if="showVideo == true">
		<view class="videos">
			<video class="nowvideos" id="nowVideo" v-if="showVideo == true" :src="videos" :autoplay="showVideo"
			 :show-center-play-btn="true" :show-mute-btn="true" :show-fullscreen-btn="false"></video>
		</view>
	</view>
	<!-- 用来承载H5预览视频的 -->
	<view style="position: absolute;top: -999upx;left: -999upx;">
		<video ref="newVideo" id="newVideo" :src="videos"
		:autoplay="showVideo"
		 :show-center-play-btn="false" :show-mute-btn="true" :show-fullscreen-btn="false"></video>
	</view>
	</view>
</template>
<script>
var app = getApp();
export default {
	data() {
		return {
			value: 5,
			showVideo:false,
			isH5: false,
			videos:'',
			comment:'',
			platform:'',
			imgUrl:[],//模拟上传后从后台获得的图片和视频
			goodData:{},
			colors:'',
			stars: [
				{id: 1,types: true,img:'/static/images/home/stars.png'},
				{id: 2,types: true,img:'/static/images/home/stars.png'},
				{id: 3,types: true,img:'/static/images/home/stars.png'},
				{id: 4,types: true,img:'/static/images/home/stars.png'},
				{id: 5,types: true,img:'/static/images/home/stars.png'},
			],
			starNoImg:'/static/images/home/star-no.png',
			starImg:'/static/images/home/stars.png',
			starValue: 5
		};
	},
	created() {
		this.platform = uni.getSystemInfoSync().platform  //判断当前是安卓还是ios 然后进行适配
		this.newVideo = uni.createVideoContext('newVideo');
	},
	onLoad(options) {
		let goodData = JSON.parse(options.goodData)
		this.setData({
			colors: app.globalData.newColor,
			goodData:goodData
		});
	},
	methods: {
		delImg(index) {
			//删除图片
			this.imgUrl.splice(index, 1);
		},
		onChoose(){
			 uni.showActionSheet({
			    title:"选择上传类型",
			    itemList: ['图片','视频'],
			    success: (res) => {
			        console.log(res)
			        if(res.tapIndex == 0){
			            this.chooseImages()
			        } else {
			            this.chooseVideo()
			        }
			    }
			})
		},
		chooseImages() { //上传图片
			let that = this;
			uni.chooseImage({
				//该方法是调出选择图片的方法
				count: 1, //数量限制
				sizeType: ['original', 'compressed'], //可选 原图 或缩略图
				success: function(res) {
					//返回的值为本地的图片的链接
					console.log(res);
					// 这里模拟接口向imgUrl 里添加图片  后期调用接口时参照该方法
					if(that.imgUrl.length >= 3){ //最多上传3张 超出了提醒
						uni.showToast({
							title:'最多上传3个',
							icon:'none'
						})
					}else{ //模拟上传图片
						let img = {url:'/static/images/goods/four.jpg',type: 1}
						that.imgUrl.push(img)
					}
				}
			});
		},
		chooseVideo(){ //上传视频  
			 let that = this;
			 uni.chooseVideo({
			    count: 1,
			    sourceType: ['camera', 'album'],
			    success: function (res) {
				   console.log(res)  //如果需要对视频的长度和大小做判断 在此处进行获取和处理
				   // 下面是模拟上传视频 ↓
			       if(that.imgUrl.length >= 3){ //最多上传3张 超出了提醒
			       	uni.showToast({
			       		title:'最多上传3个',
			       		icon:'none'
			       	})
			       }else{ //模拟上传视频
					/**
					 *  ***重点注意 
					 *  视频的封面图因为需要做多端兼容 并且只允许是网络图片
					 *  所有建议是上传视频给后端之后，然后由后端对视频进行截取
					 * 	建议截取视频的第5帧来生成图片，并返回给前端
					 *  下面的poster是模拟后台返回的封面
					 */
			       	let video = {url:'https://fzdz.soft.haoyangsoft.com/uploads/system/videos/20200813/6c819d24ee6868aee33e150c4333329b.mp4',type: 2,poster:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603080909940&di=ac10c5f2c952dd1b40441bb696c55a88&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h640%2F20180127%2F369b-fyqzcxh1087346.jpg'}
			       	that.imgUrl.push(video)
					
			       }
			    }
			});
		},
		setStar(item,index){ //设置评价星星
			let that = this
			if(item.types == false){
				for(var i = 0; i<=index;i++){
					console.log(that.stars[i].types)
					that.stars[i].types = true
					that.stars[i].img = that.starImg
				}
			}else{
				for(var i = index+1; i<that.stars.length;i++){
					console.log(that.stars[i].types)
					that.stars[i].types = false
					that.stars[i].img = that.starNoImg
				}
			}
			this.$forceUpdate() //强制刷新视图
			let value = this.stars.filter((e)=>{
				return e.types == true
			})
			this.starValue = value.length
		},
		previewImg(url){ //预览图片
			let arr = []
			arr[0] = url
			uni.previewImage({
				urls:arr
			})
		},
		onshowVideo(video) { //预览视频
			this.videos = video
			// #ifndef H5
			this.showVideo = true
			// #endif
			// #ifdef H5
			// h5 在真机上测试
			if(this.platform == 'android'){ //判断是安卓还是ios来对视频做适配
				this.isH5 = true
				this.newVideo.play()
			}else{
				this.showVideo = true
			}
			// #endif
		},
		hideShow(){ //隐藏预览视频
			this.showVideo = false
		},
		submit(){ //提交时需要对存储图片和视频的数组进行操作 把视频和图片分离出来
		  let imgs = this.imgUrl.filter((e)=>{ //分离图片
			  return e.type == 1
		  })
		  let videos = this.imgUrl.filter((e)=>{
			  return e.type == 2
		  })
		 uni.showToast({
		 	title:'提交成功'
		 })
		 setTimeout(()=>{
		 	uni.navigateBack({
		 		delta:2
		 	})
		 },1500)
		},
		ondefault(){
			// 抛弃的方法
		}
	},
	onShow() {
		
	}
};
</script>

<style lang="scss" scoped>
@import "./evaluate.scss";
</style>
<style>
	page{
		background-color: #F8F8F8;
	}
</style>
