<template>
	<view class="person" :style="{ 'padding-bottom': `${statusBarHeight}px` }">
		<view class="info flex_between_center flex_nowrap">
			<view class="left flex_start_between">
				<view class="name">
					<view v-if="pageData.StuName" class="name-img" :style="{'background':currentErpUser.bgColor}">
						<!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653894197000_691.png" 
						mode="aspectFill" style="width:70rpx;height:70rpx;border-radius: 50%;border: 1rpx solid #DDDDDD;display: block;">
						</image> -->
						{{ pageData.StuName.substring(0,1) }}
					</view>
					<text v-if="pageData.StuName">{{ pageData.StuName }}</text>
					<text v-if="!pageData.StuName&&pageData.StuName!==''"
					@click="jumpPage('/pages/login/login')">未登录</text>
					
				</view>
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663903702000_543.png" 
				mode="aspectFill" style="width:231rpx;height:48rpx;margin-top: 30rpx;">
				</image>
			</view>
			<view class="right">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663903439000_469.png" 
				mode="aspectFill" style="width:100%;height:100%;">
				</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/MyChild/index`)">
				<view class=" flex_between_center" style="width:100%">
					<view class="orderNum">{{ pageData.ChildCount||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/FriendsAndRelatives/index`,pageData.FriendCount)">
				<view class=" flex_between_center" style="width:100%">
					<view class="orderNum">{{ pageData.FriendCount||0 }}</view>
					<image src="../../static/image/person/order3.png" mode="aspectFill" class="orderIcon"></image>
				</view>
				<view class="orderName">
					亲友团
				</view>
			</view>
		</view>
		<view class="courseInfo">
			<view class="title">当前学习课程</view>
			<view class="box" v-if="pageData.CourseInfo.length>0">
				<view class="box-top">
					<carousel :img-list="pageData.CourseInfo" url-key="B2BIcon"></carousel>
				</view>
			</view>
			<view v-else 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>
			<scroll-view scroll-y="true" style="display: none;">
				<template v-for="(item,index) in pageData.CourseInfo">
					<template v-if="item.State==1">
					<view class="statistic">
						<view class="statisticItem">
							<view class="time">{{ item.TotalHours||0 }}
								<!-- <text class="unit">节</text> -->
							</view>
							<view class="statisticName">总共次数</view>
						</view>
						<view class="statisticItem" style="display: none;">
							<view class="time">{{ item.CompleteHours||0 }}
							</view>
							<view class="statisticName">已学次数</view>
						</view>
						<view class="statisticItem">
							<view class="time">{{ item.AbsenceNum||0 }}
							</view>
							<view class="statisticName">缺勤次数</view>
						</view>
						<view class="statisticItem">
							<view class="time">{{ item.LeaveNum||0 }}
							</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="item.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">{{
								item.CourseName
				  }}</view>
							<view class="Grade" style="margin-bottom:20rpx" v-if="item.ClassScrollType!==2">{{
								item.ClassName
				  }}</view>
							<view><text class="Grade">状态：</text>
								<text class="StatusName" v-if="item.TotalHours>item.CompleteHours">
									学习中
								</text>
								<text class="StatusName" v-if="item.TotalHours==item.CompleteHours">
									已结课
								</text>
							</view>
						</view>
					</view>
					</template>
				</template>
			</scroll-view>
			
		</view>	
		
		<view class="serve" v-if="pageData.AssistList.length>0">
			<view class="serveTitle">服务人员信息</view>
			<view class="serveSubTitle">随时联系哟</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: 40rpx;"
						v-if="item.UserIcon" />
					<view class="flex_center_center"
						style="width:100%;height:100%;border-radius: 40rpx;font-size: 46rpx;font-weight: bold;color: #CE8086;background-color: #FCEEEF;"
						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;text-align: right;">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1664336583000_834.png" @click="ImageSee(item)" 
						style="width:40rpx;height:40rpx;border-radius: 10rpx;"></image>
						<!-- <image
							src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1663903083000_729.png"
							mode="aspectFit" style="width:100%;height:100%" /> -->
					</view>
				</view>
			</view>
		</view>
		<bottom />
		<tabbar active-name='usercenter'></tabbar>
		<van-popup
		  :show="showPopup"
		  round
		>
            <view style="padding: 63rpx;">
                <image :src="QRcodeImg"
                style="width: 378rpx;height: 377rpx;"></image>
            </view>        
            <view class="cross-box">
                <van-icon name="close" color="#111111" size="48rpx" @click="showPopup=false"/>
            </view>
        </van-popup>
	</view>
</template>

<script>
	import tabbar from '@/components/tabbar'
	import {
		ref,
		reactive,
		toRefs,
		toRef,
		getCurrentInstance,
		watch,
		computed,
		onMounted,
		inject,
	} from "vue";
	import bottom from "../../components/bottom";
	import carousel from './components/vear-carousel/vear-carousel.vue'
	import { VersionUpdate } from '../../utils/index.js'
	import {
		GetMyCenterInfo,GetMyAppointPageList,CreateTeacherCode
	} from "../../api/erp";
	export default {
		components: {
			tabbar,
			bottom,
			carousel
		},
		setup(props, context) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				QRcodeImg:'',
				showPopup:false,
				colors:['#9ADBC5','#87DDEA','#FE8D6F','#F986AA','#FDC453'],
				pageData: {
					AssistList: []
				},
				yuyueNum: 0,
				currentErpUser:null,
				erpUsers:[],
				statusBarHeight: 0,
			});
			data.erpUsers=uni.getStorageSync('ErpStus')
	  		data.currentErpUser=uni.getStorageSync('erpUserInfo')
			const methods = {
				VersionUpdate,
				ImageSee(item){
					if(item.WXQRCode){
						data.QRcodeImg = item.WXQRCode
						data.showPopup = true
					}else{
						that.getQRcodeImg(item)
					}
					
				},
				async getQRcodeImg(item){
					uni.showLoading()
					let msg = {
						TeacherId: item.AccountId
					}
					let res = await CreateTeacherCode(msg);
					if (res) {
						data.QRcodeImg = res.Data.WXQRCode
						data.showPopup = true
						uni.hideLoading()
						that.getData()
					}
				},
				initColor(){
					if(data.erpUsers){
						let i=0
						data.erpUsers.forEach(x=>{
							x.bgColor=data.colors[i]
							i++;
							if(i==data.colors.length){
								i=0
							}
							if(x.AccountId==data.currentErpUser.AccountId){
								data.currentErpUser.bgColor=x.bgColor
							}
						})
					}
				},
				jumpPage(url,num) {
					uni.navigateTo({
						url: num?url+'?FriendCount='+num:url,
					});
				},
				async getData() {
					uni.showLoading()
					let res = await GetMyCenterInfo({});
					if (res) {
						uni.hideLoading()
						data.pageData = res.Data;
					}
				},
				callphone(num) {
					uni.makePhoneCall({
						phoneNumber: num,
					});
				},
				async getyuyue() {
					const msg = {
						pageIndex: 1,
						pageSize: 1,
						StartTime: '',
						EntTime: '',
						State: 0,
						TeacherId: 0,
						Q_SelectNormal: 1,
					}
					let res = await GetMyAppointPageList(msg);
					if (res) {
						data.yuyueNum = res.Data.Count
					}
				},
			};
			let that = methods;
			onMounted(() => {
				data.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				that.VersionUpdate()
				that.initColor()
			});
			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: 270rpx;
		padding: 10rpx 35rpx;
		position: relative;
	}

	.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: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #111111;
		display: flex;
		align-items: center;
	}
	.person .info .left .name .name-img{
		width: 70rpx;
		border-radius: 50%;
		padding: 5rpx;
		display: inline-block;
		text-align: center;
		line-height: 70rpx;
		color: #ffffff;
		font-size: 38rpx;
		font-weight: 500;
	}
	.person .info .left .name text{
		white-space: nowrap;
		margin-left: 20rpx;
		margin-top: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
	.person .info .right {
		width: 492rpx;
		height: 270rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.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: #C91727;
	}

	.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 40rpx 0rpx;
		margin-bottom: 52rpx;
	}

	.courseInfo .title {
		padding: 15rpx 0 0 40rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #111111;
		margin-bottom: 31rpx;
		font-weight: 800;
	}

	.statistic {
		/* height: 70rpx; */
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		margin-top: 30rpx;
	}
	.statistic:first-child{
		margin-top: 0;
	}

	.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: 34rpx;
		font-weight: 800;
		color: #111111;
	}

	.serveSubTitle {
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		margin-bottom: 51rpx;
		margin-top: 22rpx;
	}

	.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;
	}
	.cross-box{
        text-align: center;
        margin-bottom: 20rpx;
    }
</style>
