<template>
	<view class="indexStyle">
		<image src="@/static/index/indexbh.png" mode="">
		</image>
		<view class="indexStyleTwo">
			<image src="@/static/logo.png" mode=""></image>
			<!-- <view @tap="moreVideo">
				<image src="@/static/sosuo.png" style="height: 34rpx;width: 34rpx;" mode=""></image>
				点击搜索更多好剧
			</view> -->
		</view>

		<template v-if="$common.isIosExamine()">
			<view class="gongao">
				<view class="gongaoicon">
					公告
				</view>
				<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
					class="swiperstyle">
					<swiper-item v-for="(item, index) in datas.noticeList" :key="index">
						<view style="height: 80rpx;line-height: 80rpx;">{{ item.title }}</view>
					</swiper-item>
				</swiper>
			</view>
		</template>
	</view>
	<view class="navTop">
		<view :class="datas.active == 1 ? 'navTop-active' : ''" @tap="getrecomVideo('', 1)">
			最新
		</view>
		<view :class="datas.active == 2 ? 'navTop-active' : ''" @tap="getrecomVideo('1', 2)">
			排行
		</view>
		<view :class="datas.active == 3 ? 'navTop-active' : ''" @tap="getrecomVideo('2', 3)">
			最热
		</view>
		<view :class="datas.active == 4 ? 'navTop-active' : ''" @tap="getrecomVideo('1', 4)">
			剧情
		</view>
		<view :class="datas.active == 5 ? 'navTop-active' : ''" @tap="getrecomVideo('2', 5)">
			飙升
		</view>
	</view>
	<contentlist :list='datas.list'></contentlist>
	<image v-if="$common.isIosExamine()" @click="goMsg()" src="@/static/index/red-pack-new.gif"
		style="width: 200rpx;height: 200rpx;position: fixed;right: 10rpx;bottom: 180rpx;" mode=""></image>
	<up-modal :show="datas.version.show" :confirm-text="datas.version.confirmText"
		:showCancelButton="datas.version.cancelText!=''" @confirm='confirmUpdateVersion' :title="datas.version.title"
		:title-style="{ fontWeight: '700' }" confirm-color="rgb(255, 117, 129)" @cancel="datas.version.show = false">
		<view class="" style="padding-top: 30rpx;text-align: left;">
			<scroll-view scroll-y="true" style="max-height: 50vh;">
				<rich-text style="color:#666" :nodes="datas.version.content"></rich-text>
			</scroll-view>
		</view>
	</up-modal>
	<up-modal :show="datas.ruleShow" v-if="$common.isIosExamine()&&!datas.version.show" confirm-text="知道了" title="规则说明"
		:title="datas.rule_title" :title-style="{fontWeight:'700'}" @confirm="ruleConfirm"
		confirm-color="rgb(255, 117, 129)">
		<view class="u-p-30 u-text-left">
			<scroll-view scroll-y="true" style="max-height: 50vh;">
				<rich-text style="text-align: justify;font-size: 18px;color: #666;"
					:nodes="datas.rule_content"></rich-text>
			</scroll-view>
		</view>
	</up-modal>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		announcement,
		messageselectMessage,
		courseselectCourse
	} from '@/api/index/index.js'
	import {
		onLoad,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app'
	import contentlist from './components/contentlist.vue'
	import {
		selectNewApp
	} from '@/api/user/user.js';
	import config from '@/commons/config.js';
	import {
		linkTo
	} from '@/utils/app.js';
	import {
		useCommonStore
	} from '@/store/common.js'
	const $common = useCommonStore()
	let datas = reactive({
		noticeList: [], //公告列表

		active: 1, // 最新、最热。。。切换顶部导航栏

		list: [], // 底部短剧内容
		page: 1, // 首页推荐分页

		ruleShow: false,
		rule_title: '', // 首页弹窗标题
		rule_content: '', // 首页弹窗内容
		ruleIndex: 0,
		ruleList: [],
		
		version: {
			show: false,
			title: "",
			content: "",
			confirmText: "",
			cancelText: "",
		}
	})
	onLoad(() => {
		versionUpdate()
		getMsg()
		getrecomVideo()
		 
	})
	onReady(() => {
		announcement({
			type: 0
		}).then(res => {
			datas.ruleList = res
			ruleInit()
			datas.ruleShow = true
		})
	})
	onReachBottom(() => {
		++datas.page
		getrecomVideo()
	})

	function versionUpdate() {
		//#ifdef APP-PLUS
		plus.screen.lockOrientation('portrait-primary'); //竖屏正方向锁定
		//获取当前系统版本信息
		plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
			//请求后台接口 解析数据 对比版本
			selectNewApp().then(res => {
				res = res[0];
				let version;
				if (uni.getSystemInfoSync().platform == 'android') {
					version = res.version
				}
				if (uni.getSystemInfoSync().platform == 'ios') {
					version = res.iosVersion
				}
				console.log(widgetInfo.version + '---' + version)
				version = res.version
				// && uni.getSystemInfoSync().platform == 'android'
				if (widgetInfo.version < version) {
					let downloadLink = '';
					let androidLink = res.androidWgtUrl;
					let iosLink = res.iosWgtUrl;
					datas.version.show = true;
					datas.version.title = "发现新版本";
					datas.version.content = res.des;
					if (res.method == "true") {
						datas.version.confirmText = "立即更新"
					} else {
						datas.version.confirmText = "立即更新"
						datas.version.cancelText = "下次更新"

					}
				}
			});
		});
		//#endif
	}

	function confirmUpdateVersion() {
		// plus.runtime.openURL(config.baseUrl + '/pages/login/appEq')
		linkTo('/pages/login/download')
		return
		uni.showLoading({
			title: '下载中...',
			mask: true
		});
		if (uni.getSystemInfoSync().platform == 'android') {
			uni.downloadFile({
				url: androidLink,
				success: downloadResult => {
					console.log(downloadResult)
					if (downloadResult.statusCode === 200) {
						plus.runtime.install(
							downloadResult.tempFilePath, {
								force: false
							},
							d => {
								console.log('install success...');
								plus.runtime
									.restart();
							},
							e => {
								console.log(e)
								console.error('install fail...');
							}
						);
					}
				}
			});
		}
		if (uni.getSystemInfoSync().platform == 'ios') {
			plus.runtime.openURL(iosLink, function(res) {});
		}
	}

	function ruleInit() {
		datas.rule_title = datas.ruleList[datas.ruleIndex].title
		datas.rule_content = datas.ruleList[datas.ruleIndex].content
	}
	/**
	 * 规则确认
	 */
	function ruleConfirm() {
		datas.ruleShow = false
		datas.ruleIndex++
		if (datas.ruleIndex >= datas.ruleList.length) {
			datas.ruleIndex = 0
			return
		}
		setTimeout(res => {
			ruleInit()
			datas.ruleShow = true
		}, 300)
	}

	// 跳转公告链接
	function goMsg(url) {
		// uni.navigateTo({
		// 	url: '/pages/index/prizeDraw/kevy-luckydraw'
		// });
		uni.navigateTo({
			url: '/pages/me/prizeDraw'
		});
	}

	// 搜索跳转
	function moreVideo() {
		uni.navigateTo({
			url: '/pages/index/search/index'
		});
	}
	// 公告
	async function getMsg() {
		let res = await messageselectMessage()
		datas.noticeList = res.list
	}
	//获取推荐视频
	async function getrecomVideo(sort, active = 1) {
		datas.active = active
		if (sort) {
			datas.page = 1
		}
		let res = await courseselectCourse({
			page: datas.page,
			limit: 12,
			sort: sort,
			classifyId: ''
		})

		if (datas.page == 1) {
			datas.list = res.list
		} else {
			datas.list = [...datas.list, ...res.list]
		}
	}
</script>

<style lang="scss" scoped>
	.indexStyle {
		height: 555rpx;
		position: relative;

		>image {
			width: 100%;
			height: 555rpx;
			position: absolute;

		}

		.indexStyleTwo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 88rpx 25rpx;

			>image {
				width: 187rpx;
				height: 50rpx;
			}

			>view {
				z-index: 50;
				width: 236rpx;
				line-height: 43rpx;
				background: rgba(255, 255, 255, 0.29);
				border-radius: 7rpx 7rpx 7rpx 7rpx;
				font-weight: 400;
				font-size: 21rpx;
				color: rgba(255, 255, 255, 0.85);
				display: flex;
				align-items: center;
			}
		}

		.gongao {
			position: absolute;
			bottom: 75rpx;
			left: 70rpx;
			border-radius: 21rpx 21rpx 21rpx 21rpx;
			width: 611rpx;
			height: 78rpx;
			background-color: rgba(255, 255, 255, .65);
			display: flex;
			align-items: center;
			padding: 12rpx;
			box-sizing: border-box;

			.gongaoicon {
				color: #ffffff;
				width: 98rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 25rpx;
				background-image: url('../../static/index/gonggaobg.png');
				background-size: 98rpx 50rpx;
			}

			.swiperstyle {
				height: 78rpx;
				width: 80%;
			}
		}

	}

	.navTop-active {
		color: #cb5d68;
	}

	.navTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		>view {
			background-color: #f0f0f0;
			margin-left: 20rpx;
			padding: 6rpx 20rpx
		}
	}
</style>