<template>
	<view style="background-color: #242A38; height: auto; min-height: 100vh;">
		<view class="w700 flex-row justify-center">
			<u-tabs :list="list" :current="current" @click="changeTab" lineWidth="250rpx" lineColor="#d2c3af"
				lineHeight="5rpx" :activeStyle="{
			    color: '#d2c3af',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#d2c3af',
			    transform: 'scale(1)'
			}" itemStyle="margin-top: 20rpx;margin-bottom: 20rpx; width:300rpx; "></u-tabs>

		</view>

		<view class="w750 flex-col align-center " style="height: 100%;" v-show="current == 0">
			<view class="goodList">
				<view class="goods" v-for="(item,index) in schoolInstructorList" :key="index">
					<view class="goodImg">
						<!-- 	<u--image radius="10rpx" width="203rpx" height="172rpx" :showLoading="false"
							:src="baseUrl + firstSubstring(item.image)"></u--image> -->
						<u-album :urls="showImageUrl(item.image)" maxCount="1" multipleSize="203rpx"
							:showMore="false"></u-album>
					</view>

					<view class="goodTitle flex-row justify-between" style="height: 172rpx;">
						<view class="section_2 flex-col justify-between">
							<view class="flex-row justify-between">
								<text class="text_9">{{ item.instructorName}}</text>
								<text class="text_10">教练</text>
							</view>
							<text class="text_11">{{ item.drivingYear }}年驾龄</text>
							<text class="text_12">从业{{ item.experienceYear }}年</text>
							<uni-rate :size="18" :value="item.averageStar" :readonly="true" />
						</view>
						<view class="section_3 flex-col justify-between">
							<view class="image-text_1 flex-row justify-between">
								<image class="label_2" :src="imagesUrl+'fire.png'" />
								<text class="text-group_1">明星教练</text>
							</view>
							<view class="text-wrapper_5 flex-col"
								@click="appointment(item.instructorId,item.instructorName)">
								<text class="text_13">预约</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="w750 padding flex-col align-center " v-show="current == 1" style="min-height: 100%;">
			<view class="response padding bg-white margin-bottom border-bottom" style="border-radius: 20rpx;"
				v-for="(item, index) in appointmentList" :key="index">
				<view class="margin-bottom flex-row justify-between">
					<text>预约时间:{{item.appointmentDate}} {{ item.appointmentInterval }}</text>
					<text>预约科目:{{item.category}}</text>
				</view>

				<view class="flex-row justify-between">
					<text>预约教练:{{item.instructorName}}</text>

					<view class="pjbtn" @click="commentOpen(item.appointmentId,item.instructorId,item.instructorName)"
						v-if="!item.commentContent">
						<text>评价</text>
					</view>
					<view class="pjbtn" @click="commentView(item.commentContent,item.commentTime,item.commentStar)"
						v-else>
						<text>查看评价</text>
					</view>
				</view>
			</view>


			<u-popup :show="commentInputShow" mode="center" :closeable="true" @close="commentInputShow = false"
				:customStyle="{backgroundColor:'transparent'}">
				<view class="nickname-pop">
					<text class="nickname-label">评价教练</text>
					<view class="nickname-input margin-bottom-xs">
						<text style="color: #d2c3af; width: 400rpx; font-size: 18px;">教练姓名:
							{{ comment.instructorName }}</text>

						<input class="input-style" v-model.trim="comment.instructorName" readonly border="surround"
							:disabled="true" style="display: none;" />
						<input class="input-style" v-model.trim="comment.instructorId" readonly border="surround"
							:disabled="true" style="display: none;" />
					</view>
					<view class="nickname-input margin-bottom-xs">
						<text style="color: #d2c3af; width: 160rpx; font-size: 18px;">评价内容:</text>

					</view>
					<u--textarea v-model.trim="comment.commentContent" placeholder="请输入评价内容" count
						border="bottom"></u--textarea>
					<view class="nickname-input margin-bottom-xs">
						<text style="color: #d2c3af; width: 160rpx; font-size: 18px;">星级评价:</text>
						<uni-rate v-model="comment.commentStar" />
					</view>

					<view class="button-style">
						<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))"
							shape="circle" text="提交" throttleTime="3000" @click="addInstuctorComment"
							:customStyle="{color:'#000',height:'60rpx'}"></u-button>
					</view>
				</view>
			</u-popup>
			<!-- 查看評論 -->
			<u-popup :show="commentViewShow" mode="center" :closeable="true" @close="commentViewShow = false"
				:customStyle="{backgroundColor:'transparent'}">
				<view class="nickname-pop">
					<text class="nickname-label">评价教练</text>
					<view class="nickname-input margin-bottom-xs">
						<text style="color: #d2c3af; width: 400rpx; ">评价时间: {{ commentViewObj.commentTime }}</text>
					</view>
					<view class="nickname-input margin-bottom-xs">
						<text style="color: #d2c3af; width: 400rpx;">评价内容: {{ commentViewObj.commentContent }}</text>
					</view>

					<view class="nickname-input margin-bottom-xs">
						<text style="color: #d2c3af; width: 400rpx;">星级评价: </text>
						<uni-rate v-model="commentViewObj.commentStar" :readonly="true" />
					</view>

					<view class="button-style">
						<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))"
							shape="circle" text="关闭" throttleTime="3000" @click="commentViewShow = false"
							:customStyle="{color:'#000',height:'60rpx'}"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				list: [{
					name: '预约练车',
				}, {
					name: '预约纪录',
				}],
				current: 0,
				imagesUrl: getApp().globalData.config.imagesUrl,
				baseUrl: getApp().globalData.config.baseUrl,
				schoolInstructorList: [],
				postData: {
					realName: null,
					phoneNumber: '',
					appointmentDate: null,
					appointmentInterval: '',
					instructorId: '',
					instructorName: '',
					category: '',
				},
				categoryShow: false,
				categoryColumns: [
					['科目二', '科目三']
				],
				intervalShow: false,
				intervalColumns: [
					['上午', '下午', '全天']
				],
				appointmentDateShow: false,
				maxDate: null,
				minDate: null,
				carRecordDatePickerShow: false,
				appointmentInputShow: false,
				appointmentList: [],
				comment: {
					instructorId: '',
					instructorName: '',
					commentContent: '',
					commentStar: '',
					appointmentId: '',
					userId: ''
				},
				commentInputShow: false,
				commentViewShow: false,
				commentViewObj: {
					commentContent: '',
					commentTime: '',
					commentStar: ''
				},

				isLoadMore: false, //是否加载中
				params: {
					pageSize: 10,
					pageNum: 1,
				},

				isLoadMorer: false, //是否加载中
				paramsr: {
					pageSize: 10,
					pageNum: 1,
				},

			};
		},
		onLoad(option) {
			this.current = option.tab
			this.getSchoolInstructorlist()
			this.getAppointmentList()
			this.getUserInfo()
		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.params.pageNum++
				this.getSchoolInstructorlist()
			}
			if (!this.isLoadMorer) { //此处判断，上锁，防止重复请求
				this.isLoadMorer = true
				this.paramsr.pageNum++
				this.getAppointmentList()
			}
		},

		methods: {
			showImageUrl(string) {
				let arr = string.split(',')
				for (let i = 0; i < arr.length; i++) {
					arr[i] = this.baseUrl + arr[i]
				}
				return arr;
			},
			// 按逗号分隔字符串，获取第一个元素，用于图片展示
			firstSubstring(string) {
				if (string.includes(',')) {
					return string.split(',')[0];
				} else {
					return string;
				}
			},
			async getSchoolInstructorlist() {
				const res = await this.$request({
					url: '/system/schoolInstructor/listWx',
					data: this.params
				})
				this.schoolInstructorList = this.schoolInstructorList.concat(res.rows);

				if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
					this.status = 'nomore';
					this.isLoadMore = true
				} else {
					this.isLoadMore = false
				}

			},

			changeTab(e) {
				this.current = e.index



				console.log(e);
			},
			// 预约登记跳转
			appointment(id, name) {
				// this.appointmentInputShow = true
				// this.postData.instructorName = name
				// this.postData.instructorId = id
				// this.getMaxDateAndMinDate()
				// this.getUserInfo()

				this.$tab.navigateTo("/subSchoolPages/appointmentPage/appointmentPage?instructorId=" + id +
					"&instructorName=" + name)
			},
			// 项目选择器
			chooseCategory(e) {
				this.postData.category = e.value[0]
				this.closePicker()
			},
			closePicker() {
				this.categoryShow = false
				this.intervalShow = false
			},
			// 时间段选择器
			chooseInterval(e) {
				this.postData.appointmentInterval = e.value[0]
				this.closePicker()
			},
			// 获取最大日期和最小日期
			getMaxDateAndMinDate() {
				const currentDate = new Date(); // 获取当前日期
				const thirtyYearsAgo = new Date(currentDate.getFullYear(), currentDate.getMonth() + 3, currentDate
					.getDate()); // 30年之前的日期
				this.maxDate = thirtyYearsAgo.getTime();
				this.minDate = Number(currentDate);
			},
			// 选择预约日期
			appointmentDateConfirm(e) {
				console.log(e.value);
				this.postData.appointmentDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.appointmentDateShow = false
			},

			// 获取用户信息
			async getUserInfo() {
				const res = await this.$request({
					url: '/getInfo',
				})
				if (res.code == 200 && res.hasOwnProperty('user')) {
					this.user = res.user
					this.postData.phoneNumber = res.user.phonenumber
					this.postData.realName = res.user.realName
				}
			},

			// 获取预约记录
			async getAppointmentList() {
				const res = await this.$request({
					url: '/system/schoolAppointmentInfo/listWx',
					data: this.paramsr
				})
				this.appointmentList = this.appointmentList.concat(res.rows);

				if (res.rows.length < this.params.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
					this.isLoadMorer = true
				} else {
					this.isLoadMorer = false
				}

			},
			// 评价弹窗
			commentOpen(appointmentId, instructorId, instructorName) {
				this.commentInputShow = true
				this.comment = {};
				this.comment.instructorName = instructorName
				this.comment.instructorId = instructorId
				this.comment.appointmentId = appointmentId
			},
			// 提交评论
			async addInstuctorComment() {
				if (uni.$u.test.isEmpty(this.comment.appointmentId)) {
					return this.$modal.msgError('预约id不存在')
				}
				if (uni.$u.test.isEmpty(this.comment.instructorId)) {
					return this.$modal.msgError('请选择教练')
				}
				if (uni.$u.test.isEmpty(this.comment.instructorName)) {
					return this.$modal.msgError('请选择教练')
				}
				if (uni.$u.test.isEmpty(this.comment.commentContent)) {
					return this.$modal.msgError('请填写评价内容')
				}
				if (uni.$u.test.isEmpty(this.comment.commentStar)) {
					return this.$modal.msgError('请星级评价')
				}
				const res = await this.$request({
					url: '/system/schoolInstuctorComment/addWx',
					method: 'POST',
					data: this.comment
				})
				this.$modal.msgSuccess('评价成功')
				setTimeout(() => {
					this.commentInputShow = false
					this.$tab.navigateTo("/subSchoolPages/appointment/appointment?tab=1")
				}, 1500)
			},
			// 查看评价
			commentView(commentContent, commentTime, commentStar) {
				this.commentViewShow = true
				this.commentViewObj.commentContent = commentContent;
				this.commentViewObj.commentTime = commentTime;
				this.commentViewObj.commentStar = commentStar;
				console.log(this.commentViewObj);
			}

		},
	};
</script>
<style scoped lang="scss">
	@import './index.rpx.css';

	page {
		min-height: 100vh;
	}

	/deep/.u-icon__icon {
		font-size: 30px !important;
	}

	.goodList {
		margin: 20rpx auto 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 700rpx;

		.goods {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 10px;
			width: 700rpx;
			height: 217rpx;
			margin-bottom: 20rpx;

			.goodTitle {}

			.goodImg {
				border-radius: 25rpx;
				margin: 20rpx;
			}
		}
	}

	.nickname-pop {
		width: 680rpx;
		padding: 70rpx 50rpx 0rpx;
		background: #242a38;
		border-radius: 10rpx;
	}

	.nickname-input {
		width: 100%;
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.nickname-label {
		font-size: 60rpx;
		display: block;
		margin-bottom: 20rpx;
		text-align: center;
		color: #d2c3af;
	}

	.input-style {
		border-bottom: 1px solid #d2c3af;
		display: block;
		width: 100%;
		height: 60rpx;
		color: #d2c3af;
	}

	.button-style {
		width: 600rpx;
		margin: 20rpx auto;
	}
</style>