<template>
	<div class="content my-content main-content">
		<!-- 头部 -->
		<div :class="{ header: true, 'scroll white': isScrollTop }">
			<div class="back"></div>
			<div class="header-title">我的</div>
		</div>
		<!-- 轮播图 -->
		<div class="banner my-banner">
			<img src="../../../assets/images/user/banner.jpg" alt="" />
			<div class="my-photo">
				<span><img src="../../../assets/images/user/photo.png" /></span>
				<p>张桑</p>
			</div>
		</div>
		<!-- 免费咨询卡 -->
		<div class="user-receive" @click="toPage()" v-if="isUse == 0">
			<img src="../../../assets/images/user/card.png" alt="" />
			<div class="receive-txt">
				<span class="use-btn" v-if="isReceive == 1">立即使用</span>
				<span class="receive-btn" v-if="isReceive == 0">立即领取</span>
				<p>有效期：2022.2.1-2022.2.15</p>
			</div>
		</div>
		<div class="line" v-if="isReceive == 1"></div>
		<ul class="student-information">
			<li @click="goPage('/bind')">
				<span><img src="../../../assets/images/user/icon-phone.png" alt="" /></span>
				<p>手机号<em>18683958573</em></p>
				<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
			</li>
			<li @click="goPage('/info')">
				<span><img src="../../../assets/images/user/icon-student.png" alt="" /></span>
				<p>考生信息</p>
				<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
			</li>
		</ul>
		<div class="feedback" @click="goPage('/feedback')">
			<span><img src="../../../assets/images/user/icon-feedback.png" alt="" /></span>
			<p>意见和反馈</p>
			<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
		</div>
		<div :class="{ 'my-report': true, open: isOpen }" @click="isOpen = !isOpen">
			<span><img src="../../../assets/images/user/icon-report.png" alt="" /></span>
			<p>我的报告</p>
			<img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
		</div>
		<ul :class="{ 'report-list': true, open: isOpen }">
			<li @click="goPage('/report')">
				<p>职业与专业定位整合测试（融合版）</p>
				<span>2022-05-12 13:28</span>
			</li>
			<li @click="goPage('/report')">
				<p>职业与专业定位整合测试（融合版）</p>
				<span>2022-05-12 13:28</span>
			</li>
			<li @click="goPage('/report')">
				<p>霍兰德职业兴趣测评（完整版）</p>
				<span>2022-05-12 13:28</span>
			</li>
			<li @click="goPage('/report')">
				<p>DISC性格测评</p>
				<span>2022-05-12 13:28</span>
			</li>
			<li @click="goPage('/report')">
				<p>职业与专业定位整合测试（融合版）</p>
				<span>2022-05-12 13:28</span>
			</li>
			<li @click="goPage('/report')">
				<p>职业与专业定位整合测试（融合版）</p>
				<span>2022-05-12 13:28</span>
			</li>
			<li @click="goPage('/report')">
				<p>霍兰德职业兴趣测评（完整版）</p>
				<span>2022-05-12 13:28</span>
			</li>
			<li @click="goPage('/report')">
				<p>DISC性格测评</p>
				<span>2022-05-12 13:28</span>
			</li>
		</ul>
		<div class="feedback-btn">退出登录</div>
		<tabbar :current="4"></tabbar>
	</div>
</template>

<script>
	import tabbar from '../../../components/tabbar.vue'
	export default {
		name: "expert",
		components: {
			tabbar
		},
		data() {
			return {
				isScrollTop: false,
				isReceive: 1, //是否领取咨询机会
				isUse: 0, //是否使用
				isOpen: false,
			};
		},
		created() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop);
		},
		methods: {
			// 判断跳转方式
			toPage() {
				if (this.isReceive == 1) {
					this.$router.push("/expert");
				} else if (this.isReceive == 0) {
					this.$router.push("/information");
				} else {
					return false;
				}
			},
			// 页面跳转
			goPage(path) {
				this.$router.push(path);
			},
			// 滚动改变样式
			eventScrollTop() {
				let scrollTop =
					document.body.scrollTop || document.documentElement.scrollTop;
				if (scrollTop >= 5) {
					if (this.isScroll) {
						this.isScroll = false;
						this.isScrollTop = true;
					}
				} else {
					if (!this.isScroll) {
						this.isScroll = true;
						this.isScrollTop = false;
					}
				}
			},
		},
		destroyed() {
			window.removeEventListener("scroll", this.eventScrollTop);
		},
		//keep-alive进入时触发
		activated() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop);
		},
		//keep-alive离开时触发
		deactivated() {
			window.removeEventListener("scroll", this.eventScrollTop);
		},
	};
</script>

<style scoped>
	.banner,
	.banner img {
		width: 100%;
	}
</style>
