<template>
	<view class="container">
		<view class="container-top">
			<u-navbar :is-back="false" :is-fixed="false" :height="topNavHeight" :background="topbg" title-color="#fff"
				title-size="32" :border-bottom="false" title="苏州科技商学院"></u-navbar>
			<view style="height:60rpx;margin-top:20rpx;">
				<view v-if="showWx" class="container-wx">
					<u-icon name="close" color="#fff" @click="showWx=false"></u-icon>
					<view>
						点击“<text></text><text class="container-wx-big"></text><text></text>”添加到我的小程序，下次访问更快捷
					</view>
				</view>
			</view>

			<topBanner :banner_list="banner_list"></topBanner>
		</view>
		<view class="container-content">
			<image :src="base.imgHost('index_bg.png')" width="100%" height="100%"></image>
			<view class="container-content-icons">
				<view @click="tourl(1)">
					<image :src="base.imgHost('index_icon2.png')"></image>
				</view>
				<view @click="tourl(2)">
					<image :src="base.imgHost('index_icon3.png')"></image>
				</view>
				<view @click="tourl(3)">
					<image :src="base.imgHost('index_icon4.png')"></image>
				</view>
			</view>

			<view class="container-content-info">
				<view class="container-content-info_title">
					<view>资讯</view>
					<view @click="tourl(4)">查看全部</view>
				</view>
				<view class="container-content-info_swiper">
					<swiper circular :current="info_index" @change="changeInfo" next-margin="340rpx">
						<swiper-item v-for="(item,index) in notices_list" @click="tourl(5,item.titleurl)">
							<view class="imgwrap" :class="{'active':info_index===index}">
								<image mode="aspectFill" :src="item.titlepic"></image>
							</view>
							<view class="title">
								<view class="title-name">
									{{item.title}}
								</view>
								<view class="title-time">
									{{item.newstime}}
								</view>
							</view>

						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<tabbar :currentPage="0"></tabbar>
	</view>
</template>

<script>
	import {
		ROOTPATH as baseUrl
	} from "@/common/config.js"
	import tabbar from '@/components/tabbar/tabbar.vue';
	import topBanner from '@/components/topBanner.vue';
	import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue';
	export default {
		components: {
			tabbar,
			topBanner,
			PrivacyPopup
		},
		data() {
			return {
				topNavHeight: 40,
				topbg: {
					backgroundColor: 'transparent'
				},
				showWx: true,
				banner_list: [],
				notices_list: []
			}
		},
		onShareAppMessage() {
			return{
				title:"苏州科技商学院",
				imageUrl:"/static/share.jpg"
			}
		},
		onShareTimeline() {
			return{
				title:"苏州科技商学院",
				imageUrl:"/static/share.jpg"
			}
		},
		onLoad() {
			let menuButtonObject = uni.getMenuButtonBoundingClientRect();
			this.topNavHeight = menuButtonObject.height + 8
			let token = uni.getStorageSync('stbc_lifeData') ? uni.getStorageSync('stbc_lifeData').vuex_token : ''
			if (this.base.isNull(token)) {
				this.getToken()
			}
			this.getNoticesList()
			this.getBannerList()
		},
		methods: {
			onAgreePrivacy() {
				// 用户同意隐私政策
				// 在这里添加您想要执行的代码
				console.log('User agreed to the privacy policy');
				// this.getToken()
			},
			onRejectPrivacy() {
				// 用户拒绝隐私政策
				// 在这里添加您想要执行的代码
				// wx.exitMiniProgram();
				console.log('User rejected the privacy policy');
			},
			changeCurrent(e) {
				this.show_current_swiper = e.detail.current + 1
			},
			changeInfo(e) {
				this.info_index = e.detail.current

			},
			async getToken() {
				let that = this
				await uni.login({
					provider: 'weixin',
					success: (res) => {
						this.$u.api.login({
							code: res.code
						}).then(res1 => {
							uni.setStorageSync("stbc_lifeData", {
								'vuex_token': res1.token
							})
							uni.request({
								url: baseUrl + '/api/mobile/user/get-user-info',
								header: {
									Authorization: `Bearer ${res1.token}`
								},
								method: "GET",
								success(res2) {
									uni.setStorageSync("stbc_lifeData", {
										'vuex_token': res1.token,
										"vuex_user": res2.data.user
									})
								},
								fail(err) {
									console.log("err", err)
								}
							})
						}).catch(err => {
							console.log('login-error:', JSON.stringify(err))
						})
					},
					fail: (res) => {
						console.log("errtoken", JSON.stringify(res))
					}
				});
			},
			async getBannerList() {
				const res = await this.$u.api.otherBanner({
					position: 1
				})
				this.banner_list = res
			},
			async getNoticesList() {
				const res = await this.$u.api.courseNews({
					page: 1,
					page_size: 5,
				})
				this.notices_list = res.rows

			},
			tourl(type, url) {
				if (type === 1) {
					uni.navigateTo({
						url: '/packages/webview/index?type=1'
					})
				} else if (type === 2) {
					uni.switchTab({
						url: '/pages/course/index'
					})
				} else if (type === 3) {
					uni.switchTab({
						url: '/pages/book/index'
					})
				} else if (type === 4) {
					// 资讯列表
					uni.navigateTo({
						url: '/packages/webview/index?type=2'
					})
				} else if (type === 5) {
					// 资讯详情
					uni.navigateTo({
						url: '/packages/webview/index?type=3&url=' + url
					})
				}
			}
		}

	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #fff;
		width: 100%;
		min-height: 100vh;
		padding-bottom: 80rpx;

		&-top {
			width: 100%;
			height: 570rpx;
			background: url("https://suzhoukeji-test.ali251.langye.net/wx-icon/index_top_bg.png") no-repeat;
			background-size: 100% 100%;
		}

		&-wx {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24rpx;
			width: 100%;
			background-color: #271f8e;
			padding: 15rpx 0;
			height:60rpx;
			// margin-top: 20rpx;

			::v-deep .u-icon {
				margin: 0 30rpx;
			}

			text {
				width: 10rpx;
				height: 10rpx;
				border-radius: 10rpx;
				background-color: #fff;
				margin: 0 5rpx;
				display: inline-block;
			}

			&-big {
				width: 20rpx !important;
				height: 20rpx !important;
				border-radius: 20rpx !important;
				vertical-align: middle;
			}
		}

		&-content {
			width: 100%;
			position: relative;
			position: relative;
			padding-top: 260rpx;

			&>image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: -40rpx;
				left: 0;
			}

			&-icons {
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: relative;
				padding-bottom: 130rpx;

				image {
					width: 200rpx;
					height: 195rpx;
				}
			}

			&-info {
				position: relative;
				padding-top: 130rpx;

				&_title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 680rpx;
					margin: 0 auto;
					font-size: 28rpx;
					color: #666;
					margin-bottom: 40rpx;

					view:first-child {
						font-size: 42rpx;
						color: #333;
					}
				}

				&_swiper {
					margin-left: 20rpx;
					height: 780rpx;

					swiper {
						height: 100%;

						swiper-item {
							.imgwrap {
								padding: 10rpx;
								border-radius: 10rpx;
								width: 390rpx;
								margin-bottom: 20rpx;

								image {
									width: 370rpx;
									height: 460rpx;
								}
							}

							.imgwrap.active {
								background-color: #fff;
							}

							.title {
								font-size: 24rpx;
								width: 390rpx;
								padding: 10rpx;

								&-name {
									line-height: 1.5;
									color: #333333;
									margin-bottom: 30rpx;
								}

								&-time {
									color: #666666;
								}
							}
						}
					}
				}
			}
		}
	}
</style>