<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="datas.isExamine">
			<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; font-size: 14px">{{ 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="datas.isExamine"
		@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 != ''"
		@cancel="cancelUpdateVersion"
		@confirm="confirmUpdateVersion"
		:title="datas.version.title"
		:title-style="{ fontWeight: '700' }"
		confirm-color="rgb(255, 117, 129)"
	>
		<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> -->
				<view style="text-align: justify; font-size: 18px; color: #666" v-html="datas.version.content"></view>
			</scroll-view>
		</view>
	</up-modal>

	<!-- h5关闭通知 -->
	<!-- #ifdef H5 -->
	<up-modal
		:show="datas.stopShow"
		cancel-text="知道了"
		show-cancel-button
		confirm-text="去下载"
		title="重要通知"
		@cancel="stopCancel"
		:title="datas.rule_title"
		:title-style="{ fontWeight: '700' }"
		@confirm="stopConfirm"
		confirm-color="rgb(255, 117, 129)"
	>
		<view class="color-red u-text-left">
			<text>2025年2月8日将关闭网页访问，请及时下载最新APP</text>
		</view>
	</up-modal>
	<!-- #endif -->

	<!-- 公告弹窗 -->
	<up-modal :show="datas.stopShows && datas.isExamine" :showConfirmButton="true" title="公告" @confirm="confirmEvent">
		<view class="color-red u-text-left">
			<view style="text-align: justify; font-size: 18px; color: #666" v-html="datas.noticeList[datas.cloneNum].title"></view>
		</view>
	</up-modal>
	<!-- #ifdef APP -->
	<!-- #endif -->
	<disable-mask v-if="disableMaskVisable"></disable-mask>
</template>

<script setup>
import { reactive, nextTick, ref } from 'vue';
import { announcement, messageselectMessage, courseselectCourse } from '@/api/index/index.js';
import { onLoad, onReady, onReachBottom, onShow } 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();
onShow(() => {
	// console.log('cash:' + uni.getStorageSync('userInfo').userId + "" + new Date().getTime(), 'debug')
	// 判断ios是否审核
	$common.init();
	// #ifdef H5
	datas.isExamine = $common.isIosExamine;
	// #endif
	// let sysInfo = uni.getSystemInfoSync()
	// let isIos = sysInfo.platform == 'ios'
	// if (isIos) {
	// 	datas.setindexdata = $common.setversion
	// 	console.log(datas.setindexdata,'seaeasdas')
	// }
	getrecomVideo();
});

const disableMaskVisable = ref(false);

let datas = reactive({
	noticeList: [], //公告列表

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

	list: [], // 底部短剧内容
	page: 1, // 首页推荐分页
	stopShow: true, //h5关闭弹窗
	ruleShow: false,
	rule_title: '', // 首页弹窗标题
	rule_content: '', // 首页弹窗内容
	ruleIndex: 0,
	ruleList: [],
	stopShows: false,
	version: {
		show: false,
		title: '',
		content: '',
		confirmText: '',
		cancelText: '',
		downloadLink: ''
	},
	setindexdata: false,
	cloneNum: 0
});
onLoad(() => {
	versionUpdate();
	getMsg();
});
onReady(() => {
	if (!uni.getStorageSync('ruleShow')) {
		announcement({
			type: 0
		})
			.then((res) => {
				if (res) {
					datas.ruleShow = true;
					datas.ruleList = res;
					ruleInit();
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
});
onReachBottom(() => {
	++datas.page;
	getrecomVideo();
});
// 公告
async function getMsg() {
	let res = await messageselectMessage();
	console.log('res',res)
	let arr = [];
	let ids = uni.getStorageSync('ids');
	res.list.forEach((ele) => {
		if (ids.length) {
			if (ids.indexOf(ele.id) == -1) {
				arr.push(ele);
			}
		} else {
			uni.setStorageSync('ids', [res.list[0].id]);
			arr.push(ele);
		}
	});
	datas.noticeList = res.list;
	if (arr.length) {
		if (ids.length) {
			uni.setStorageSync('ids', [...uni.getStorageSync('ids'), datas.noticeList[datas.cloneNum].id]);
		}
		datas.stopShows = true;
	}
}

function confirmEvent() {
	datas.stopShows = false;
	if (datas.cloneNum < datas.noticeList.length - 1) {
		++datas.cloneNum;
		uni.setStorageSync('ids', [...uni.getStorageSync('ids'), datas.noticeList[datas.cloneNum].id]);
		datas.stopShows = true;
	}
}

function stopConfirm() {
	datas.stopShow = false;
	uni.navigateTo({
		url: '/pages/login/download'
	});
}

function stopCancel() {
	datas.stopShow = false;
}

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

function cancelUpdateVersion() {
	uni.showTabBar();
	datas.version.show = false;
}

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: datas.version.downloadLink,
			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(datas.version.downloadLink, 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;
		uni.setStorageSync('ruleShow', true);
		return;
	}
	setTimeout((res) => {
		ruleInit();
		datas.ruleShow = true;
	}, 300);
}

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

// 搜索跳转
function moreVideo() {
	uni.navigateTo({
		url: '/pages/index/search/index'
	});
}

//获取推荐视频
async function getrecomVideo(sort, active = 1) {
	try {
		datas.active = active;
		if (sort) {
			datas.page = 1;
		}
		let res = await courseselectCourse({
			page: datas.page,
			limit: 12,
			sort: sort,
			classifyId: ''
		});

		console.log('getrecomVideo===', res);

		if (datas.page == 1) {
			datas.list = res.list;
		} else {
			datas.list = [...datas.list, ...res.list];
		}
	} catch (error) {
		console.log('getrecomVideo.error===', error);
		if (error.code == 702) {
			disableMaskVisable.value = true;
		} else {
			disableMaskVisable.value = false;
		}
	}
}
</script>

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

	> image {
		width: 100%;
		height: 100%;
		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: 85rpx;
		left: 70rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		width: 611rpx;
		height: 60rpx;
		background-color: rgba(255, 255, 255, 0.65);
		display: flex;
		align-items: center;
		padding: 12rpx;
		box-sizing: border-box;

		.gongaoicon {
			color: #ffffff;
			width: 98rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			font-size: 20rpx;
			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>
