<template>
	<view class="content">
		<view class="">
			<view class="top-d-s">
				<view class="touxiang">
					<image :src="imageUrl+userInfo.image" mode=""></image>
				</view>
				<view class="name_">{{userInfo.instructorName}}</view>
			</view>

			<view class="bai-box">
				<view class="tab-box">
					<view class="t-box" @click="switchType(index)" v-for="(item,index) in tabList" :key="index">
						<view :class="{'lvsize' :tabindex2 == index  }">{{item}}</view>
						<view class="gang" :class="{'lvback' :tabindex2 == index  }"></view>
					</view>

				</view>

				<view class="box-ds" v-if="tabindex == 1" v-for="(item,index) in dataList" :key="index">
					<view class="d-s">
						<view class="left-box">
							<image :src="imageUrl+item.photo" mode=""></image>
						</view>
						<view class="">
							<view class="box-title" v-if="item.name == 1">成人班</view>
							<view class="box-title" v-if="item.name == 2">学生班</view>
							<view class="wrap-box" style="	margin-bottom: 5px;">
								<view class="icon-lv">{{item.automatic}}</view>
								<view class="icon-h">{{item.license}}</view>
							</view>
							<view class="wrap-box">
								<view class="price_">￥{{item.price}}</view>
								<view class="sc">定金：{{item.reserveMoney}}</view>
							</view>
						</view>
					</view>


				</view>
				<view class="box-ds" v-if="tabindex == 0" v-for="(item,index) in studentList" :key="index">
					<view class="d-s">

						<view class="">
							<view class="box-title">学员名称: {{" "+item.name}}</view>
							<view class="box-title">课程: {{item.coueseName ||'暂无' }}</view>
							<view class="box-title">电话：{{item.phone}}</view>
							<view class="price_">￥{{item.price || 0}}</view>
						</view>
						<view @click="makePhone(item.phone)" class="top-right">
							<image src="../../static/teel.png" mode=""></image>
						</view>
					</view>


				</view>

				<view class=""></view>
			</view>


		</view>

	</view>
</template>

<script>
	import request from '../../utils/request'
	export default {
		data() {
			return {
				imageUrl: this.$imagesUrl,
				tabindex: 0,
				tabindex2: 0,
				queryParams: {
					pageNum: 1,
					pageSize: 100,
					deptId: uni.getStorageSync("deptId"),
					name: null,
					jlId: null

				},
				dataList: [],
				tabList: [
					'教学学员', '教学课程',
				],
				userInfo: {},
				studentList: [],
				id: null

			}
		},
		onLoad(option) {
			this.id = option.id
			this.queryParams.jlId = option.id
			this.getDataInfo()
			this.getUserInfo()
			this.getStudent()
		},


		methods: {
			makePhone(phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum
				})
			},

			getUserInfo() {
				request({
					url: '/drivingSchool/system/schoolCoach/' + this.id,
					method: 'get'
				}).then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data
					}
				})
			},
			getStudent() {
				request({
					url: '/system/pay/applet/getUserList',
					method: 'get',
					params: this.queryParams

				}).then((res) => {
					if (res.code == 200) {
						this.studentList = res.rows
					}
				})
			},
			async getDataInfo() {
				let res = await request({
					url: '/drivingSchool/system/driveSchoolCourse/list',
					method: 'get',
					params: this.queryParams
				})

				if (res.code == 200) {
					this.dataList = res.rows
					console.log('123456789', this.dataList, res.rows);
				}


			},
			switchType(idx) {
				this.tabindex = idx
			},
			goAdd() {
				uni.navigateTo({
					url: '/pages/index/addCoach'
				})
			},
			goback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.top-right {
		z-index: 9999;
		width: 53px;
		height: 53px;

		overflow: hidden;
		padding-left: 126px;

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

	}

	.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;

	}

	.d-s {
		display: flex;
		align-items: center;

	}

	.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%;
		}
	}

	.touxiang1 {
		width: 36px;
		height: 36px;
		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: 50%;
		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;
		margin-bottom: 15px;

	}

	.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-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;
	}

	.anniu {
		width: 313px;
		height: 40px;
		background: #FFFFFF;
		border-radius: 20px 20px 20px 20px;
		border: 1px solid #4AA76F;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4AA76F;
		margin: 15px auto;
	}
</style>