<template>
	<view class="content">
		<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/topImg.png" class="topImg"></image>
		
		<view class="title" style="margin-top: 40rpx;">·快捷入口</view>

		<view class="flex-between">
			<view class="nav-item flex-around">
				立即核销
				<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/hexiao.png" mode=""></image>
			</view>
			<view class="nav-item flex-around" @click="gotoPath('/subPackages/order/orderList')">
				查看订单
				<image src="https://static.ticket.sz-trip.com/tourGuide/images/index/dingdan.png" mode=""></image>
			</view>
		</view>

		<view class="title">·我的排班</view>

		<view class="type-box">
			<view v-for="(item,index) in typeList" :key="index"
				:class="['type-item', {'type-active': index == typeIndex}]" @click="typeIndex = index;getList()">
				{{item.title}}
				<view class="type-line" v-if="index == typeIndex"></view>
			</view>
		</view>

		<!-- 日历 -->
		<calendarVue :isShowLunar="true" @changeDate="getDate"></calendarVue>
		
		<!-- 选择场次 -->
		<view v-for="(item,index) in typeIndex ? sessionLists : sessionList" :key="index" class="session-item flex-between">
			{{item.title}}
			<switch :checked="item.isChecked" color="#96684F" @change="switchChange(item,index)"/>
		</view>
	</view>
</template>

<script>
	import calendarVue from '../../components/calendar.vue';
	export default {
		components: {calendarVue},
		data() {
			return {
				typeList: [{
						title: '导游服务',
						id: ''
					},
					// {
					// 	title: '线上咨询',
					// 	id: ''
					// },
					// {
					// 	title: '拼团产品',
					// 	id: ''
					// },
					{
						title: '线路产品',
						id: ''
					}
				],
				typeIndex: 0,
				selectDay: '',
				sessionList: [
					{
						title: '上午场',
						isChecked: false
					},
					{
						title: '下午场',
						isChecked: false
					},
					{
						title: '全天场',
						isChecked: false
					}
				],
				sessionLists: [
					{
						title: '当天状态',
						isChecked: false
					}
				],
				isAllChecked: false,
			}
		},
		onLoad() {
			this.selectDay = this.getNowTime(new Date())
			this.getList()
		},
		methods: {
			// 选择场次
			switchChange(item, index) {
				item.isChecked = !item.isChecked
				
				// if(index == 2) {
				// 	for (let i = 0; i < 2; i++) {
				// 		this.sessionList[i].isChecked = this.sessionList[2].isChecked
				// 	}
				// }else {
				// 	if(this.sessionList[0].isChecked && this.sessionList[1].isChecked) {
				// 		this.sessionList[2].isChecked = true
				// 	}else {
				// 		this.sessionList[2].isChecked = false
				// 	}
				// }
				
				let url = this.typeIndex ? '/api/Merchants/updateGuideSched' : '/api/Merchants/updateGuideSchedService'
				
				this.Post({
					date: this.selectDay,
					online_type: item.isChecked ? 1 : 0, // 开关
					date_half: this.typeIndex ? '' : index + 1, // 导游服务 1上午 2下午 3全天
					classify: this.typeIndex ? 2 : '' // 1拼团，2线路
				}, url).then(res => {
					
				})
			},
			getDate(date) {
				console.log('传递过来的日期',date)
				this.selectDay = date
				
				this.sessionList.forEach(item => item.isChecked = false)
				this.sessionLists[0].isChecked = false
				
				this.getList()
			},
			changeWork(date) {
				// // 导游服务值班状态 date_half：分类（1上午，2下午，3全天）
				// this.Post({
				// 	date: date,
				// 	date_half
				// },'/api/Merchants/updateGuideSchedService').then(res => {
					
				// })
			},
			getList() {
				// 获取排班列表 classify：分类（1拼团，2线路，3导游服务）
				this.Post({
					start_date: this.selectDay,
					end_date: this.selectDay,
					classify: this.typeIndex ? 2 : 3
				},'/api/Merchants/getGuideSchedList').then(res => {
					if(res.data && res.data.length > 0) {
						let data = res.data[0]
						if(this.typeIndex) {
							// 线路
							this.sessionLists[0].isChecked = data.online_type ? true : false
						}else {
							// 导游
							this.sessionList[0].isChecked = data.morning_type ? true : false
							this.sessionList[1].isChecked = data.afternoon_type ? true : false
							this.sessionList[2].isChecked = data.day_type ? true : false
						}
					}
				})
			},
			// 获取当前日期
			getNowTime(time, type) {
				var date = time,
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				if (type == 1) {
					if (uni.getSystemInfoSync().platform == 'ios') {
						var timer = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
					} else {
						var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
					}
				} else {
					var timer = year + '/' + month + '/' + day;
				}
			
				return timer;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #FFFFFF;
		min-height: 100vh;
		padding: 40rpx 26rpx 200rpx;
	}

	.topImg {
		width: 299.33rpx;
		height: 70rpx;
		display: flex;
		margin: auto;
	}

	.title {
		font-weight: bold;
		font-size: 35rpx;
		color: #000000;
		margin: 68rpx 0 34rpx;
	}

	.nav-item {
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		width: 338rpx;
		height: 118rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		padding: 0 15rpx;

		image {
			width: 80.67rpx;
			height: 80.67rpx;
		}
	}

	.type-box {
		display: flex;

		.type-item {
			margin-right: 44rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}

		.type-active {
			color: #96684F;
		}

		.type-line {
			width: 117rpx;
			height: 6rpx;
			background: #96684F;
			border-radius: 3rpx;
			margin: 4rpx auto 0;
		}
	}
	
	.session-item {
		width: 697rpx;
		height: 93rpx;
		background: #F5F5F5;
		border-radius: 47rpx;
		margin: 28rpx auto 0;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		padding: 0 28rpx;
	}
</style>