<template>
	<view>
		<view class="single_Phone">
			<span style="color:red;margin-right:5rpx;" v-show="CompData.IsRequire">*</span>{{CompData.Name}}
		</view>
		<view style="width:100%; height: 320rpx;position: relative;margin-bottom: 10px;" v-for="(x,y) in FileList" :key="y">
			
			<!-- <video class="mmyVideo" :id="'myVideo'+y" :src="x" :controls='controls' :show-center-play-btn='false'
				:show-fullscreen-btn='false' @fullscreenchange='videoControl'></video> -->
			<video class="mmyVideo" :id="'myVideo'+y" :src="x" controls='true'  ></video>
			<!-- <view
				style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;"
				@click="enlarge('myVideo'+y)">
				<u-icon name="play-circle-o" :size="70" color="#FFF"></u-icon>
			</view> -->
			<view style="width: 50rpx;height: 50rpx;position: absolute;right: 10rpx;top:10rpx;
					border-radius: 25rpx;
					background: #F30329;
					display: flex;
					align-items: center;
					justify-content: center;
				" @tap.stop="getdelete(y)">

				<u-icon class="u-icon" name="cross" size="30" color="#ffffff"></u-icon>
			</view>
		</view>
		<view style="border-bottom: 1px solid #e2e2e2;padding-bottom: 10px;" v-if="CompData.FileCount>0">
			<view slot="addBtn" class="slot-btn" @click="upvideo()" v-if=" FileList.length<CompData.FileCount">
				<image class="image"
					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616573063000_398.png"
					mode="widthFix"></image>
			</view>
		</view>
		<view style="border-bottom: 1px solid #e2e2e2;padding-bottom: 10px;" v-if="CompData.FileCount==0">
			<view slot="addBtn" class="slot-btn" @click="upvideo()" >
				1
				<image class="image"
					src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616573063000_398.png"
					mode="widthFix"></image>
			</view>
		</view>

		<view class="single_Remark" v-if="CompData.Remark">{{CompData.Remark}}</view>
	</view>
</template>

<script>
	
	export default {
		props: ["CompData",'index'],

		data() {
			return {
				action: this.host2 + "/api/File/UploadTencent",
				controls: false, //显示默认控件
				FileList:[],
			}
		},
		created() {
			this.FileList = JSON.parse((JSON.stringify(this.CompData.FileList)))
		},
		methods: {
			getdelete(index){
				this.CompData.FileList.splice(index,1)
				this.FileList.splice(index,1)
				this.$emit('success', this.CompData, this.index)
			},
			enlarge(file) {
				// 全屏
				
				this.videoContext = uni.createVideoContext(file);
				this.videoContext.requestFullScreen({
					direction: 0
				})

			},
			videoControl(e) {
				if (e.detail.fullScreen == false) {
					this.videoContext.stop()
					this.controls = false
				} else {
					this.videoContext.play()
					this.controls = true
				}
			},
			upvideo() {
				let that = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						if(that.CompData.FileSizeLimit>0){//大于0 进入判断
							let size = res.size
							if(res.size>(that.CompData.FileSizeLimit*1024*1024)){
								uni.showToast({
									title:'视频超出设定的大小请重新上传',
									icon:'none'
								})
								return
							}
						}
						that.upFile(res.tempFilePath, 1)
						uni.showLoading({
							title: '上传中...'
						})

					},
					fail(err) {
						console.log(err, )
					}
				});
			},
			upFile(filePath, type) {
				var newPath = "/korea/Test/Upload/";
				let action = this.UploadConfig().UploadUrl + "?fileSavePath=" + newPath;

			
			
				let that = this
				uni.uploadFile({
					url: action,
					filePath: filePath,
					name: 'file',
					formData: {
						user: 'tesdt'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						
						
						var jsonData=JSON.parse(uploadFileRes.data);
						      if (jsonData.StatusCode == 1) {
						       var url= that.UploadConfig().ImageUrl+ jsonData.FilePath;
						       that.FileList.push(url);
							   that.CompData.FileList.push(url)
							   that.$forceUpdate()
							   that.$emit('success', that.CompData, that.index)
						}
					},
					fail: function(res) {
						console.log(res)
						wx.showToast({
							title: '上传失败!',
							icon: 'none',
							duration: 1000
						})
					}
				});
			},
		}
	}
</script>

<style>
	.slot-btn {
		width: 220rpx;
		height: 220rpx;
		background: #F5F5F5;
		border-radius: 17rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.slot-btn .image {
		width: 54rpx;
		height: auto;
	}

	.mmyVideo {
		width: 100%;
		height: 100%;
	}
</style>
