<template>
	<div class="content my-content">
		<!-- 头部 -->
		<div :class="{'header':true,'scroll white':isScrollTop,'white':true}">
			<div class="back" @click="$router.go(-1)"><img src="../../../assets/images/home/expert/back.png" alt=""></div>
			<div class="header-title">我的报告</div>
		</div>
		<div class="report pull-content">
			<ul class="report-nav">
				<li :class="{'active':isShow}" @click="isShow=!isShow">
					个性特质分析
				</li>
				<li :class="{'active':!isShow}" @click="isShow=!isShow">
					专业类匹配度
				</li>
			</ul>
			<div class="report-item-all">
				<div class="report-item" v-show="isShow">
					<div class="report-relation">
						<span>赵四</span>
						<span>四川</span>
						<span v-show="roleTType == 'student'">考生测评</span>
						<span v-show="roleTType == 'parents'">亲属测评</span>
						<span>2022-02-28 15:25</span>
					</div>
					<div class="report-box1 report-box">
						<div class="report-title">
							一、职业价值观
							<!-- 一、{{baseList1.summary}} -->
						</div>
						<span class="report-h2">
							报告人的职业价值观趋向管理型和创造型
							<!-- {{baseList1.reportspanList.summary}} -->
						</span>
						<span class="txt2">
							报告人的职业价值观关键词：运筹帷幄、推陈出新
							<!-- {{baseList1.reportspanList.keywords_span}} -->
						</span>
						<span class="report-h3">
							你最适合的职业类型是升迁到组织中更高的管理职位，进入管理层或者成为总经理。这样能够整合其他人的工作，并对组织中某项工作的绩效承担责任。；你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业。一旦你认为时机成熟，就会尽快开始自己的创业历程。你希望自己的企业有非常高的现金收入，以证明你的能力。。
							<!-- {{baseList1.reportspanList.description}} -->
						</span>
					</div>
					<div class="report-box2 report-box">
						<div class="report-title">
							一、职业价值观
							<!-- 一、{{baseList1.summary}} -->
						</div>
						<span class="report-h2">
							报告人的职业价值观趋向管理型和创造型
							<!-- {{baseList1.reportspanList.summary}} -->
						</span>
						<span class="txt2">
							报告人的职业价值观关键词：运筹帷幄、推陈出新
							<!-- {{baseList1.reportspanList.keywords_span}} -->
						</span>
						<span class="report-h3">
							你最适合的职业类型是升迁到组织中更高的管理职位，进入管理层或者成为总经理。这样能够整合其他人的工作，并对组织中某项工作的绩效承担责任。；你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业。一旦你认为时机成熟，就会尽快开始自己的创业历程。你希望自己的企业有非常高的现金收入，以证明你的能力。。
							<!-- {{baseList1.reportspanList.description}} -->
						</span>
						<!-- <div class="report-img">
							<div style="height:600rpx" a:if="{{twobiao}}">
								<f2 onInit="onInitChart2"></f2>
							</div>
						</div> -->
					</div>
					<div class="report-box3 report-box">
						<div class="report-title">
							一、职业价值观
							<!-- 一、{{baseList1.summary}} -->
						</div>
						<span class="report-h2">
							报告人的职业价值观趋向管理型和创造型
							<!-- {{baseList1.reportspanList.summary}} -->
						</span>
						<span class="txt2">
							报告人的职业价值观关键词：运筹帷幄、推陈出新
							<!-- {{baseList1.reportspanList.keywords_span}} -->
						</span>
						<span class="report-h3">
							你最适合的职业类型是升迁到组织中更高的管理职位，进入管理层或者成为总经理。这样能够整合其他人的工作，并对组织中某项工作的绩效承担责任。；你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业。一旦你认为时机成熟，就会尽快开始自己的创业历程。你希望自己的企业有非常高的现金收入，以证明你的能力。。
							<!-- {{baseList1.reportspanList.description}} -->
						</span>
						<!-- <div class="report-img">
							<div style="height:600rpx">
								<f2 onInit="onInitChartLei"></f2>
							</div>
						</div> -->
					</div>
					<div class="report-box4 report-box">
						<div class="report-title">
							一、职业价值观
							<!-- 一、{{baseList1.summary}} -->
						</div>
						<span class="report-h2">
							报告人的职业价值观趋向管理型和创造型
							<!-- {{baseList1.reportspanList.summary}} -->
						</span>
						<span class="txt2">
							报告人的职业价值观关键词：运筹帷幄、推陈出新
							<!-- {{baseList1.reportspanList.keywords_span}} -->
						</span>
						<span class="report-h3">
							你最适合的职业类型是升迁到组织中更高的管理职位，进入管理层或者成为总经理。这样能够整合其他人的工作，并对组织中某项工作的绩效承担责任。；你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业。一旦你认为时机成熟，就会尽快开始自己的创业历程。你希望自己的企业有非常高的现金收入，以证明你的能力。。
							<!-- {{baseList1.reportspanList.description}} -->
						</span>
						<!-- <div class="report-img">
							<div class="item-k">
								<div>{{dataList4[0][0].value}}</div>
								<div><span style="width:{{leftNei}}" a:if="{{leftNei>rightNei}}"></span></div>
								<div><span style="width:{{rightNei}}" a:if="{{leftNei<rightNei}}"></span></div>
								<div>{{dataList4[0][1].value}}</div>
							</div>
						</div>
						<div class="report-img">
							<div class="item-k">
								<div>{{dataList4[1][0].value}}</div>
								<div><span style="width:{{twoLeftNei}}" a:if="{{twoLeftNei>twoRightNei}}"></span>
								</div>
								<div><span style="width:{{twoRightNei}}" a:if="{{twoLeftNei<twoRightNei}}"></span>
								</div>
								<div>{{dataList4[1][1].value}}</div>
							</div>
						</div>
						<div class="report-img">
							<div class="item-k">
								<div>{{dataList4[2][0].value}}</div>
								<div><span style="width:{{threeLeftNei}}"
										a:if="{{threeLeftNei>threeRightNei}}"></span></div>
								<div><span style="width:{{threeRightNei}}"
										a:if="{{threeLeftNei<threeRightNei}}"></span></div>
								<div>{{dataList4[2][1].value}}</div>
							</div>
						</div>
						<div class="report-img">
							<div class="item-k">
								<div>{{dataList4[3][0].value}}</div>
								<div><span style="width:{{fourLeftNei}}" a:if="{{fourLeftNei>fourRightNei}}"></span>
								</div>
								<div><span style="width:{{fourRightNei}}"
										a:if="{{fourLeftNei<fourRightNei}}"></span></div>
								<div>{{dataList4[3][1].value}}</div>
							</div>
						</div> -->
					</div>
					<div class="report-box5 report-box">
						<div class="report-title">
							一、职业价值观
							<!-- 一、{{baseList1.summary}} -->
						</div>
						<span class="report-h2">
							报告人的职业价值观趋向管理型和创造型
							<!-- {{baseList1.reportspanList.summary}} -->
						</span>
						<span class="txt2">
							报告人的职业价值观关键词：运筹帷幄、推陈出新
							<!-- {{baseList1.reportspanList.keywords_span}} -->
						</span>
						<span class="report-h3">
							你最适合的职业类型是升迁到组织中更高的管理职位，进入管理层或者成为总经理。这样能够整合其他人的工作，并对组织中某项工作的绩效承担责任。；你最适合的职业类型是能凭借自己的能力和冒险愿望扫除障碍的创业型企业。一旦你认为时机成熟，就会尽快开始自己的创业历程。你希望自己的企业有非常高的现金收入，以证明你的能力。。
							<!-- {{baseList1.reportspanList.description}} -->
						</span>
						<!-- <div class="report-img">
							<div style="height:600rpx" a:if="{{fivebiao}}">
								<f2 onInit="onInitChartLei2"></f2>
							</div>
						</div> -->
					</div>
				</div>
				<!-- 专业类匹配度 -->
				<div class="report-item" v-show="!isShow">
					<div class="report-exponent">
						<div class="exponent-title">
							<div class="exponent-star">
								推荐指数：<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
								<!-- <span a:for="{{item.stars}}">★</span> -->
							</div>
							<div class="percentage">
								匹配度：>90%<!-- {{item.degree}} -->
							</div>
						</div>
						<div class="exponent-list">
							<div class="exponent-item">
								<span>
									自然学科类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
								</div>
							</div>
							<div class="exponent-item">
								<span>
									社会科学类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
									<span>中西医结合</span>
									<span>中西医结合</span>
								</div>
							</div>
							<div class="exponent-item">
								<span>
									人文科学类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
								</div>
							</div>
						</div>
					</div>
					<div class="report-exponent">
						<div class="exponent-title">
							<div class="exponent-star">
								推荐指数：<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
								<!-- <span a:for="{{item.stars}}">★</span> -->
							</div>
							<div class="percentage">
								匹配度：>90%<!-- {{item.degree}} -->
							</div>
						</div>
						<div class="exponent-list">
							<div class="exponent-item">
								<span>
									自然学科类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
								</div>
							</div>
							<div class="exponent-item">
								<span>
									社会科学类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
								</div>
							</div>
							<div class="exponent-item">
								<span>
									人文科学类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
									<span>中西医结合</span>
								</div>
							</div>
						</div>
					</div>
					<div class="report-exponent">
						<div class="exponent-title">
							<div class="exponent-star">
								推荐指数：<span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
								<!-- <span a:for="{{item.stars}}">★</span> -->
							</div>
							<div class="percentage">
								匹配度：>90%<!-- {{item.degree}} -->
							</div>
						</div>
						<div class="exponent-list">
							<div class="exponent-item">
								<span>
									自然学科类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
									<span>中西医结合</span>
									<span>自然保护与环境生态类</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
								</div>
							</div>
							<div class="exponent-item">
								<span>
									社会科学类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
									<span>中西医结合</span>
									<span>中西医结合</span>
									<span>中西医结合</span>
								</div>
							</div>
							<div class="exponent-item">
								<span>
									人文科学类<br />
									(10)
									<!-- {{item2.name}}
									({{item2.childrenSize}}) -->
								</span>
								<div class="exponent-item-son">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "report",
		data() {
			return {
				isScrollTop: false,
				isShow:true, //切换报告
				roleTType: 'student', //报告人类型
			}
		},
		created() {
			this.isScroll = true;
			window.addEventListener("scroll", this.eventScrollTop);
		},
		methods: {
			// 页面跳转
			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>

</style>
