<template>
	<view class="page-app theme-light main-green font-1">
		<su-navbar title="在线状态" statusBar></su-navbar>
		<view class="form-card">
			<view class="form-item">
				<view class="label">接单时间段</view>
				<view class="input">
					<u-input input-align="right" placeholder="例如:8:00 - 21:00" v-model="form.onlineTime"></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">当前在线状态</view>
				<view class="input">
					<u-switch size="46" v-model="form.onlineStatus"></u-switch>
				</view>
			</view>
			<view class="form-item">
				<view class="label">盲盒订单提醒</view>
				<view class="input">
					<u-switch size="46" v-model="form.blindStatus"></u-switch>
				</view>
			</view>
			
			<view class="btn-box">
				<view class="btn" @click="saveApply">保存</view>
			</view>
		</view>
		
		<s-menu-tools />
	</view>
</template>

<script>
	import sheep from '@/sheep';
	import ClerkApi from '@/sheep/api/worker/clerk'; 
	export default {
		data() {
			return {
				show: false,
				form: {
					id: 0,
					onlineTime: '',
					onlineStatus: false,
					blindStatus: false,
				},
				list: [
					[
						{
							value: '8',
							label: '8:00'
						},
						{
							value: '9',
							label: '9:00'
						}
					],
					[
						{
							value: '8',
							label: '8:00'
						},
						{
							value: '9',
							label: '9:00'
						}
					],
					
				],
			}
		},
		onLoad(options) {
			this.form.id = options.id;
			this.init();  
		},
		methods: {
			init() {
				ClerkApi.getClerkApply(this.form.id).then((res) => {
					this.form = res.data;
				});
			},
			confirm(e) {
				if(e[0].value >= e[1].value){
					sheep.$helper.toast('开始时间不能大于结束时间');
					return;
				}
				this.form.onlineTime = e[0].label+' - '+e[1].label;
			},
			timeSet() {
				this.show = true;
			},
			saveApply() {
				if(!this.form.onlineTime){
					sheep.$helper.toast('请输入接单时间段');
					return;
				}
				ClerkApi.updateOnlineStatus(this.form).then((res) => {
					
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-app {
		background-color: #fafafa;
		padding-bottom: 140rpx;
		height: calc(100vh);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.form-card {
		background-color: #fff;
		margin: 10px;
		padding: 15px;
		border-radius: 10px;
		
		.form-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15px;
			
			.label {
				font-size: 24rpx;
			}
		}
		
		.btn-box {
				display: flex;
				justify-content: center;
				margin-top: 40px;
					
				.btn {
					background-color: var(--ui-BG-Main);
					color: #fff;
					font-size: 24rpx;
					min-width: 75%;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 40px;
					padding: 10px 0;
				}
		}
	}
	
</style>