<template>
	<view class="achievement">
		<!-- 成绩 -->
		<view class="header-wrap">
			<view class="tabs-wrap area flex">
				<view :class="current==index?'tabs-active':'tabs-item'" v-for="(item,index) in tabs" :key="index"
					@tap="tabsClick(item,index)">
					{{item}}
				</view>
			</view>
		</view>

		<!-- 成绩查看 -->
		<view v-if="current==0">
			<view class="content_wrap">
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							公务员
						</view>
						<view class="describe">
							行测 | 申论
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/result_list/result_list?type=0">
						去查看
					</view>
				</view>
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							事业单位成绩
						</view>
						<view class="describe">
							职业能力测试 | 综合运用能力
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/result_list/result_list?type=1">
						去查看
					</view>
				</view>
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							特岗教师成绩
						</view>
						<view class="describe">
							专业课
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/result_list/result_list?type=2">
						去查看
					</view>
				</view>
			</view>
		</view>

		<!-- 目标指定 -->
		<view v-if="current==1">
			<view class="content_wrap">
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							公务员
						</view>
						<view class="describe">
							行测 | 申论
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/target_edit/target_edit?type=0">
						去制定
					</view>
				</view>
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							事业单位成绩
						</view>
						<view class="describe">
							职业能力测试 | 综合运用能力
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/target_edit/target_edit?type=1">
						去制定
					</view>
				</view>
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							特岗教师成绩
						</view>
						<view class="describe">
							专业课
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/target_edit/target_edit?type=2">
						去制定
					</view>
				</view>
			</view>
		</view>

		<!-- 成绩分析 -->
		<view v-if="current==2">
			<view class="content_wrap">
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							公务员
						</view>
						<view class="describe">
							行测 | 申论
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/result_ana/result_ana?type=0">
						去查看
					</view>
				</view>
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							事业单位成绩
						</view>
						<view class="describe">
							职业能力测试 | 综合运用能力
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/result_ana/result_ana?type=1">
						去查看
					</view>
				</view>
				<view class="see-wrap area flex">
					<view class="">
						<view class="">
							特岗教师成绩
						</view>
						<view class="describe">
							专业课
						</view>
					</view>
					<view class="go-see" @click="$service.jump" data-url="/pagesStu/result_ana/result_ana?type=2">
						去查看
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['成绩查看', '目标定制', '成绩分析'],
				current: 0,
			}
		},
		methods: {
			tabsClick(item, index) {
				this.current = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.achievement {
		position: relative;
	}

	.tabs-wrap {
		justify-content: space-around;
		align-items: center;

		.tabs-item {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.8;
		}

		.tabs-active {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: relative;
		}

		.tabs-active::after {
			content: '';
			width: 38rpx;
			height: 6rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			position: absolute;
			bottom: -16rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}

	// 成绩查看
	.content_wrap {
		position: absolute;
		top: 120rpx;
		left: 50%;
		transform: translate(-50%, 0);

		.see-wrap {
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #545D71;
			padding: 0 48rpx 0 44rpx;
			margin-bottom: 28rpx;
			justify-content: space-between;
			align-items: center;

			.describe {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #B6B9C0;
				margin-top: 12rpx;
			}

			.go-see {
				width: 192rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background: #2D81FF;
				border-radius: 40rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	// 目标制定

	// 成绩分析
</style>