<template>
	<view class="person">
		<view class="info flex_between_center flex_nowrap">
			<view class="left flex_start_between">
				<view class="name"> <text v-if="pageData.StuName">Hello，{{ pageData.StuName }}</text><text
						v-if="!pageData.StuName&&pageData.StuName!==''"
						@click="jumpPage('/pages/login/login')">未登录</text> </view>
			</view>
			<view class="right">
				<image :src="pageData.StuIcon" mode="aspectFill" style="width:100%;height:100%;border-radius: 50%;">
				</image>
			</view>
		</view>
		<view class="orderInfo flex_between_center">
			<view class="orderItem" @click="jumpPage(`/pages/contract/orderList?type=1`)">
				<view class=" flex_between_center" style="width:100%">
					<view class="orderNum">{{ pageData.OrderNum||0 }}</view>
					<image src="../../static/image/person/order1.png" mode="aspectFill" class="orderIcon"></image>
				</view>
				<view class="orderName">
					语培订单
				</view>
			</view>
			<view class="orderItem" @click="jumpPage(`/pages/contract/orderList?type=2`)">
				<view class=" flex_between_center" style="width:100%">
					<view class="orderNum">{{ pageData.StudyAbroadNum||0 }}</view>
					<image src="../../static/image/person/order2.png" mode="aspectFill" class="orderIcon"></image>
				</view>
				<view class="orderName">
					留学订单
				</view>
			</view>
			<view class="orderItem " @click="jumpPage(`/pages/contract/contract`)">
				<view class=" flex_between_center" style="width:100%">
					<view class="orderNum">{{ pageData.ContractNum||0 }}</view>
					<image src="../../static/image/person/order3.png" mode="aspectFill" class="orderIcon"></image>
				</view>
				<view class="orderName">
					合同信息
				</view>
			</view>
		</view>
		<view class="courseInfo" v-if="pageData.CourseInfo.State==2">
			<view class="title">课程信息</view>
			<view  style="display: flex; justify-content: space-between;padding: 0 22rpx;margin-top: 30rpx;">
				<view style="margin-left: 17px;">
					<view style="font-size: 13px;font-family: PingFang SC;font-weight: bold;color: #111111;">暂无课程</view>
					<view
						style="font-size: 10px;font-family: PingFang SC;font-weight: 400;color: #888888;margin-top: 10px;">
						购买课程后可回顾</view>
				</view>
				<view>
					<image style="width: 234rpx;height: 226rpx;" mode="aspectFit"
						src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/studyindex_nan.png'>
					</image>
				</view>
			</view>
		</view>
		<view class="courseInfo" v-if="pageData.CourseInfo.State==1">
			<view class="title">课程信息</view>
			<view class="statistic">
				<view class="statisticItem">
					<view class="time">{{ pageData.CourseInfo.TotalHours||0 }}
						<!-- <text class="unit">节</text> -->
					</view>
					<view class="statisticName">总共课时</view>
				</view>
				<view class="statisticItem">
					<view class="time">{{ pageData.CourseInfo.CompleteHours||0 }}
					</view>
					<view class="statisticName">已学课时</view>
				</view>
				<view class="statisticItem">
					<view class="time">{{ pageData.CourseInfo.AbsenceNum||0 }}
					</view>
					<view class="statisticName">缺勤课时</view>
				</view>
				<view class="statisticItem">
					<view class="time">{{ pageData.CourseInfo.LeaveNum||0 }}
					</view>
					<view class="statisticName">请假课时</view>
				</view>
				<view class="statisticItem" @click="jumpPage(`/pages/appointment/mySubscribe`)">
					<view class="time">{{yuyueNum}}
					</view>
					<view class="statisticName">约课记录</view>
				</view>
			</view>
			<view class="courseBox">
				<view class="left">
					<view style="width: 115rpx;
						height: 13rpx;
						background-color: #9CD4C1;
						border-radius: 6rpx;
						margin-bottom: 20rpx;
						">
					</view>
					<view style="width: 90rpx;
						height: 13rpx;
						background-color: #9CD4C1;
						border-radius: 6rpx;
						margin-bottom: 20rpx;
						">
					</view>
					<view style="width: 60rpx;
						height: 13rpx;
						background-color: #9CD4C1;
						border-radius: 6rpx;
						">
					</view>
					<image :src="pageData.CourseInfo.B2BIcon" mode="aspectFill"
						style="width:115rpx;height:115rpx;border-radius: 6rpx; position: absolute;bottom:10rpx;right: 18rpx;">
					</image>
				</view>
				<view class="right">
					<view class="className one_line">{{
            pageData.CourseInfo.CourseName
          }}</view>
					<view class="Grade" style="margin-bottom:20rpx" v-if="pageData.CourseInfo.ClassScrollType!==2">{{
            pageData.CourseInfo.ClassName
          }}</view>
					<view class="Grade">等级：{{ pageData.CourseInfo.CourseRate||'' }}</view>
					<view><text class="Grade">状态：</text>
						<text class="StatusName" v-if="pageData.CourseInfo.TotalHours>pageData.CourseInfo.CompleteHours">
							学习中
						</text>
						<text class="StatusName" v-if="pageData.CourseInfo.TotalHours==pageData.CourseInfo.CompleteHours">
							已结课
						</text>
					</view>
				</view>
			</view>
		</view>
		<view class="serve" v-if="pageData.AssistList.length>0">
			<view class="serveSubTitle">随时电话联系哟</view>
			<view class="serveTitle">服务人员信息</view>
			<view v-for="(item,index) in pageData.AssistList" :key="index" class="serviceItem">
				<view class="headimg">
					<image :src="item.UserIcon" mode="aspectFill" style="width:100%;height:100%;border-radius: 24rpx;"
						v-if="item.UserIcon" />
					<view class="flex_center_center"
						style="width:100%;height:100%;border-radius: 24rpx;font-size: 46rpx;font-weight: bold;color: #FFFFFF;background-color: #4c50e7;"
						v-else>{{ item.EmployeeName.slice(0, 1) }}</view>
				</view>
				<view class="serviceInfo flex_between_center">
					<view class="flex_start_around" style="width:380rpx;height:100%">
						<view class="flex_start_center" style="height:32rpx;width:100%">
							<text class="EmployeeName">{{ item.EmployeeName }}</text><text
								class="AssistTypeName">{{ item.AssistTypeName }}</text>
						</view>
						<view class="Mobile">{{item.Mobile }}</view>
					</view>
					<view style="width:60rpx;height:40rpx;" @click="callphone(item.Mobile)">
						<image
							src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/callphone.png"
							mode="aspectFit" style="width:100%;height:100%" />
					</view>
				</view>
			</view>
		</view>
		<bottom />
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		inject,
	} from "vue";
	import bottom from "../../components/bottom";
	export default {
		components: {
			bottom,
		},
		setup(props, context) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				pageData: {
					AssistList: []
				},
				yuyueNum: 0
			});

			const methods = {
				jumpPage(url) {

					uni.navigateTo({
						url: url,
					});
				},
				getData() {
					proxy.$request("/AppletCenter/GetMyCenterInfo", {}).then((res) => {
						data.pageData = res.Data;
					});
				},
				callphone(num) {
					uni.makePhoneCall({
						phoneNumber: num,
					});
				},
				getyuyue() {
					const msg = {
						pageIndex: 1,
						pageSize: 1,
						StartTime: '',
						EntTime: '',
						State: 0,
						TeacherId: 0,
						Q_SelectNormal: 1,
					}
					proxy.$request("/AppletCenter/GetMyAppointPageList", msg).then(res => {
						if (res.Code == 1) {
							data.yuyueNum = res.Data.Count
						}
					})
				},
			};
			let that = methods;
			return {
				...toRefs(data),
				...methods
			};
		},
		onShow() {
			if (this.$isLogin()) {
				this.getData();
				this.getyuyue()
			}
		}
	};
</script>

<style scoped>
	.person {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.person .info {
		height: 160rpx;
		padding: 10rpx 35rpx;
	}

	.person .info .left {
		width: 50%;
	}

	.person .info .left .date {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.person .info .left .name {
		font-size: 46rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
		white-space: nowrap;
	}

	.person .info .right {
		width: 95rpx;
		height: 95rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.person .orderInfo {
		height: 195rpx;
		padding: 10rpx 35rpx;
		margin-bottom: 70rpx;
	}

	.person .orderItem {
		width: 205rpx;
		height: 195rpx;
		background-color: #ffffff;
		opacity: 0.97;
		border-radius: 25rpx;
		box-sizing: border-box;
		padding: 20rpx 25rpx 35rpx 35rpx;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}

	.orderItem .orderNum {
		font-size: 46rpx;
		font-weight: 800;
		font-style: italic;
		color: #111111;
	}

	.orderItem .orderIcon {
		width: 65rpx;
		height: 65rpx;
		background-color: #fff;
	}

	.orderItem .orderName {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
	}

	.courseInfo {
		/* height: 535rpx; */
		background-color: #ebebeb;
		padding: 40rpx 35rpx;
		margin-bottom: 70rpx;
	}

	.courseInfo .title {
		font-size: 28rpx;
		font-weight: bold;
		color: #111111;
		margin-bottom: 40rpx;
	}

	.statistic {
		/* height: 70rpx; */
		display: flex;
		justify-content: space-between;
		margin-bottom: 70rpx;
	}

	.statisticItem {
		width: 180rpx;
		/* height: 70rpx; */
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		/* margin-right: 100rpx; */
		flex-shrink: 1;
	}

	.statisticItem .time {
		width: 100%;
		font-size: 46rpx;
		/* line-height: 30rpx; */
		font-weight: 800;
		font-style: italic;
		color: #111111;
	}

	.statisticItem .unit {
		font-size: 20rpx;
		font-weight: 500;
		color: #111111;
		font-style: normal;
		margin-left: 10rpx;
	}

	.statisticName {
		font-size: 20rpx;
		font-weight: 500;
		color: #666666;
		white-space: nowrap;
		text-align: center;
	}

	.courseBox {
		display: flex;
	}

	.courseBox .left {
		width: 215rpx;
		height: 275rpx;
		background: #d5f3e9;
		border-radius: 30rpx;
		margin-right: 40rpx;
		box-sizing: border-box;
		padding-top: 40rpx;
		padding-left: 30rpx;
		position: relative;
	}

	.courseBox .right {
		width: 420rpx;
		padding-top: 25rpx;
	}

	.courseBox .className {
		font-size: 36rpx;
		font-weight: bold;
		color: #111111;
	}

	.courseBox .Grade {
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
		margin: 10rpx 0;
	}

	.courseBox .StatusName {
		/* height: 30rpx; */
		line-height: 30rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #333333;
		background-color: #5de3a6;
		box-sizing: border-box;
		border-radius: 4rpx;
		padding: 5rpx 10rpx;
	}

	.serve {
		padding: 0 35rpx;
		background-color: #f5f5f5;
	}

	.serveTitle {
		font-size: 46rpx;
		font-weight: bold;
		color: #111111;
	}

	.serveSubTitle {
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		margin-bottom: 30rpx;
	}

	.serviceItem {
		box-sizing: border-box;
		width: 680rpx;
		height: 185rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
		margin-top: 40rpx;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		padding: 25rpx;
	}

	.serviceItem .headimg {
		width: 130rpx;
		height: 130rpx;
		border-radius: 24rpx;
		margin-right: 30rpx;
	}

	.serviceInfo {
		width: 435rpx;
		height: 100%;
	}

	.EmployeeName {
		font-size: 34rpx;
		font-weight: bold;
		color: #111111;
	}

	.AssistTypeName {
		height: 26rpx;
		background-color: #fa9717;
		border-radius: 6rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #ffffff;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15rpx;
		padding: 3rpx 6rpx;
	}

	.Mobile {
		font-size: 28rpx;
		font-weight: 500;
		color: #111111;
	}
</style>
