<template>
	<view class="body">
		
			<view class="reviews_item" v-for="(item,index) in List"  :key="index">
				<view class="reviews_item_title">
					<view class="reviews_title_user">
						<text>{{ item.user_name}}</text>
						<uni-rate size="18" :disabled="true" disabledColor="#8e1b2a" :value="4"  active-color="#8e1b2a" :is-fill="false"/>
					</view>
					<view class="reviews_title_time">{{ item.add_time}}</view>
				</view>
				<!-- <view class="reviews_item_color">Color:Multicolor</view> -->
				<view class="reviews_item_content">{{ item.content}}</view>
				<view class="reviews_item_image">
					<view class="reviews_image_content" v-for="(item1,index1) in item.attachments"  :key="item1.afile">
						<video :src="item1.afile" v-if="item1.afile.includes('mp4')" 
						:autoplay="false"
						:muted="true"
						:id="item1.afile"
						:poster="item1.afile"
						object-fit="contain"
						@play="play(item1.afile)"
						@fullscreenchange="fullscreenchange(item1.afile)"
						@timeupdate="timeupdate"
						class="comment_video"></video>
						<image :src="item1.afile" mode="" @click="clickimg(item,index1)"></image>
					</view>
				</view>
				<view class="more">
					<image src="../../static/img/more.png" mode="" @click="isShwo=true"></image>
					<view class="more_delete" v-show="isShwo">delete</view>
				</view>
			</view>
		<view class="empty_item" v-if="!List">
			<view class="empty_item_img">
				<image src = "../../static/img/comment.png" mode=""></image>
			</view>
			<view>No comment!</view>
			<!-- <view><button @click="gotoindex()">Go to see</button></view> -->
		</view>
		<view class="mask" v-show="isShwo" @click="isShwo=false"></view>
	</view>
</template>

<script>
	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'  
	import {defaultRequest,defaultRequest2,defaultRequest4} from '../../api/index.js'
	export default {
		data() {
			return {
				isShwo:false,
				query:{
					_action:'getmycomments',					
					page_index:1,
					page_size:10,
					
				},
				List:[],
				is_play:true,
				videoContext:''
			}
		},
		methods:{
			getList(){
				let query ={
					_action:'getmycomments',
					page_index:1,
					page_size:100,	
				}
				console.log(query)
				defaultRequest(query).then(res =>{
					console.log(res)
					if(res.error ==0){
						this.List = res.data
					}
				})
			},
			clickimg(item,index){
				console.log(item)
				let list = []
			   item.attachments.map(i =>{
				   	if(!i.afile.includes('mp4')){
						list.push(i.afile)
					}else{
						console.log(11)
					}
			   })
				wx.previewImage({
					urls:list, //需要预览的图片http链接列表，
					current: index, 
					indicator:'number',
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			timeupdate(e){
				 // console.log(e)
				 
			},
			play(e) {
				console.log(e)
				console.log(e)
					this.videoContext = uni.createVideoContext(e, this)
					this.videoContext.requestFullScreen()
				
			},
			 
			//退出全屏时暂停
			fullscreenchange(e) {
				console.log(e)
				
			},
		},
		onLoad(e) {
			 this.query.goods_id=e.goods_id
			this.getList()
		},
		
		// onShow() {
		// 	this.getList()
		// }
	}
</script>
<style>
	page{
		border-top: 14.67rpx #F6F5FA solid;
	}
</style>
<style lang="scss" scoped>
	.reviews_item {
		// height: auto !important;
		// box-sizing: border-box !important;
		white-space: nowrap;
		height: auto !important;
		width: 100%;
	}
	.body{
		padding: 0 32rpx;
	}
	.more{
		text-align: right;
		position: relative;
		// margin-top: 20rpx;
		image{
			width: 24rpx;
			height: 6.67rpx;
		}
		.more_delete{
			background-image: url(@/static/img/more_bf.png);
			background-repeat:no-repeat;
			background-size: 100% 100%;
			width: 102.67rpx;
			height: 67.33rpx;
			position: absolute;
			right: 0;
			bottom: 20rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 24rpx;
			z-index: 999;
		}
	}
	.mask{
		background-color: white;
		opacity: 0;
	}
</style>