<template>
	<view class="page-container">
		<view class="index-header-bg">
			<view class="index-header-bg-upper"></view>
		</view>
		<view class="status-bar"></view>
		<header-nav v-model="typeIndex" :navs="type"></header-nav>
		<swiper :current="typeIndex" @change="swiperChange" class="swiper-container">
			<swiper-item v-for="(item, index) in type" :key="index">
				<index-item-hot v-if="index == 0" :ref="'index' + index" :id="item.id"></index-item-hot>
				<index-item v-else :ref="'index' + index" :id="item.id" :index="index"></index-item>
			</swiper-item>
		</swiper>
		<u-popup v-for="(item, index) in advlist" :show="item.visible" mode="center" bgColor="transparent" :custom-style="{ width: '80%' }">
			<view class="popup">
				<view class="popup-image" @click="openApp(item.adv_link)">
					<vodImage :src="item.adv_image" mode="widthFix"></vodImage>
				</view>

				<view class="popup-close">
					<image src="/static/icon/close.png" mode="aspectFill" @click="closePopup(index)"></image>
				</view>
			</view>
		</u-popup>
		<u-popup :show="noticeShow" mode="center" bgColor="transparent" :custom-style="{ width: '70%', maxWidth: '300px' }">
			<view class="notice-popup">
				<view class="header-bg">
					<view class="header-bg-upper"></view>
				</view>
				<view class="notice-container">
					<view class="notice-title">{{ notice.notice_title }}</view>
					<text class="notice-content">{{ notice.notice_content }}</text>
					<view class="notice-link" @click="openApp(notice.notice_link)">{{ notice.notice_link_name }}</view>
					<view class="notice-button" @click="noticeShow = false">知道了</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import headerNav from '@/components/home-header-nav.vue';
import indexItem from './index-item.vue';
import indexItemHot from './index-item-hot.vue';
import vodImage from '@/components/vod-image.vue';
import APPUpdate from '@/plugins/APPUpdate';
import { app } from '@/utils/api';

export default {
	components: {
		headerNav,
		indexItem,
		indexItemHot,
		vodImage
	},
	data() {
		return {
			type: [
				{
					id: 0,
					name: '今日推荐'
				}
			],
			typeIndex: 0,
			notice: {},
			noticeShow: false,
			advlist: [],
			currentIndex: 0
		};
	},
	onLoad() {
		this.getHome();
		// #ifdef APP
		APPUpdate();
		// #endif
	},
	async onShow() {
		// #ifdef H5
		let data = await APPUpdate();
		if (data) {
			location.reload(true);
			return;
		}
		// const updateTime = uni.getStorageSync('updateTime');
		// if (!updateTime) {
		// 	uni.setStorageSync('updateTime', Date.now());
		// } else {
		// 	const lastTimestamp = uni.getStorageSync('updateTime');
		// 	if (lastTimestamp) {
		// 		const currentTime = Date.now();
		// 		const differenceMinutes = (currentTime - parseInt(lastTimestamp)) / (1000 * 60);
		// 		const fourHoursInMinutes = 12 * 60;
		// 		if (differenceMinutes >= fourHoursInMinutes) {
		// 			location.reload(true);
		// 		}
		// 	}
		// }
		// #endif
	},
	methods: {
		openApp(e) {
			// #ifdef H5
			window.open(e);
			// #endif
			// #ifdef APP-PLUS
			plus.runtime.openURL(e);
			// #endif
		},
		swiperChange(e) {
			this.typeIndex = e.detail.current;
			this.$refs['index' + this.typeIndex][0].init();
		},
		getHome() {
			app.home().then((res) => {
				const resData = res.data;
				if (resData) {
					this.type = [
						{
							id: 0,
							name: '今日推荐'
						},
						...resData.type
					];

					if (resData.advlist.length) {
						this.advlist = resData.advlist.map((item) => {
							return { ...item, visible: false };
						});
						this.advlist[this.currentIndex].visible = true;
					} else {
						if (resData.notice) {
							this.noticeShow = true;
						}
					}
					if (resData.notice) {
						this.notice = resData.notice;
						// this.noticeShow = true
					}
					this.$nextTick(() => {
						this.$refs['index' + this.typeIndex][0].init();
					});
				} else {
					uni.reLaunch({
						url: '/pages/splash/splash'
					});
				}
			});
		},
		// getHome() {
		// 	app.home().then(res => {
		// 		const resData = res.data
		// 		console.log(resData);
		// 		this.type = [{
		// 				id: 0,
		// 				name: '今日推荐'
		// 			},
		// 			...resData.type
		// 		]

		// 		if(resData.advlist.length){

		// 			this.advlist = resData.advlist.map(item => {
		// 			    return { ...item, visible: false };
		// 			});
		// 			this.advlist[this.currentIndex].visible = true;
		// 		}else{
		// 			if (resData.notice) {
		// 				this.noticeShow = true
		// 			}
		// 		}
		// 		if (resData.notice) {
		// 			this.notice = resData.notice
		// 			// this.noticeShow = true
		// 		}
		// 		this.$nextTick(() => {
		// 			this.$refs['index' + this.typeIndex][0].init()
		// 		})
		// 	})
		// },
		closePopup(index) {
			this.currentIndex++;
			this.advlist[index].visible = false;
			if (this.currentIndex < this.advlist.length) {
				this.advlist[this.currentIndex].visible = true;
			}
			if (this.currentIndex == this.advlist.length && this.notice) {
				this.noticeShow = true;
			}
		}
	}
};
</script>

<style lang="scss">
.page-container {
	height: 100%;
	background-color: $uni-bg-color;
	.popup {
		border-radius: 10px;
		position: relative;
		overflow: hidden;

		.popup-image {
			text-align: center;

			uni-image {
				border-radius: 10px;
				min-width: 300rpx;
				max-width: 600rpx;
			}
		}
		.popup-close {
			text-align: center;
			margin-top: 20px;
			width: 100%;
			uni-image {
				width: 60rpx;
				max-height: 60rpx;
			}
		}
	}

	.index-header-bg {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		height: 173px;
		// background:#DA2538;
		// filter: blur(10px);
		.index-header-bg-upper {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 100%;
		}
	}
	.swiper-container {
		height: calc(100% - var(--safe-top) - 90px);
	}

	.notice-popup {
		background-color: $uni-bg-color;
		border-radius: 10px;
		position: relative;
		overflow: hidden;

		.header-bg {
			height: 80px;
			position: absolute;
		}

		.notice-container {
			padding: 15px 20px;
			position: relative;

			.notice-title {
				margin-bottom: 15px;
				font-size: 18px;
				font-weight: 700;
				text-align: center;
				color: $uni-color-primary;
			}

			.notice-content {
				margin-bottom: 5px;
				font-size: 13px;
				font-weight: 500;
				line-height: 20px;
				color: #fff;
			}

			.notice-link {
				margin-top: 15px;
				font-weight: 500;
				text-align: center;
				color: $uni-color-primary;
			}

			.notice-button {
				margin-top: 15px;
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: $uni-color-primary;
				color: #fff;
				border-radius: 20px;
			}
		}
	}
}
</style>
