<template>
	<view class="content">
		<view class="">
			<view class="top-d-s">
				<view class="touxiang">
					<image :src="imageUrl + cadetOne.vactor" mode=""></image>
				</view>
				<view class="name_">{{cadetOne.name}}</view>
			</view>
			<view class="bai-box">
				<view class="tab-box">
					<view @click="changeTabberTop(index)" class="t-box" v-for="(item,index) in 1" :key="index">
						<view :class="{'lvsize' :tabindex == index  }">{{'基本信息'}}</view>
						<view class="gang" :class="{'lvback' :tabindex == index  }"></view>
					</view>

				</view>

				<view class="h-bs-">
					<view class="">学员名称：</view>
					<view class="">
						{{cadetOne.name}}
					</view>
				</view>
				<view class="h-bs-">
					<view class="">联系电话：</view>
					<view class="">
						{{cadetOne.phone}}
					</view>
				</view>

				<view class="h-bs-">
					<view class="">身份证号：</view>
					<view class="">
						{{cadetOne.identity}}
					</view>
				</view>
				<view class="h-bs-">
					<view class="">教学教练：</view>
					<view class="">
						{{cadetOne.jlName}}
					</view>
				</view>
				<view class="h-bs-">
					<view class="">入学时间：</view>
					<view class="">
						{{cadetOne.createTime}}
					</view>
				</view>
			</view>


			<view class="bai-box">
				<view class="tab-box">
					<view class="t-box" v-for="(item,index) in 1" :key="index">
						<view :class="{'lvsize' :tabindex2 == index  }">{{'报名课程'}}</view>
						<view class="gang" :class="{'lvback' :tabindex2 == index  }"></view>
					</view>

				</view>

				<view class="box-ds">
					<view class="left-box">
						<image :src="imageUrl + cadetOne.photo" mode=""></image>
					</view>
<!--					<view class="">
						<view class="box-title">{{cadetOne.driveSchoolCourse.automatic}}</view>
						<view class="wrap-box" style="	margin-bottom: 5px;">
							<view class="icon-lv">{{cadetOne.driveSchoolCourse.license}}</view>
							<view class="icon-h">{{cadetOne.driveSchoolCourse.name}}</view>
						</view>
						<view class="wrap-box">
							<view class="price_">￥{{cadetOne.driveSchoolCourse.price}}</view>
							<view class="sc">{{cadetOne.driveSchoolCourse.price}}</view>
						</view>
					</view>-->
				</view>
			</view>
			<view class="container">


				<view class="bai-box">
					<view class="tab-box">
						<view class="t-box" v-for="(item,index) in 1" :key="index">
							<view :class="{'lvsize' :tabindex3 == index  }">{{'预约记录'}}</view>
							<view class="gang" :class="{'lvback' :tabindex3 == index  }"></view>
						</view>

					</view>
					<u-steps current="1" direction="column" activeColor="#4AA76F">
						<u-steps-item title="AI智能+人工教学" desc="10:30">
						</u-steps-item>
						<u-steps-item title="AI智能+人工教学" desc="10:35">
						</u-steps-item>
						<u-steps-item title="AI智能+人工教学" desc="11:40"></u-steps-item>
					</u-steps>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import request from "@/utils/request.js"

	export default {
		data() {
			return {
        imageUrl: this.$imagesUrl,
				tabindex: 0,
				tabindex2: 1,
				tabindex3: 2,
				tabList: [
					'基本信息', '报名课程', '预约历史',
				],
				tabList1: [
					'基本信息', '报名课程', '预约历史',
				],
				userId: null,
				cadetOne: null,
			}
		},
		onLoad: function(option) {
			this.userId = option.userId
		},
		onShow() {
			this.findCadetOne()
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},

		methods: {
			async findCadetOne() {
				let res = await request({
					url: `/system/pay/getInfoByUserIndenty/${this.userId}`,
					method: 'get'
				})
				this.cadetOne = res.data
			},
			goback() {
				uni.navigateBack()
			},
			// changeTabberTop(index) {
			// 	this.tabindex = index
			// }
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		background: linear-gradient(180deg, #4AA76F 0%, #4AA76F 10%, #f7f7f7 28%, #f7f7f7 100%);
		height: 100vh;
		box-sizing: border-box;
		padding-top: 10px;
	}

	.container {
		width: 100%;
		background: #f7f7f7;
		box-sizing: border-box;

	}

	.top-d-s {
		width: 95%;
		margin: 10px auto;
		display: flex;
		align-items: center;
	}

	.touxiang {
		width: 56px;
		height: 56px;
		border-radius: 0px 0px 0px 0px;
		overflow: hidden;
		border-radius: 50%;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.name_ {
		font-weight: bold;
		font-size: 16px;
		color: #FFFFFF;
	}

	.bai-box {
		width: 95%;
		margin: 10px auto;
		background: #FFFFFF;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
	}

	.tab-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.t-box {
		width: 33.3%;
		text-align: center;
		font-weight: 400;
		font-size: 14px;
		color: #333333;
	}

	.gang {
		width: 16px;
		height: 3px;
		margin: 0px auto;
		margin-top: 5px;
		// background: #4AA76F;
	}

	.lvsize {
		color: #4AA76F !important;
	}

	.lvback {
		background: #4AA76F;
	}

	.box-ds {
		display: flex;
		align-items: center;

	}

	.left-box {
		width: 106px;
		height: 66px;
		overflow: hidden;
		border-radius: 6px;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box-title {
		font-weight: 800;
		font-size: 14px;
		color: #333333;
		margin-bottom: 5px;
	}

	.wrap-box {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.icon-lv {
		background: #E6F5F0;
		border-radius: 2px 2px 2px 2px;

		box-sizing: border-box;
		padding: 5px;
		font-weight: 400;
		font-size: 10px;
		font-size: 10px;
		color: #4AA76F;
		margin-right: 10px;
	}

	.icon-h {
		background: #FFEDD4;
		border-radius: 2px 2px 2px 2px;

		box-sizing: border-box;
		padding: 5px;
		font-weight: 400;
		font-size: 10px;
		font-size: 10px;
		color: #EDA23A;
	}

	.price_ {
		font-weight: bold;
		font-size: 14px;
		color: #FB423B;
		margin-right: 15px;
	}

	.sc {
		font-size: 10px;
		color: #AAAAAA;
		text-decoration-line: line-through;
		text-transform: none;
	}

	.liang-box {
		border-top: 1px solid #DDDDDD;

		box-sizing: border-box;
		padding: 10px 0px;
		margin-top: 10px;
	}

	.lb-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		color: #999999;
		margin-bottom: 5px;

	}

	.right-icon {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 12px;
		font-weight: bold;
		margin-top: 10px;

	}

	.h-bs- {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding: 10px 0px;
		font-size: 12px;
	}
</style>
