<template>
	<view class="page content">
		<!-- #ifdef APP-PLUS -->
		<unitv-page id="indexPage" :show="true" ref="unitvPage" @back="pageBack">
			<unitv-zone id="zone1" class="zone1" :autoFous="true" down="zone3"  :item="0" :values="item1" :column="item1.length">
				<unitv-item v-for="(a,index) in item1" :item="index" :key="index" class="item" @hover="hoverItem('zone1', index)" @click="clickItem('zone1', a)">
					<view v-if="index == 0" class="item-top-one">首页</view>
					<view v-else-if="index == 1" class="item-top-two">
						搜索
					</view>
					<view v-else class="item-top-three">
						APP更新
					</view>
				</unitv-item>
			</unitv-zone>
			<unitv-zone id="zone3" class="zone3" up="zone1" :values="item3" :column="item3Length">
				<unitv-item v-for="(a,index) in item3" :item="index" :key="index" class="item" @hover="hoverItem('zone3', index)" 
					@click="clickItem('zone3', a)" style="background-color: #ffffff;">
					<image :src="a.cover" :lazy-load="true" mode="scaleToFill" @error="imageError"></image>
					<!-- <image :src="a.cover" :lazy-load="true" mode="scaleToFill"></image> -->
					<view class="film-info">
						<view class="film-movieFlag" style="background-color: green;" v-if="a.movieFlag == '1'"></view>
						<view class="film-movieFlag" style="background-color: red;" v-else-if="a.movieFlag == '0'"></view>
						<!-- <view class="film-title">{{a.title}}</view> -->
					</view>
				</unitv-item>
			</unitv-zone>
		</unitv-page>
		<!-- #endif -->
		
		<!-- #ifndef APP-PLUS -->
		<view style="height: 800px;line-height: 800px;text-align: center;font-size: 100px;color: brown;">不支持的平台</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import silenceUpdate from '@/uni_modules/rt-uni-update/js_sdk/silence-update.js' //引入静默更新
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				item1: [1, 2, 3],
				item2: [],
				item3: [],
				item3Length: 0,
				item4: [],
				item5: [],
				curIndex:7,
				curSwiper:0,
				nextZone:'szone_1',
				searchFlag: false,
				inputDisabled: true
			}
		},
		onBackPress(options) {
			this.$refs.unitvPage.evtBack();
			return true;
		},
		computed: {
		},
		onShow() {
			// if(this.$refs.unitvPage){
			// this.$refs.unitvPage.showPage()
			// }
		}, 
		onLoad() {
			
		},
		onReady() {
		},
		methods: {
			...mapMutations(['showPage']),
			pageBack(e){
				console.log("按了返回");
				uni.showModal({
				    title: '提示',
				    content: '是否退出',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							 plus.runtime.quit();  
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				return false;
			},
			hoverItem(zoneSource, index){
				//console.log({"zoneSource":zoneSource, "index":index})
				if(zoneSource == 'zone1' && index == 1){
					this.inputDisabled = false;
				} else {
					this.inputDisabled = true;
				}
				
				if(zoneSource == 'zone1'){
					if(index == 0){
						//重新查询主页数据
						this.queryAllMovieList()
						this.searchFlag = false
					}
				}				
			},
			imageError: function(e) {
				console.error('image发生error事件，携带值为' + e.detail.errMsg)
			},
			queryAllMovieList(){
				this.$api.get('/platCupfox/list', null).then(res => {
					this.item3Length = res.length > 6 ? 6 : res.length;
					this.item3=res;
				})
			},
			switchSwiper(e){
				this.curSwiper=e;
				this.nextZone='szone_'+(e+1);
			},
			clickItem(zoneSource, data){
				console.log({"zoneSource":zoneSource, "data":data})
				if(zoneSource == 'zone3'){
					if(data.movieFlag == '1'){
						uni.navigateTo({
							url:"../player/player?id=" + data.id
						})	
					} else {
						uni.showToast({
						    title: '当前影视未解析到视频资源，无法播放',
							icon:'none',
						    duration: 2000
						});
					}
				} else if(zoneSource == 'zone1'){
					if(data == 2){
						uni.navigateTo({
						 	url:"../search/search"
						})
					}else if(data == 3){
						//TODO 版本升级
						this.updateAppVersion()
					}
				} else {
					uni.showToast({
					    title: '成功点击了',
						icon:'none',
					    duration: 2000
					});
				}
				
				// uni.navigateTo({
				// 	url:"../player/player"
				// })
				//this.showPage('swiperPage')
			},
			loadMore(){
				/* var arr=[];
				for (var i=0;i<66;i++){
					arr.push("more_"+i);
				}
				this.item5=this.item5.concat(arr);
				uni.showToast({
				    title: '成功加载更多',
					icon:'none',
				    duration: 2000
				}); */
			},
			updateAppVersion(){
				//#ifdef APP-PLUS
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (inf) => {
					//获取服务器的版本号
					let paramData = {
						application: 'filmTV',
						appType: uni.getSystemInfoSync().platform
					};
					this.$api.post('/appUpgrade/new/version', paramData).then(data => {
							//res.data.xxx根据后台返回的数据决定（我这里后端返回的是data），所以是res.data.data 
							//判断后台返回版本号是否大于当前应用版本号 && 是否发行 （上架应用市场时一定不能弹出更新提示）
							let res = {
							    // 版本更新内容 支持<br>自动换行
							    describe: data.note, 
							    edition_url: data.downloadUrl, //apk、wgt包下载地址或者应用市场地址  安卓应用市场 market://details?id=xxxx 苹果store itms-apps://itunes.apple.com/cn/app/xxxxxx
							    edition_force: 1, //是否强制更新 0代表否 1代表是
							    package_type: 0, //0是整包升级（apk或者appstore或者安卓应用市场） 1是wgt升级
							    edition_issue:1, //是否发行  0否 1是 为了控制上架应用市场审核时不能弹出热更新框
							    edition_number:data.version.replace(".","").replace(".",""), //版本号 最重要的manifest里的版本号 （检查更新主要以服务器返回的edition_number版本号是否大于当前app的版本号来实现是否更新）
							    edition_name:data.version,// 版本名称 manifest里的版本名称
							    edition_silence:0, // 是否静默更新 0代表否 1代表是
							}
							
							if (Number(res.edition_number) > Number(inf.versionCode) && res.edition_issue == 1) {
								//如果是wgt升级，并且是静默更新 （注意！！！ 如果是手动检查新版本，就不用判断静默更新，请直接跳转更新页，不然点击检查新版本后会没反应）
								if (res.package_type == 1 && res.edition_silence == 1) {
									//调用静默更新方法 传入下载地址
									silenceUpdate(res.edition_url)
								} else {
									//跳转更新页面 （注意！！！如果pages.json第一页的代码里有一打开就跳转其他页面的操作，下面这行代码最好写在setTimeout里面设置延时3到5秒再执行）
									uni.navigateTo({
										url: '/uni_modules/rt-uni-update/components/rt-uni-update/rt-uni-update?obj=' +
											JSON.stringify(res)
									});
								}
							} else {
								// 如果是手动检查新版本 需开启以下注释
								uni.showToast({
									title: '已经是最新版本，无需更新',
									icon:'seccess',
									duration: 2000
								});
							}
					})
					
				});
				//#endif 
			}
		}
	}
</script>



<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		//background-color: rgb(135,206,250);
		background-image: linear-gradient(to bottom, #2E3092, #797979);
	}

	.zone3 {
		height: 165rpx;
		line-height: 165rpx;
		width: 100%;
		display: flex;
		white-space: nowrap;
		flex-wrap:wrap;
		margin-top: 10rpx;
		margin-left: 3rpx;
		align-items: center;
		/* border: 1px solid red; */
		.item {
			width: 15%;
			/* border: 1px solid red; */
			padding: 0px 0rpx;
			margin: 5rpx 6rpx;
			text-align: center;
			display: inline-block;
			height: 165rpx;
			line-height: 165rpx;
			border-radius: 5rpx;
			background-color: #555555;
			image{
				position:relative;
				z-index: 8000;
				/* border: 1px solid green; */
				width: 100%;
				height: 100%;
				border-radius: 5rpx;
			}
		}
		.item-hover{
			transform: scale(1.04);
			box-shadow: 2px 4px 6px #555555;
			animation: glow 1500ms ease-out infinite alternate;
			-webkit-transform: scale(1.04);
			-webkit-box-shadow: 2px 4px 6px #555555;
			-webkit-animation: glow 1500ms ease-out infinite alternate;
			zoom: 1.01;
			border: 2px solid;
			border-color: #FFA500;
		}
		.item-active{
			zoom:0;
		}
		
		.film-info{
			position:relative;
			z-index: 9000;
			text-align: center;
			//border: 1px solid gold;
			height: 165rpx;
			border-radius: 5rpx;
			line-height: 165rpx;
			width: 100%;
			left: 0px;
			top: -245rpx;
			.film-title{
				position: absolute;
				width: 100%;
				transform: translate(0%, 385%); // 横轴-50%，竖轴-50%
				background:#000;
				height: 35rpx;
				line-height: 35rpx;
				border-bottom-right-radius: 5rpx;
				border-bottom-left-radius: 5rpx;
				z-index: 9999;
				opacity:0.8;
			}
			.film-movieFlag{
				margin-top: 5rpx;
				margin-left: 5rpx;
				border-radius: 50%;
				width: 20rpx;
				height: 20rpx;
				z-index: 9999;
				opacity:0.8;
				background-color: #000000;
			}
		}
		
	}
	
	.zone1 {
		height: 30rpx;
		line-height: 30rpx;
		width: 98%;
		display: flex;
		white-space: nowrap;
		margin-top: 40rpx;
		align-items: center;
		.item {
			margin: -20rpx 10rpx;
			text-align: center;
			display: inline-block;
			height: 22rpx;
			line-height: 22rpx;
			border-radius: 5rpx;
		}
		.item-hover{
			transform: scale(1.04);
			box-shadow: 2px 4px 6px #555555;
			animation: glow 1500ms ease-out infinite alternate;
			-webkit-transform: scale(1.04);
			-webkit-box-shadow: 2px 4px 6px #555555;
			-webkit-animation: glow 1500ms ease-out infinite alternate;
			zoom: 1.05;
			background: #FFFFFF;
			color: #000000;
		}
		.item-active{
			transform: scale(1.04);
			box-shadow: 2px 4px 6px #555555;
			animation: glow 1500ms ease-out infinite alternate;
			-webkit-transform: scale(1.04);
			-webkit-box-shadow: 2px 4px 6px #555555;
			-webkit-animation: glow 1500ms ease-out infinite alternate;
			background: #FFFFFF;
			zoom: 1;
			color: #000000;
		}
		.item-top-one{
			padding: 0px 5rpx;
			border:1px solid #FFFFFF;
			border-radius: 5rpx;
			height: 20rpx;
			line-height: 20rpx;
		}
		.item-top-two{
			width: 300rpx;
			height: 20rpx;
			line-height: 20rpx;
			border:1px solid #FFFFFF;
			border-radius: 5rpx;
			input {
				width: 300rpx;
				height: 20rpx;
				line-height: 20rpx;
			}
		}
		.item-top-three{
			height: 20rpx;
			padding: 0px 5rpx;
			line-height: 20rpx;
			border:1px solid #FFFFFF;
			border-radius: 5rpx;
		}
	}

</style>
