<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">白天出租出行免车费设置
				({{timeFrom.day_time ? timeFrom.day_time : '00:00~00:00'}} )
				<!-- <view class="f-paragraph ml-sm"
					:style="{color:form.is_work==1?primaryColor:'#999'}">
					{{form.is_work==1?'接单':'休息'}}
				</view> -->
			</view>
			<view @tap.stop="toShowTime('day')">
				<!-- <i class="iconfont icon-time c-caption ml-sm" 
					:style="{ color: form.is_work==1 ? primaryColor : ''}"></i> -->
				<view class="f-paragraph ml-sm" :style="{color:primaryColor}">
					设置时间
				</view>
			</view>
		</view>
		<view class="b-1px-b item1">
			<view class="pd-lg" @click="selectDistanceOptions('dayVal',item)" v-for="(item,index) in distance_options"
				:key="index"
				:style="{ background: dayVal.distance == item ? '#25c376' : '#ffffff',color:dayVal.distance == item ? 'white' : '#999'}">
				{{item}}公里
			</view>
		</view>

		<view class="fill-base pd-lg flex-between">
			<view class="flex-1 flex-y-baseline f-title c-title">夜晚出租出行免车费设置
				({{timeFrom.night_time ? timeFrom.night_time : '00:00~00:00'}})
				<!-- <view class="f-paragraph ml-sm"
					:style="{color:form.is_work==1?primaryColor:'#999'}">
					{{form.is_work==1?'接单':'休息'}}
				</view> -->
			</view>
			<view @tap.stop="toShowTime('night')">
				<!-- <i class="iconfont icon-time c-caption ml-sm" 
					:style="{ color: form.is_work==1 ? primaryColor : ''}"></i> -->
				<view class="f-paragraph ml-sm" :style="{color:primaryColor}">
					设置时间
				</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="b-1px-b item1">
			<view class="pd-lg" @click="selectDistanceOptions('nightVal',item)" v-for="(item,index) in distance_options"
				:key="index"
				:style="{ background: nightVal.distance == item ? '#25c376' : '#ffffff',color:nightVal.distance == item ? 'white' : '#999'}">
				{{item}}公里
			</view>
		</view>


		<view class="fill-base mt-md b-1px-b">
			<view class="f-title c-title pd-lg">温馨提示</view>
		</view>
		<view class="fill-base pb-lg ">
			<view class="pd-lg">
				1.此处设置的免车费公里数是客户距离你的直线距离，直线距离
				和车行距离在地理位置特殊性上可能有一定误差，望大家设置
				距离时知晓。
				2.设置的免出行费只针对出租车
				3.设置后请点击下方[确定] 按钮生效
				4、全国默认1公里免车费，可自行调整公里数
			</view>
			<!-- <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> -->
			
		<time-picker-popup ref="time" :value="toDayTime" @confirm="onConfirm"
			:title="showKey=='day'?dayVal.title:nightVal.title" segmentation='--'></time-picker-popup>

		<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,
		mapActions
	} from "vuex"
	import $util from "@/utils/index.js"
	import wPicker from "@/components/w-picker/w-picker.vue";
	import tab from "@/components/tab.vue"
	import TimePickerPopup from '@/components/time-picker-popup/time-picker-popup.vue'
	export default {
		components: {
			wPicker,
			tab,
			TimePickerPopup
		},
		data() {
			return {
				distance_options: ['0.5', '1', '3', '5', '7'],
				dayVal: {
					distance: '0.5',
					toDayTime: ['00', '00', '00', '00'],
					title: '白天设置'

				},
				nightVal: {
					distance: '0.5',
					toDayTime: ['00', '00', '00', '00'],
					title: '晚间设置'
				},
				toDay: '',
				toDayTime: ['00', '00', '00', '00'],
				showKey: '',
				showTime: false,
				form: {
					id: 0,
					is_work: 0,
					start_time: '',
					end_time: '',
					coach_status: 0,
					time_unit: '',
				},
				timeFrom: {
					day_time: '',
					day_free_distance: '',
					night_time: '',
					night_free_distance: '',
				},
				dayList: [],
				dayCurrent: 0,
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
			coachInfo: state => state.user.coachInfo,
		}),
		onLoad() {
			this.initIndex();
		},
		methods: {
			...mapActions(['getCoachInfo']),
			...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();

				// 技师白天夜间免费出行距离
				for (let timeFromKey in this.timeFrom) {
					this.timeFrom[timeFromKey] = this.coachInfo[timeFromKey];
					if (timeFromKey == 'day_free_distance') {
						this.dayVal.distance = Number(this.coachInfo[timeFromKey]);
					}
					if (timeFromKey == 'night_free_distance') {
						this.nightVal.distance = Number(this.coachInfo[timeFromKey]);
					}
				}
			},
			toChangeItem() {
				if (this.form.coach_status == 3) return
				this.form.is_work = this.form.is_work == 1 ? 0 : 1
			},
			toShowTime(key) {
				this.showKey = key
				this.$refs.time.open()
				// if (this.form.coach_status == 3) return
				// this.showKey = key
				// this.showTime = true
			},
			onConfirm(val) {
				// console.log(val)
				this.timeFrom[this.showKey == 'day' ? 'day_time' : 'night_time'] =
					`${val[0]}:${val[1]}~${val[2]}:${val[3]}`;
				this.toCount()
			},
			selectDistanceOptions(key, item) {
				this[key].distance = item;
				this.timeFrom[key == 'dayVal' ? 'day_free_distance' : 'night_free_distance'] = item;
			},
			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 timeParam = this.$util.deepCopy(this.timeFrom);
				if (!timeParam.day_time || !timeParam.night_time) {
					this.$util.showToast({
						title: !timeParam.day_time ? `请选择白天免车费时间` : `请选择夜间免车费时间`
					})
					return
				}
				this.$util.showLoading()
				await this.updateCoachRidingForfree();
				await this.getCoachInfo();
				this.$util.hideAll()
				this.$util.showToast({
					title: `保存成功`
				});
				setTimeout(() => {
					this.$util.back()
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`
					})
				}, 1000)
				return
				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)

			},
			// 修改技师白天夜间免费出行距离
			async updateCoachRidingForfree() {
				await this.$api.technician.updateCoachRidingForfree(this.timeFrom);
			}
		},
		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 {
		/deep/ .uni-popup {
			z-index: 999;
		}

		.iconfont {
			font-size: 80rpx;
			line-height: 34rpx;
		}

		.c-title {
			font-weight: 700;
		}

		.item1 {
			display: grid;
			flex-wrap: wrap;
			grid-template-columns: repeat(3, auto);
			gap: 10px 10px;
			padding: 30rpx 30rpx;
			font-size: 32rpx;
			color: white;

			.pd-lg {
				text-align: center;
				background: #25c376;
				border-radius: 8px;
			}
		}

		.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>