<template>
	<view class="indexpage" :class="[{'no-scroll':SurveyObj.ActivitySurveyId>0}]">
		<navbar class="navbarSticky" bg="#F5F5F5">
			<view class="navbarCon">
				<view class="pagetitle">
					首页
				</view>
				<view class="loginBox">
					<view v-if="userData && userData.AccountName && userData.AccountId>0">
						{{userData.AccountName}}
					</view>
					<indexassembly @success='againdata' v-else>
						<view class="flex_start_center">
							<image
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/login2x.png"
								mode="aspectFit" class="loginIcon" id="loadImg"></image>
							登录
						</view>
					</indexassembly>
				</view>
				<!-- 扫码登陆 -->
				<view class="scanBox" @click="scan">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/scan2x.png"
						mode="aspectFit" class="scanIcon">
					</image>

				</view>

			</view>
		</navbar>
		<view class="activeContent" v-if="ActivityList.length > 0">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" indicator-color="#CCCCCC"
				indicator-active-color="#000000" :vertical="true" circular>
				<swiper-item v-for="(item, index) in ActivityList" :key="index" @click="goActiveDetail(item.Id)">
					<view class="swiperList" :style="{
		    'background-image': item.CoverImg
		      ? `url(${item.CoverImg})`
		      : `url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/defaultBgimg.png)`,
		  }">
						<view class="swiper_Time">{{ item.BMStart }}</view>
						<view class="swiper_Name">{{ item.ActivityName }}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="wordBox">
			<view class="wordTitle">
				单词练习
			</view>
			<view class="flex_around_center ">
				<view class="wordItem">
					<text class="wordItemTitle">今日新词</text>
					<text class="wordItemText">{{pageData.Words.NextWord||0}}<text
							class="wordItemTextUnit">词</text></text>
				</view>
				<view class="wordItem">
					<text class="wordItemTitle">复习词语</text>
					<text class="wordItemText">{{pageData.Words.ReviewWord||0}} <text
							class="wordItemTextUnit">词</text></text>
				</view>
			</view>
			<view class="wordDuration" style="visibility: hidden;">
				预计用时10分钟
			</view>
			<view style="text-align: center;font-size: 22rpx;color: #4C50E7;"
				v-if="(pageData.Words.NextWord==0||!pageData.Words.NextWord)&&(pageData.Words.ReviewWord==0||!pageData.Words.ReviewWord)">
				暂无新词</view>
			<view class="wordBtn" v-else
				@click="jumpPage(`/pages/word/word?CourseId=${pageData.Words.CourseId||0}&&ChapterId=${pageData.Words.NextCourseNo||0}&&ReviewChapterId=${pageData.Words.ReviewCourseNo||0}&&ClassId=${pageData.Words.ClassId||0}`)">
				开始学习
			</view>
		</view>
		<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/xbkbanner2.png"
			mode="widthFix" class="starbucks" @click="jumpJiahemini"></image>
		<view class="courseBox">
			<view class="courseInnerBox" @click="jumpTimetable">
				<view class="top">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/classtime.png"
						mode="aspectFit" class="courseIcon"></image>
					<text class="courseDateStr"
						style="margin: 0 16rpx 0 8rpx;">{{pageData.ClassNext.DateStr||'暂无'}}</text>
					<text class="courseDateStr"
						v-if="pageData.ClassNext.DateStart">{{pageData.ClassNext.DateStart}}</text>
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/classroom.png"
						mode="aspectFit" class="courseIcon" style="margin: 0 12rpx 0 50rpx;"></image>
					<text class="courseDateStr"
						style="margin-right: 30rpx;">{{pageData.ClassNext.RoomName||'暂无'}}</text>
				</view>
				<view class="flex">
					<view class="courseNameBox">
						<view class="className one_line">
							{{pageData.ClassNext.ClassName||'暂无'}}
						</view>
						<view class="courseName one_line">
							{{pageData.ClassNext.CourseName||'暂无'}}
						</view>
					</view>
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/female2x.png"
						mode="aspectFit" class="courseIcon2"></image>
				</view>
			</view>
			<view class="courseTitle">
				<text v-if="pageData.ClassNext.ClassPlanState==1">上课中</text>
				<text v-else-if="pageData.ClassNext.ClassPlanState==2">下节课</text>
				<text v-else>暂无</text>
			</view>
		</view>
		<view class="learningGarden" v-if="pageData.LearningGardenList.length>0">
			<view class="learningGardenSbutitle">
				扩展学习
			</view>
			<view v-for="(item,index) in pageData.LearningGardenList" :key="index" v-if="item.List.length>0">
				<view class="learningGardenTitle">
					<text>{{item.Name}}</text>
					<view style="
								height: 60rpx;
								font-size: 24rpx;
								font-weight: 500;
								color: #4C50E7;display: flex;align-items: center;" @click="jumpGarden(item.Id)">查看更多
						<van-icon name="arrow" />
					</view>
				</view>
				<view class="gardenCon" v-for="(item1,index1) in item.List" :key="index1" id="img"
					@click="jumpPage(`/pages/learningGarden/learningGardenDetails?Id=${item1.Id}`)">
					<image :src="item1.Img" mode="aspectFill" :id="'img'+index1"
						style="width: 100%;height:100%;border-radius: 24rpx 24rpx 0 0;"></image>
					<view class="gardenTextBox"
						:style="{'background':`linear-gradient(to bottom,${item1.bgcolor},${item1.bgcolor1} , ${item1.bgcolor2})` }">
						<view class="gardenTitle one_line">
							{{item1.Title}}
						</view>
						<view class="gardenDigest one_line">
							{{item1.Digest}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<bottom></bottom>
		<canvas canvas-id="myCanvas" class="canvas" style="position:absolute;left: -1000px;"></canvas>
		<van-toast id="van-toast" />
		<view class="diaocha-box" v-if="SurveyObj.ActivitySurveyId>0">
			<image @click="goTongji()" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1652251724000_835.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import vue, {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		provide,
		nextTick,
	} from "vue";
	import {
		getActivityList
	} from "../../api/activity";

	 import {
		 getSweepCode
	 } from '../../api/index.js'
	import {
		getImageColor
	} from '../../utils/index.js'
	import indexassembly from './components/indexassembly.vue'
	import navbar from '../../components/navbar.vue'
	import bottom from '../../components/bottom.vue'
	export default {
		// data(){
		// 	return{

		// 	}
		// }
		components: {
			indexassembly,
			navbar,
			bottom
		},
		setup(props) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				ActiveMsg: {
					pageIndex: 1,
					pageSize: 10,
					ActivityType: 0,
					SelectIsEnd: 0,
				},
				ActivityList: [],
				pageData: {
					LearningGardenList: []
				},
				SurveyObj:{
					ActivitySurveyId:0,
					ActivitySurveyGuestId:0,
				},
				userData: {}
			});

			let methods = {
				goTongji() {
					//console.log("SurveyObj",data.SurveyObj);
					this.jumpPage('/pages/study/questionNaire?ActivitySurveyId='+data.SurveyObj.ActivitySurveyId+"&ActivitySurveyGuestId="+data.SurveyObj.ActivitySurveyGuestId);
				},
				jumpPage(url) {
					uni.navigateTo({
						url: url,
					});
				},
				jumpTimetable() {
					uni.switchTab({
						url: '/pages/timetable/timeTable',
					})
				},
				//跳转至详情
				goActiveDetail(Id) {
					this.jumpPage(`/pages/activity/activityDetails?Id=${Id}`);
				},
				base64_decode(data) {
					var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
					var o1,
						o2,
						o3,
						h1,
						h2,
						h3,
						h4,
						bits,
						i = 0,
						ac = 0,
						dec = "",
						tmp_arr = [];
					if (!data) {
						return data;
					}
					data += "";
					do {
						h1 = b64.indexOf(data.charAt(i++));
						h2 = b64.indexOf(data.charAt(i++));
						h3 = b64.indexOf(data.charAt(i++));
						h4 = b64.indexOf(data.charAt(i++));
						bits = (h1 << 18) | (h2 << 12) | (h3 << 6) | h4;
						o1 = (bits >> 16) & 0xff;
						o2 = (bits >> 8) & 0xff;
						o3 = bits & 0xff;
						if (h3 == 64) {
							tmp_arr[ac++] = String.fromCharCode(o1);
						} else if (h4 == 64) {
							tmp_arr[ac++] = String.fromCharCode(o1, o2);
						} else {
							tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);
						}
					} while (i < data.length);
					dec = tmp_arr.join("");
					//dec = utf8_decode(dec);
					return dec;
				},
				//{"cmd":"checkin","params":{"classId":0,"ClassDate":"2022-4-19","ClassRoomId":27,
				//"School_Id":0,"TeacherId":8,"CheckStatus":0,"StudyNum":"90","ClassTimeId":16531}}

				scan() {
					//调起条码扫描
					console.log("进来了")
					let that = this
					uni.scanCode({
						scanType: ['qrCode'],
						success: function(res) {
							// 解码
							var saveObj={};
							try {
								 saveObj = that.base64_decode(res.result)
								// console.log(saveObj)
							} catch (e) {
								//TODO handle the exception
								// console.log(e)
							}
							var jsonObj= JSON.parse(saveObj)
							if(jsonObj.cmd =="checkin"){
								var userData = uni.getStorageSync('userInfo');
								console.log("userData",userData);
								jsonObj.params.StuId=userData.AccountId;
								 var array=[];
								 array.push(jsonObj.params);
								console.log("jsonObj.params",jsonObj.params)
								let result = getSweepCode(array);
								if (result) {
									// console.log(result)
									if (result.Code == 1) {
										 console.log('扫码成功')
										 uni.navigateTo({
											url:'./success',
										 })
									}else{
										console.log('扫码失败')
										uni.navigateTo({
											url: './fail'
										})
									}
								}
								}
						},
					});
				},
				async getActivityData() {
					let res = await getActivityList(data.ActiveMsg);
					if (res.resultCode == 1) {
						data.ActivityList = res.data.pageData;
					}
				},
				getIndexData() {
					proxy.$request("/AppletIndex/GetIndexInfo_V2", {}).then(res => {
						data.pageData = res.Data
						uni.setStorageSync("indexData", res.Data);
						data.SurveyObj.ActivitySurveyId=res.Data.ActivitySurveyId;
						data.SurveyObj.ActivitySurveyGuestId=res.Data.ActivitySurveyGuestId;
						if (data.pageData.LearningGardenList.length > 0) {
							data.pageData.LearningGardenList.forEach((x, y) => {
								if (x.List.length > 0) {
									x.List.forEach(async (item, index) => {
										await this.getColor(item.Img, index, y).then(v => {
											data.pageData.LearningGardenList[v.y]
												.List[
													v.index].bgcolor = v.formatres;
											data.pageData.LearningGardenList[v.y]
												.List[
													v.index].bgcolor1 = v
												.formatres1;
											data.pageData.LearningGardenList[v.y]
												.List[
													v.index].bgcolor2 = v
												.formatres2;

										})
									})
								}
							})
						}
					})
				},
				async getColor(src, index, y) {
					let res = await getImageColor('myCanvas', 'img' + index, src)
					let obj = {}
					obj.formatres = `rgba(${res.r},${res.g},${res.b},0.01)`
					obj.formatres1 = `rgba(${res.r},${res.g},${res.b},0.6)`
					obj.formatres2 = `rgba(${res.r},${res.g},${res.b},1)`
					obj.index = index
					obj.y = y
					return obj
				},
				againdata() {
					data.userData = uni.getStorageSync('userInfo');
					methods.getIndexData();
					methods.getActivityData();
				},
				jumpGarden(id) {
					if (id == 1) {
						uni.navigateTo({
							url: "/pages/learningGarden/learningGardenList"
						})
					} else if (id == 2) {
						// uni.navigateTo({
						// 	url:"/pages/learningGarden/learningGardenList"
						// })
					}
				},
				jumpJiahemini() {
					let userinfo = uni.getStorageSync('userInfo');
					wx.navigateToMiniProgram({
						appId: 'wx38e054ee42b054f4',
						path: '', //为空则打开首页
						extraData: {
							Id: userinfo.Id || 0
						}
					})

				}
			};

			onMounted(() => {

			});
			return {
				...toRefs(data),
				...methods,
			};
		},
		onShow() {
			this.getActivityData();
			this.getIndexData();
			this.userData = uni.getStorageSync('userInfo');
		},
		onShareAppMessage() {
			return {
				title: "甲小鹤",
				query: "/pages/index/index",
				imageUrl: "",
			};
		},
		onShareTimeline() {
			return {
				title: "甲小鹤",
				query: "/pages/index/index",
				imageUrl: "",
			};
		},
	};
</script>

<style scoped>
	.indexpage {
		min-height: 100vh;
		background-color: #F5F5F5;
		box-sizing: border-box;
	}

	.wenjuan_dc {
		position: fixed;
		width: 83rpx;
		height: 83rpx;
		right: 30rpx;
		bottom: 200rpx;
		z-index: 999;
	}

	.wenjuan_dc img {
		width: 100%;
		height: 100%;
	}

	.navbarSticky {
		display: sticky;
		top: 0;
		z-index: 9;
	}

	.navbarCon {
		height: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		background-color: #F5F5F5;
	}

	.pagetitle {
		font-size: 46rpx;
		font-weight: 800;
		color: #111111;
		margin-right: 30rpx;
	}

	.loginBox {
		width: 110rpx;
		height: 100%;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #4C50E7;
		margin-right: 220rpx;
	}

	.loginIcon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
	}

	.scanBox {
		width: 40rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.scanIcon {
		width: 40rpx;
		height: 40rpx;
	}

	.scanText {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #111111;
		line-height: 20rpx;
	}

	.activeContent {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		margin: 40rpx 0 60rpx 0;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.swiperList {
		position: relative;
		width: 100%;
		height: 300rpx;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		background-clip: border-box;
		box-sizing: border-box;
		overflow: hidden;
		color: #fff;
		border-radius: 20rpx;
	}

	.swiper_Time {
		position: absolute;
		top: 20rpx;
		right: 40rpx;
		font-size: 26rpx;
	}

	.swiper_Name {
		position: absolute;
		bottom: 20rpx;
		left: 30rpx;
		font-size: 26rpx;
	}

	.swiper {
		height: 100%;
		position: relative;
		border-radius: 20rpx;
	}

	.swiper /deep/ .wx-swiper-dot {
		width: 10rpx;
		height: 10rpx;
		margin-right: 0;
	}

	.wordBox {
		box-sizing: border-box;
		/* height: 390rpx; */
		background-color: #EBEBEB;
		padding: 60rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.wordTitle {
		font-size: 28rpx;
		font-weight: bold;
		color: #111111;
		margin-bottom: 45rpx;
	}

	.wordItem {
		width: 200rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.wordItemTitle {
		width: 100%;
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.wordItemText {
		font-size: 78rpx;
		line-height: 60rpx;
		font-weight: 800;
		font-style: italic;
		color: #111111;
		white-space: nowrap;
	}

	.wordItemTextUnit {
		font-size: 22rpx;
		font-weight: 400;
		font-style: normal;
		margin-left: 10rpx;
	}

	.wordDuration {
		margin: 50rpx 0 15rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}

	.wordBtn {
		width: 130rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		background-color: #4C50E7;
		border-radius: 25rpx;
		margin: 10rpx auto;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FEFEFF;
	}

	.courseBox {
		width: 690rpx;
		margin: 0 auto;
		height: 350rpx;
		background: linear-gradient(0deg, #FFFFFF, #4C50E7);
		box-shadow: 2rpx 4rpx 40rpx 0rpx rgba(212, 212, 212, 0.6);
		border-radius: 24rpx;
		box-sizing: border-box;
		padding: 10rpx;
		position: relative;
		margin-bottom: 80rpx;
	}

	.courseInnerBox {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 24rpx;
	}

	.courseTitle {
		box-sizing: border-box;
		padding: 10rpx 20rpx 10rpx 10rpx;
		background: linear-gradient(0deg, #6C70EB, #505FEB);
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		border-bottom-right-radius: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.courseInnerBox .top {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 60rpx;
		margin-bottom: 50rpx;
	}

	.courseIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.courseDateStr {
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
	}

	.courseIcon2 {
		width: 235rpx;
		height: 225rpx;
	}

	.courseNameBox {
		width: 410rpx;
		box-sizing: border-box;
		padding: 0 25rpx;
	}

	.className {
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
		margin-bottom: 20rpx;
	}

	.courseName {
		width: 355rrpx;
		height: 75rpx;
		line-height: 73rpx;
		background-color: #F5F5F5;
		border-radius: 35rpx;
		font-size: 42rpx;
		font-weight: bold;
		color: #111111;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.learningGarden {
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.learningGardenSbutitle {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		margin-bottom: 30rpx;
	}

	.learningGardenTitle {
		font-size: 46rpx;
		font-weight: 800;
		color: #111111;
		margin-bottom: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.gardenCon {
		width: 680rpx;
		height: 455rpx;
		border-radius: 24rpx;
		margin-bottom: 60rpx;
		overflow: hidden;
		position: relative;
	}

	.gardenTextBox {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 180rpx;
		background: linear-gradient(0deg, #FBD140);
		box-sizing: border-box;
		padding: 80rpx 40rpx 0;
		overflow: hidden;
	}

	.gardenTitle {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		white-space: nowrap;
	}

	.gardenDigest {
		font-size: 20rpx;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 15rpx;
		white-space: nowrap;
	}

	.starbucks {
		display: block;
		width: 700rpx;
		height: auto;
		box-sizing: border-box;
		overflow: hidden;
		border-radius: 20rpx;
		margin: 60rpx auto;
	}
	.diaocha-box{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.3);		
		padding:0 10vw;
		    display: flex;
		    align-items: center;
		    z-index: 1000;
	}
	.diaocha-box image{
		width:80vw;
	}
	.no-scroll{
		overflow: hidden !important;
		height: 100vh !important;
	}
</style>
