<template>
	<view class="technician-time-manage">

		<view class="fill-base pd-lg flex-between">
			<view class="flex-1 flex-y-baseline f-title c-title">是否接单<view class="f-paragraph ml-sm"
					:style="{color:form.is_work==1?primaryColor:'#999'}">
					{{form.is_work==1?'接单':'休息'}}
				</view>
			</view>
			<view @tap.stop="toChangeItem">
				<i class="iconfont icon-switch c-caption ml-sm" :class="[{'icon-switch-on':form.is_work==1}]"
					:style="{ color: form.is_work==1 ? primaryColor : ''}"></i>
			</view>
		</view>

		<view class="fill-base mt-md b-1px-b">
			<view class="f-title c-title pd-lg">选择接单时间</view>
		</view>
		<view class="flex-center fill-base f-paragraph c-desc pt-lg pb-lg b-1px-b">
			<view @tap.stop="toShowTime('start_time')" class="item-time flex-center flex-column">
				<view>开始时间</view>
				<view class="mt-sm" :style="{color:form.start_time ? primaryColor : '#999'}">
					{{form.start_time || '选择时间'}}
				</view>
			</view>
			<view @tap.stop="toShowTime('end_time')" class="item-time flex-center flex-column  b-1px-l">
				<view>结束时间</view>
				<view class="mt-sm" :style="{color:form.end_time ? primaryColor : '#999'}">
					{{form | handleStartEndTime(toDay)}}{{form.end_time || '选择时间'}}
				</view>
			</view>
		</view>
		<view class="fill-base pb-lg" style="border-bottom-left-radius: 32rpx;border-bottom-right-radius: 32rpx;">
			<view class="flex pl-md pr-md pt-lg pb-lg">
				<view class="f-mini-title">设置不可接单时间</view>
				<view class="f-paragraph c-disable">（只能设置近{{dayList.length}}天的时间）</view>
			</view>
			<tab @change="handerTabChange" :list="dayList" :activeIndex="dayCurrent*1" :activeColor="primaryColor"
				width="150rpx" height="80rpx"></tab>
		</view>
		<view class="date-list flex pt-md" v-if="dayList.length > 0">
			<view class="date-item radius-16 flex-center ml-md mt-md" @tap="getDateTime(index)"
				:style="{ background : form.coach_status != 3 && item.status == 0 && item.is_order==0 && !isTimes(item.time_str) ? primaryColor : '' , color:item.status == 0 && item.is_order==0 && !isTimes(item.time_str) ? '#fff' : ''}"
				:class="isTimes(item.time_str) || item.is_order==1 || form.coach_status == 3 ? 'date-item-prohibit c-disable' : 'fill-base c-5A677E'"
				v-for="(item,index) in dayList[dayCurrent].sub" :key="index">
				<view class="text-center">
					<view class="f-mini-title">{{item.time_text}}</view>
					<view class="f-caption">{{isTimes(item.time_str) || item.status == 0 ? '不可预约' : '可预约'}}</view>
				</view>
			</view>
		</view>
		<view class="space-max-footer"></view>
		<w-picker :visible.sync="showTime" mode="time" :value="toDayTime" :current="false" :second="false"
			:themeColor="primaryColor" @confirm="onConfirm" ref="time"></w-picker>

		<fix-bottom-button @confirm="submit" :text="[{text:'保存',type:'confirm',isAuth:true}]" bgColor="#fff"
			v-if="form.coach_status !=3 "></fix-bottom-button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import $util from "@/utils/index.js"
	import wPicker from "@/components/w-picker/w-picker.vue";
	import tab from "@/components/tab.vue"
	export default {
		components: {
			wPicker,
			tab
		},
		data() {
			return {
				toDay: '',
				toDayTime: '',
				showKey: '',
				showTime: false,
				form: {
					id: 0,
					is_work: 0,
					start_time: '',
					end_time: '',
					coach_status: 0,
					time_unit: ''
				}, 
				dayList: [],
				dayCurrent: 0,
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
		onLoad() {
			this.initIndex()
		},
		methods: {
			...mapMutations(['updateTechnicianItem']),
			async initIndex() {
				// #ifdef H5
				if (this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				let cur_time = new Date(Math.ceil(new Date().getTime()))
				this.toDay = this.$util.formatTime(cur_time, 'YY-M-D')
				this.toDayTime = this.$util.formatTime(cur_time, 'h:m')
				let data = await this.$api.technician.timeConfig()
				for (let key in this.form) {
					this.form[key] = data[key]
				}
				data.day_list.forEach((item, index) => {
					item.title = index == 0 ? '今天' : item.dat_text
					item.sub = []
				})
				this.form.time_unit = data.time_unit
				this.dayList = data.day_list
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.toCount()
			},
			toChangeItem() {
				if (this.form.coach_status == 3) return
				this.form.is_work = this.form.is_work == 1 ? 0 : 1
			},
			toShowTime(key) {
				if (this.form.coach_status == 3) return
				this.showKey = key
				this.showTime = true
			},
			onConfirm(val) {
				this.form[this.showKey] = val.result;
				this.toCount()
			},
			toCount() {
				let {
					toDay = ''
				} = this
				let {
					start_time = '',
						end_time = ''
				} = this.form
				if (toDay && start_time && end_time) {
					this.dayList.forEach(item => {
						item.sub = []
					})
					this.getTimeCall()
				}
			},
			async getTimeCall() {
				this.$util.showLoading()
				let {
					start_time = '',
						end_time = ''
				} = this.form
				let {
					dayCurrent,
					dayList
				} = this
				let data = await this.$api.technician.getTime({
					start_time,
					end_time,
					dat_str: dayList[dayCurrent].dat_str
				})
				this.dayList[dayCurrent].sub = data
				this.$util.hideAll()
			},
			setDate(index) {
				this.dayCurrent = index
			},
			getDateTime(index) {
				if (this.form.coach_status == 3) return
				let {
					dayCurrent
				} = this
				let {
					sub = []
				} = this.dayList[dayCurrent]
				let {
					is_click,
					is_order,
					status
				} = sub[index]
				if (sub && is_order == 1) return
				this.dayList[dayCurrent].sub[index].is_click = is_click == 0 ? 1 : 0
				this.dayList[dayCurrent].sub[index].status = status == 0 ? 1 : 0
			},
			handerTabChange(index) {
				if (this.form.coach_status == 3) return
				this.dayCurrent = index
				if (this.dayList[index].sub && this.dayList[index].sub.length) return
				this.getTimeCall()
			},
			isTimes(value) {
				let date = new Date()
				return date.getTime() / 1000 > value
			},
			async submit() {
				let param = this.$util.deepCopy(this.form)
				if (!param.start_time || !param.end_time) {
					this.$util.showToast({
						title: !param.start_time ? `请选择开始时间` : `请选择结束时间`
					})
					return
				}
				delete param.coach_status
				let dayList = this.$util.deepCopy(this.dayList)
				param.time_text = dayList
				this.$util.showLoading()
				await this.$api.technician.setTimeConfig(param)
				this.$util.hideAll()
				this.$util.showToast({
					title: `保存成功`
				});
				this.updateTechnicianItem({
					key: 'haveOperItem',
					val: true
				})
				setTimeout(() => {
					this.$util.back()
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`
					})
				}, 1000)

			}
		},
		filters: {
			handleStartEndTime(val, toDay) {
				let text = ''
				let {
					start_time,
					end_time
				} = val
				let start = `${toDay} ${start_time}`
				let end = `${toDay} ${end_time}`
				if (start_time && end_time && $util.DateToUnix(start) >= $util.DateToUnix(end)) {
					text = '次日'
				}
				return text
			}
		}
	}
</script>


<style lang="scss">
	.technician-time-manage {
		.iconfont {
			font-size: 80rpx;
			line-height: 34rpx;
		}

		.item-time {
			width: 50%;
		}

		.date-title {
			padding-bottom: 60rpx;

			text {
				border-bottom: 3px solid transparent;
			}
		}

		.date-list {
			word-break: break-all;
			flex-flow: wrap;

			.date-item {
				width: 163rpx;
				height: 110rpx;
				border: 1px solid #E5E5E5;
			}

			.date-item-prohibit {
				background: #F6F7F7;
			}

			.c-5A677E {
				color: #5A677E;
			}
		}
	}
</style>
