<template>
	<view class="container">
		<image class="cbg" :src="base.imgHost('common_bg.png')"></image>
		<view class="wrap">
			<scroll-view :scroll-top="0" style="height:100%;padding-bottom: 600rpx;" :scroll-y="true" @scrolltolower="scrollGet" class="list">
			
			<view v-if="teacher">
				<view class="teacher" v-for="tea in teacher">
					<view>
						<image style="width:97rpx;height:97rpx;margin-right:30rpx"
							:src="base.imgHost('txl-teacher.png')"></image>
					</view>
					<view>
						<view class="teacher-name">
							<view style="display: flex;align-items: center;">
								<text>{{tea.name}}</text>
								<text class="courseName">班主任</text>
							</view>
						</view>
						<view v-if="tea.mobile" class="teacher-mobile" @click="callPhone(tea.mobile)">
							<image style="width:22rpx;height:22rpx;margin-right:20rpx"
								:src="base.imgHost('txl-phone.png')"></image>
							<view style="color:blue">{{tea.mobile?tea.mobile:''}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="!show_mobile" class="showMobile">如需学员联系方式，请联系班主任</view>
			<view class="tips">
				按照姓名首字母顺序排列,排名不分先后
			</view>
			<!-- 其他学生 -->
			<view class="wrap2">
				<view v-if="hasData">
						<view class="left-item-card" v-for="(mess,inx) in list">
							<view class="left-item-card-info">
								<view class="left-item-card-name">
									<view>
										<text style="font-size:32rpx;color:#000">{{mess.name}}</text>
										<block v-if="mess.course_signs">
											<text class="courseName" v-if="mess.course_signs[0].position">
											{{mess.course_signs[0].position?mess.course_signs[0].position:''}}
											</text>
										</block>
										
									</view>
								</view>
								<view v-if="mess['company_name']"
									style="font-size:28rpx;color:#666;margin-bottom:10rpx">
									{{mess['company_name']||''}}
								</view>
								<view v-if="mess['company_position']"
									style="font-size:28rpx;color:#666;margin-bottom:10rpx">
									{{mess['company_position']||''}}
								</view>
								<view v-if="mess['company_product']"
									style="font-size:28rpx;color:#666;margin-bottom:10rpx">
									{{mess['company_product']||''}}
								</view>
								<view v-if="show_mobile" class="teacher-mobile" @click="callPhone(mess['mobile'])">
									<image style="width:22rpx;height:22rpx;margin-right:20rpx"
										:src="base.imgHost('txl-phone.png')"></image>
									<view style="color:blue">{{mess['mobile']||''}}</view>
								</view>
								
								
							</view>
						</view>
					
				</view>
				<view class="nodata" v-else>
					<u-empty mode="data"></u-empty>
				</view>
			</view>
			</scroll-view>
			<view class="next-scroll-right">
				<view :class="{'next-scroll-right-name':true,'next-scroll-right-select':letter==''}"
					@click.stop="changeLetter('All')">
					All
				</view>
				<view :class="{'next-scroll-right-name':true,'next-scroll-right-select':letter===item}"
					v-for="(item,index) in letterList" :key="index" @click.stop="changeLetter(item)">{{item}}
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import nextIndexedXlist from '@/components/next-indexed-xlist/components/next-indexed-xlist/next-indexed-xlist.vue';
	export default {
		components: {
			nextIndexedXlist
		},
		data() {
			return {
				course_id: '',
				list: [],
				teacher: [],
				studentList: [],
				show_mobile: false,
				current_page: 1,
				total_page: 0,
				hasData: true,
				letter: '',
				letterList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S",
					"T", "U", "V", "W", "X", "Y", "Z"
				]

			}
		},
		onLoad(options) {
			let that = this
			this.show_mobile = options.show_mobile == 1 ? true : false
			this.course_id = options.id
			this.getMyTeachers(options.id)
			this.getMyCourseTxl(options.id)
		},
		methods: {
			scrollGet() {
				if (!this.hasData) {
					return
				}

				if (this.current_page > this.total_page) {
					this.base.toast('没有更多了')
					return
				}
				this.current_page = this.current_page + 1
				this.getMyCourseTxl()
			},
			changeLetter(e) {
				if (e === 'All') {
					this.letter = ''
				} else {
					this.letter = e
				}
				this.current_page = 1
				this.total_page = 0
				this.hasData = true
				this.list = []
				this.getMyCourseTxl()
			},
			async getMyCourseTxl(id) {
				uni.showLoading({
					title: "...",
					icon: 'none'
				})
				const res = await this.$u.api.courseUserList({
					course_id: this.course_id,
					type: 2,
					page: this.current_page,
					letter: this.letter
				})
				this.total_page = res.list.last_page

				if (res.list.data.length === 0 && this.current_page === 1) {
					this.hasData = false
				}
				this.list.push(...res.list.data)
				console.log("qwe", this.list)
				uni.hideLoading()
				// let _student = []
				// let _other = []
				// res.list.data.map(item => {
				// 	if (item.course_signs && item.course_signs.length > 0) {
				// 		if (!this.base.isNull(item.course_signs[0]['position'])) {
				// 			_student.push(item)
				// 		} else {
				// 			_other.push(item)
				// 		}
				// 	} else {
				// 		_other.push(item)
				// 	}
				// })
				// this.studentList = _student
				// this.list = _other
			},
			async getMyTeachers(id) {
				const res = await this.$u.api.courseUserList({
					course_id: this.course_id,
					type: 2
				})
				this.teacher = res.teacher
			},
			callPhone(phoneNumber) {
				if (this.base.isNull(phoneNumber)) {
					return
				}
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			}
		}

	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.cbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
		}

		.wrap {
			position: relative;
			height: 100%;
			// overflow: scroll;
			
			padding-right: 60rpx;
			// padding-top: 100rpx;

			.nodata {
				height: calc(100vh - 160rpx);
			}

			.showMobile {
				font-size: 24rpx;
				text-align: left;
				padding-left: 30rpx;
				color: #999999;
				padding-bottom: 20rpx;
			}

			.teacher {
				width: 100%;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding-left: 24rpx;
				margin-bottom: 30rpx;
				padding: 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				align-items: center;


				&-name {
					font-size: 32rpx;
					color: #333;
					margin-bottom: 10rpx;

					.courseName {
						color: #b89155;
						margin: 0 20rpx;
						font-size: 24rpx;
						border-radius: 0rpx 28rpx 28rpx 28rpx;
						color: #fff;
						padding: 0rpx 15rpx;
						background: #b89155;
					}
				}

				&-mobile {
					display: flex;
					align-items: center;
					color: #666666;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				&-company {
					margin-bottom: 10rpx;
				}
			}
				.tips {
					font-size: 24rpx;
					text-align: left;
					padding-left: 30rpx;
					color: #999999;
					margin-bottom: 30rpx;
					border-bottom: 1rpx solid #cfd5d9;
					padding-bottom: 20rpx;
				}
			.wrap2 {

				.left-item-card {
					width: 100%;
					// height: 112rpx;
					background-color: #FFFFFF;
					box-sizing: border-box;
					padding-left: 24rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-bottom: 30rpx;
					padding: 30rpx;
					background-color: #fff;
					border-radius: 20rpx;

					.left-item-card-img {
						width: 80rpx;
						min-width: 80rpx;
						height: 80rpx;
						background-color: #CFCFCF;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 36rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

					.img-info {
						background: none;
						border: solid #f0f0f0 1rpx;
					}

					.left-item-card-info {
						width: 100%;
						// margin-left: 32rpx;
						height: 100%;
						display: flex;
						align-items: flex-start;
						justify-content: center;
						flex-direction: column;

						&>view {
							margin-bottom: 10rpx;

						}

						.left-item-card-name {
							font-size: 32rpx;
							color: #333;

							.courseName {
								color: #b89155;
								margin: 0 20rpx;
								font-size: 24rpx;
								border-radius: 0rpx 28rpx 28rpx 28rpx;
								color: #fff;
								padding: 0rpx 15rpx;
								background: #b89155;
							}
						}

						.left-item-card-phone {
							margin-top: 14rpx;
							font-size: 28rpx;
							line-height: 28rpx;
							color: #999999;
						}
					}
				}
			}

			.next-scroll-right {
				position: fixed;
				right: 10rpx;
				top: 50%;
				transform: translateY(-47%);
				z-index: 999 !important;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.next-scroll-right-name {
					width: 40rpx;
					height: 40rpx;
					font-size: 32rpx;
					color: #333333;
					line-height: 40rpx;
					margin: 6rpx 10rpx;
					margin-top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.next-scroll-right-select {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: #b89155;
					color: #FFFFFF;
					font-size: 24rpx;
					line-height: 40rpx;
					margin: 0 10rpx;

				}
			}
		}

	}
</style>