<template>
	<view class="arrange-class">
		<view class="ac-info">
			<view>{{pageInfo.brand_name || ''}}（{{pageInfo.stadium_name ||'-'}}）</view>
			<view>课程名称：{{pageInfo.course_name || '-'}}</view>
			<view>上课教练：{{pageInfo.course_coach || '-'}}</view>
			<view>
				<text>学员信息：{{pageInfo.student_name || ''}}{{pageInfo.student_gender!=''?`（${pageInfo.student_gender||''}）`:''}} {{userInfo.type==2?(' '+pageInfo.student_phone) : ''}}</text>
				<image v-if="userInfo.type==2" src="/subpackage/course/static/images/icon/phone.png"  @click="phoneCall(pageInfo.student_phone)"></image>
			</view>
			<view>剩余课时：{{pageInfo.period_nums_surplus || 0}}节 （共{{pageInfo.period_nums || 0}}节)</view>
		</view>
		
		<view class="ac-section">
			<view class="as-tit">第{{pageInfo.next_class_number || '-'}}节</view>
			<!-- 上课教练 -->
			<view class="as-line">
				<view class="al-txt"><text>*</text>上课教练</view>
				<picker class="al-picker" :value="coachName" :range="coachs" @change="coachBindChange">
					<view class="al-view al-box">
						<view>{{coachName || '请选择上课教练'}}</view>
						<image src="/subpackage/course/static/images/icon/triangle.png"></image>
					</view>
				</picker>
			</view>
			<!-- 上课日期 -->
			<view class="as-line">
				<view class="al-txt"><text>*</text>上课日期</view>
				<picker class="al-picker" mode="date" :value="submitInfo.date" :start="startDate" :end="endDate" @change="bindDateChange"  >
					<view class="al-view al-date">
						<view class="ad-txt">{{submitInfo.date}}</view>
						<view class="ad-img">
							<image src="/subpackage/course/static/images/icon/calendar.png"></image>
						</view>
					</view>
				</picker>
			</view>
			<!-- 上课时间 -->
			<view class="as-line">
				<view class="al-txt"><text>*</text>上课时间</view>
				<picker class="al-picker" :value="submitInfo.start" :range="timeList" @change="startBindChange">
					<view class="al-view al-time">
						<view>{{submitInfo.start}}</view>
						<image src="/subpackage/course/static/images/icon/triangle.png"></image>
					</view>
				</picker>
				<view class="al-to">至</view>
				<picker class="al-picker" :value="submitInfo.end" :range="timeList" @change="endBindChange">
					<view class="al-view al-time">
						<view>{{submitInfo.end}}</view>
						<image src="/subpackage/course/static/images/icon/triangle.png"></image>
					</view>
				</picker>
			</view>
			<!-- 上课场地 -->
			<view class="as-line" v-if="pageInfo.is_booking_venue == true">
				<view class="al-txt"><text>*</text>上课场地<view class="at-type">({{pageInfo.course_venue_type || '-'}})</view></view>
				<picker class="al-picker" :value="venueName" :range="venues" @change="venueBindChange">
					<view class="al-view al-box">
						<view>{{venueName || '请选择场地'}}</view>
						<image src="/subpackage/course/static/images/icon/triangle.png"></image>
					</view>
				</picker>
			</view>
		</view>
		
		<view class="ac-fixed">
			<view hover-class="hover-active" @click="confirmChange">确定</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util';
import boxServer from '../../js/course_server';
import { BOX_API } from '../../js/course_api';
export default {
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		},
		userInfo(){
			return uni.getStorageSync('loginInfo') || {};
		},
		timeList(){
			let _list = []
			for(let i = 0; i<=24; i++){
				_list.push(`${i<10?'0'+i:i}:00`)
			}
			return _list;
		},
		coachs(){
			let { coachList } = this
			let _arr = []
			if(coachList.length > 0){
				_arr = this.coachList.map(e=>e.name)
			}
			return _arr || [];
		},
		venues(){
			let { venueList } = this
			let _arr = []
			if(venueList.length > 0){
				_arr = this.venueList.map(e=>e.name)
			}
			return _arr || [];
		},
	},
	
	data() {
		return {
			coachList: [], //教练列表
			coachName: "", //上课教练
			venueList: [], //场地列表
			venueName: "", //选择场地
			
			pageInfo: {},
			
			submitInfo: {
				coach_id: "",
				date: "",
				start: "",
				end: "",
				venue_id: "",
			},
		}
	},
	async onLoad(options){
		// let _query = util.jsonPar(options.query);
		// this.pageInfo = _query
		// this.getStuInfo(options.order_no)
	},
	methods: {
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		//日期
		bindDateChange: function(e) {
			let _selectDate = e.target.value
			this.submitInfo.date = _selectDate
		},
		
		startBindChange(e){
			console.log(e);
			let _list = this.timeList || [];
			this.submitInfo.start = _list[e.detail.value] || ''
		},
		endBindChange(e){
			console.log(e);
			let _list = this.timeList || [];
			this.submitInfo.end = _list[e.detail.value] || ''
		},
		
		coachBindChange(e){
			console.log(e);
			let _list = this.coachs || [];
			this.coachName = _list[e.detail.value] || ''
			this.submitInfo.coach_id = this.coachList[e.detail.value].id
		},
		
		venueBindChange(e){
			console.log(e);
			let _list = this.venues || [];
			this.venueName = _list[e.detail.value] || ''
			this.submitInfo.venue_id = this.venueList[e.detail.value].id
		},
		
		phoneCall(mobile) {
			let _phoneStr = mobile || ''
			let _phoneArr =  _phoneStr.split(',') || [];
			uni.showActionSheet({
			    itemList: _phoneArr,
			    success: res =>{
			        uni.makePhoneCall({
			            phoneNumber:　_phoneArr[res.tapIndex]
			        })
			    }
			})
		},
		
		confirmChange(){
			let { pageInfo, submitInfo } = this
			let { coach_id, date, start, end, venue_id } = this.submitInfo
			
			if(coach_id==''||date==""||start=="" ||end=="" || (pageInfo.is_booking_venue==true && venue_id==''))return util.showNone("请完善必选项！");
			
			let nowTime = util.formatDate(new Date(),'-')  //现在时间 格式为 2020-07-21
			if(new Date(nowTime).getTime() > new Date(date).getTime())return util.showNone("上课日期不能小于当前系统日期！");
			
			// 主要比较两个时间段大小，2021-09-01这个日期随便给
			if(Date.parse('2021-09-01 '+ start) >= Date.parse('2021-09-01 '+ end))return util.showNone("上课时间的结束时间不能小于起始时间！");
			
			let _data = {
				order_no: pageInfo.order_no,
				coach_id, //教练ID
				date,     //日期
				start,    //开始时间段
				end,      //结束时间段
			}
			if(pageInfo.is_booking_venue == true)_data["venue_id"] = venue_id; //场馆ID
			util.showLoad();
			boxServer.get({
				url: BOX_API.student.arrangeStudentAc, //安排上课[私教课]
				data: _data,
				failMsg: '加载失败！'
			})
			.then(res=>{
				util.hideLoad();
				util.showNone("操作成功！");
				setTimeout(_=>{ uni.navigateBack() }, 1200)
			})
		},
		
		// 我的学员-详情
		getStuInfo(order_no){
			util.showLoad();
			boxServer.get({
				url: BOX_API.student.stuInfo,
				data: {
					order_no,
				},
				failMsg: '加载失败！'
			})
			.then(res=>{
				util.hideLoad();
				this.pageInfo = res
				this.getArrangeAcCoach(res.order_no);
				
			})
		},
		
		// 安排上课[私教课] - 获取教练
		getArrangeAcCoach(order_no){
			util.showLoad();
			boxServer.get({
				url: BOX_API.student.arrangeStudentAcCoach,
				data: {
					order_no,
				},
				failMsg: '加载失败！'
			})
			.then(res=>{
				util.hideLoad();
				this.coachList = res.coachs || []
				this.venueList = res.venues || []
			})
		},
		
	}
}
</script>

<style lang="scss">
@import '~style/public.scss';
page{
	background: #F2F2F7;
}
.arrange-class{
	position: relative;
	padding-bottom: 150rpx;
	.ac-info{
		padding: 28rpx 22rpx 30rpx;
		background-color: #FFFFFF;
		>view{
			color: #1A1A1A;
			font-size: 28rpx;
			line-height: 52rpx;
			&:first-child{
				font-weight: 700;
				margin-bottom: 4rpx;
			}
			&+view{
				@include centerFlex(flex-start);
				>image{
					margin-left: 20rpx;
					flex-shrink: 0;
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}
	.ac-section{
		margin: 12rpx 0;
		padding: 30rpx 28rpx 50rpx;
		background-color: #FFFFFF;
		.as-tit{
			padding-bottom: 4rpx;
			color: #333333;
			font-size: 36rpx;
			font-weight: 700;
			line-height: 50rpx;
		}
		.as-line{
			margin: 20rpx 46rpx 0 6rpx;
			@include centerFlex(flex-start);
			.al-txt{
				position: relative;
				margin-right: 18rpx;
				flex-shrink: 0;
				color: #1A1A1A;
				font-size: 28rpx;
				line-height: 44rpx;
				>text{
					color: #EA5061;
					font-size: 32rpx;
				}
				.at-type{
					position: absolute;
					bottom: -36rpx;
					left: 0;
					min-width: 130rpx;
					text-align: center;
					color: #9C9C9F;
					font-size: 24rpx;
					line-height: 34rpx;
				}
			}
			.al-picker{
				flex-grow: 1;
			}
			.al-view{
				flex-grow: 1;
				padding-left: 20rpx;
				height: 76rpx;
				border-radius: 10rpx;
				background-color: #F2F2F7;
				@include centerFlex(flex-start);
			}
			.al-box{
				>view{
					flex-grow: 1;
					color: #9C9C9F;
					font-size: 28rpx;
					line-height: 40rpx;
				}
				>image{
					margin: 0 18rpx;
					flex-shrink: 0;
					width: 22rpx;
					height: 22rpx;
				}
			}
			
			.al-date{
				.ad-txt{
					flex-grow: 1;
					color: #1A1A1A;
					font-size: 28rpx;
					line-height: 40rpx;
					border-right: 2rpx solid #D8D8D8;
				}
				.ad-img{
					flex-shrink: 0;
					height: 76rpx;
					padding: 0 16rpx 0 18rpx;
					@include centerFlex(center);
					>image{
						flex-shrink: 0;
						width: 34rpx;
						height: 34rpx;
					}
				}
			}
			.al-time{
				>view{
					flex-grow: 1;
					color: #1A1A1A;
					font-size: 28rpx;
					line-height: 40rpx;
					min-width: 80rpx;
				}
				>image{
					margin: 0 18rpx;
					flex-shrink: 0;
					width: 22rpx;
					height: 22rpx;
				}
			}
			.al-to{
				margin: 0 28rpx;
				flex-shrink: 0;
				color: #B2B2B2;
				font-size: 32rpx;
				line-height: 44rpx;
			}
		}
		
	}
	
	.ac-fixed{
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 0;
		width: 750rpx;
		background-color: #FFFFFF;
		>view{
			margin: 0 auto;
			padding: 24rpx 0;
			width: 670rpx;
			border-radius: 44rpx;
			background-color: #009874;
			color: #FFFFFF;
			font-size: 28rpx;
			line-height: 40rpx;
			text-align: center;
			font-weight: 700;
		}
	}
}
</style>
