<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>

			<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="CompData.FileList.splice(y,1),FileList.splice(y,1)">

				<u-icon class="u-icon" name="cross" size="30" color="#ffffff"></u-icon>
			</view>
		</view>
		<view>
			<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 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() {
			let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo")
				.MallBaseId : 1;
			this.action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
			this.FileList = JSON.parse((JSON.stringify(this.CompData.FileList)))
		},
		methods: {
			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) {
						that.upFile(res.tempFilePath, 1)
						uni.showLoading({
							title: '上传中...'
						})

					},
					fail(err) {
						console.log(err, )
					}
				});
			},
			upFile(filePath, type) {
				let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo")
					.MallBaseId :
					1;
				let action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
				let that = this
				uni.uploadFile({
					url: action,
					filePath: filePath,
					name: 'file',
					formData: {
						user: 'tesdt'
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						if (uploadFileRes.statusCode == 200) {
							let data = JSON.parse(uploadFileRes.data)
							// that.model.VideoUrl=data.data
							that.FileList.push(data.data)
							that.CompData.FileList.push(data.data)
							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>
