<template>
	<view class="video_box">
		<view class="video_con" v-for="(item, idx) in videoList" :key="item.id">
			<view class="title" v-if="idx==0">{{ idx + 1 }}.{{ item.name|getName(18)}}</view>
			<view class="title" v-else>{{ idx + 1 }}.{{ item.name | getName(9) }}</view>
			<video :src="item.value"></video>
			<!-- <cover-view class="check_box" @click="item.isChecked = !item.isChecked" v-if="isChange"> -->
			<view class="check_box" @click="change(item)" v-if="isChange">
				<text class="iconfont iconxuanzhong" v-if="item.isChecked"></text>
				<view class="box" v-else></view>
			</view>
		</view>
		<view class="fixed_box flexCC">
			<view class="sub_btn" v-if="!isChange" @click="isChange=true">下载视频</view>
			<view class="btns flexB" v-else>
				<view class="flexCC" @click="isChange=false">取消下载</view>
				<view class="flexCC" @click="downLoad">确定下载</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAllVideo
	} from '../../apis/shop.js';
	export default {
		data() {
			return {
				videoList: '',
				isChange: false
			};
		},
		onLoad() {
			this.getVideo();
		},
		methods: {
			change(item) {
				item.isChecked = !item.isChecked
			},
			getVideo() {
				getAllVideo().then(res => {
					if (res.code == 200) {
						let data = res.data
						data.map(i => {
							this.$set(i, 'isChecked', false)
						})
						this.videoList = data;
					}
				});
			},
			//下载视频
			downLoad() {
				let arr = []
				let list = this.videoList;
				list.map(i => {
					if (i.isChecked) {
						arr.push(i.value)
					}
				})
				if (arr.length === 0) {
					uni.showToast({
						title: '请至少选择一个下载项',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '下载中...',
					mask: true
				})
				let count = 0;
				for (let i = 0; i < arr.length; i++) {
					uni.downloadFile({
						url: arr[i],
						success: res => {
							if (res.statusCode === 200) {
								uni.showLoading({
									title: '保存中...',
									mask: true
								})
								count++;
								this.save(res.tempFilePath, count, arr.length)
							} else {
								uni.showToast({
									title: '下载视频失败',
									icon: 'none'
								})
								uni.hideLoading()
							}
						},
						fail: err => {
							uni.showToast({
								title: '下载视频失败',
								icon: 'none'
							})
							uni.hideLoading()
						}
					});
				}

			},
			save(path, count, len) {
				uni.saveVideoToPhotosAlbum({
					filePath: path,
					success: save => {
						if (count === len) {
							uni.hideLoading()
							uni.showModal({
								content: '教程已全部下载',
								showCancel: false
							})
						}

					},
					fail: function() {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
						uni.hideLoading()
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.video_box {
		padding: 0 0 150rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;

		.video_con {
			position: relative;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				padding: 30rpx 0;
			}

			video {
				width: 330rpx;
				height: 240rpx;
				border-radius: 24rpx;
				margin-right: 30rpx;
			}

			.check_box {
				position: absolute;
				top: 120rpx;
				right: 50rpx;
				z-index: 99999;

				.box {
					width: 50rpx;
					height: 50rpx;
					background: rgba(225, 225, 225, 0.5);
					border: 4rpx solid #FB231F;
					border-radius: 50%;
					z-index: 9999;
				}

				.iconfont {
					font-size: 50rpx;
					font-weight: bold;
				}
			}
		}

		.video_con:first-child {
			width: 100%;

			.title {
				font-size: 36rpx;
			}

			video {
				width: 690rpx;
				height: 312rpx;
			}
		}
	}

	.fixed_box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
		height: 100rpx;
		z-index: 9999999;

		.sub_btn {
			width: 702rpx;
			height: 88rpx;
		}

		.btns {
			view {
				width: 308rpx;
				height: 88rpx;
				background: #FFF4F3;
				border-radius: 44rpx;
				opacity: 1;
				border: 4rpx solid #FB231F;
				font-size: 32rpx;
				font-weight: bold;
				color: #FB231F;
			}

			view:last-child {
				background: linear-gradient(93deg, #F30000 0%, #FE4815 100%);
				color: #fff;
				margin-left: 30rpx;
			}
		}
	}

	// .video {
	// 	width: 690rpx;
	// 	margin: 0 auto;
	// 	text-align: center;
	// 	.title {
	// 		font-size: 36rpx;
	// 		font-weight: bold;
	// 		padding: 50rpx 0 30rpx;
	// 	}
	// 	video {
	// 		width: 100%;
	// 	}
	// }
</style>
