<template>
	<view class="main_container">
		<!-- <view  class="show-img animate__animated animate__fadeInLeft"><image src="../../static/images/switch/1.jpg"></image></view>
		<view class="show-img animate__animated animate__fadeInRight"><image src="https://qiniu.aiyxlib.com/yuekan-6-shiguangji%402x.png"></image></view> -->
		<view class="show-content">
			<view v-for="(item,index) in show_materials" :key="index" :class="['show-item',item.material_type==1?'show-video':'']">
				<image :class="['animate__animated',item.material_type==0 ? item.effect :'']" v-show="item.material_type==0 && itemIndex == index" :src='linkUrl'></image>
				<video v-if="item.material_type==1" :src="linkUrl" :autoplay="autoplay" :loop="true" :controls="false" object-fit="fill"></video>
			</view>
		</view>
		<!-- <view class="show-video">
			<video src="http://qiniu.aiyxlib.com/Atlas跑酷的成功与失败｜2021【Boston Dynamics】.mp4" :autoplay="autoplay" :loop="true" :controls="false" object-fit="fill"></video>
		</view> -->
		<view class="show-audio"><image src="../../static/images/an-yy.png"></image></view>
		
		<!-- <view v-if="!deviceInfoShow" class="local-data">
			<text class="title">欢迎使用数字新视窗</text>
			<view class="data-info">设备ID : 123456789</view>
			<view class="data-info">设备账号 : 123456789</view>
			<view class="data-info">设备名称 : CVBBN2</view>
			<view class="count-down" @click="deviceInfoShow=true">{{ count }}</view>
		</view> -->
	</view>
</template>

<script>
import one from './show.js'
export default {
	components: {},
	data() {
		return {
			// 已登录情况显示6S得设备信息
			count: 6,
			deviceInfoShow: false,
			autoplay: false,
			// 素材
			show_materials: [],
			itemIndex: 0,
			linkUrl: '',
			timer: null,
			duration: null
		};
	},
	onLoad(){
		let result = one.data.data
		this.show_materials = result[1].show_materials
	},
	created(){
		this.atuo()
	},
	mounted() {
		// this.countdown();
		this.linkUrl = this.show_materials[this.itemIndex].deposit_url
		if(this.show_materials[this.itemIndex].material_type == 0){
				this.duration = this.show_materials[this.itemIndex].duration
		}
		this.changeImg()
	},
	methods: {
		changeImg(){
			const _this = this
			clearInterval(_this.timer);
			_this.timer = setInterval(()=>{
				_this.duration -= 1
				if(_this.itemIndex == this.show_materials.length){
					clearInterval(_this.timer)
				}else{
					if(_this.duration==0){
						_this.itemIndex ++
						_this.duration = this.show_materials[this.itemIndex].duration
						_this.linkUrl = this.show_materials[this.itemIndex].deposit_url
					}
				}
			},1000)
		},
		atuo() {
			this.autoplay = true;
		},
		countdown() {
			this.count = 6;
			const timer = setInterval(() => {
				this.count -= 1;
				if (this.count < 1) {
					clearInterval(timer);
					this.deviceInfoShow = true;
					console.log('倒计时结束');
				}
			}, 1000);
		}
	}
};
</script>

<style scoped>
.main_container {
	position: relative;
	overflow: hidden;
	background: #000;
}
.show-item {
	/* width: 100%;
	height: 100vh; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.show-item uni-image {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
.show-item uni-video {
	width: 100%;
}
.show-video{
	width: 100%;
	height: 100vh;
}
.show-audio{
	position: fixed;
	bottom: 79.16rpx;
	right: 46.52rpx;
	width: 159.72rpx;
	height: 152.08rpx;
}
.show-audio uni-image{
	width: 159.72rpx;
	height: 152.08rpx;
}
.local-data {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 625rpx;
	height: 555.55rpx;
	transform: translate(-50%, -50%);
	font-size: 27.77rpx;
	color: #333;
	border-radius: 27.77rpx;
	background: rgba(255, 255, 255, 0.85);
}
.title {
	margin-bottom: 32.63rpx;
	font-size: 56.94rpx;
	text-align: center;
}
.data-info {
	padding: 0 83.33rpx;
	margin-bottom: 32.63rpx;
}
.count-down {
	position: absolute;
	right: 34.72rpx;
	top: 27.77rpx;
	width: 48.61rpx;
	height: 48.61rpx;
	font-size: 30.55rpx;
	text-align: center;
	line-height: 48.61rpx;
	border: 1px solid #333;
	border-radius: 50%;
}
</style>
