<template>
	<view class="">
		<view class="cell flex flex-y-center border-b">
			<view class="title-block required">
				<text>是否营业</text>
			</view>
			<view class="desc">
				<view class="flex-center">
					<view class="checklist-box " @click="choicepayType(item.num)" v-for="(item,index) of BusinessHours"
						:key='index' :class="Businesstype==item.num?'actt':''">
						<view class="radio__inner" :class="Businesstype==item.num?'act_border':''">
							<view :class="Businesstype==item.num?'is-default-checked':''"
								class="radio__inner-icon radio__inner-icon ">
							</view>
						</view>
						<text class="checklist-text">{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
<block v-if="Businesstype==2">
		<view class="cell flex-center" @click="add">
			<view class="Addtime flex-center">
				+添加时间
			</view>
		</view>

		<view class="cell flex-y-center box-pack-between" v-for="(item,index) of arr" :key='index'>
			<view class="title-block required">
				<text>时间:</text>
			</view>

			<view class="flex-y-center">
				<view class="cellPicker">
					<picker mode="time" @change="bindTimeStar" :data-index='index'>
						<view v-if="item.start">{{item.start}}</view>
						<view v-else>开始时间</view>
					</picker>
				</view>
				<view class="amd">
					至
				</view>
				<view class="cellPicker">
					<picker mode="time" @change="bindTimeEnd" :data-index='index'>
						<view v-if="item.end">{{item.end}}</view>
						<view v-else>结束时间</view>
					</picker>
				</view>
			</view>
			<view class="delelt" @click="del(index)">
				<text class="iconfont iconshanchu1"></text>
				删除
			</view>
		</view>
	</block>	
		<view class="" style="	height: 160rpx;">
			
		</view>
		<view class="footer-bar">
			<view class="content flex flex-center" @click="save">
				<view  class="btn">立即提交</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				start: '开始时间',
				end: '结束时间',
				date_time1: [],
				Businesstype: 2,
				BusinessHours: [{
						num: 2,
						name: "营业"
					},
					{
						num: 1,
						name: "休息"
					}
				],
				arr: [],obj:{},
			}
		},
		onLoad() {
			this.http();
		},
		methods: { 
			
			del(index){
			 this.arr.splice(index,1)
		    },
			
			choicepayType(e){
			   this.Businesstype=e;
	     	},
			
			http(){
				this.request({
					url:"Smdcshop/yingyetime",
					data: {
						admin_id:uni.getStorageSync("admin_id"),
					}
				}).then(res => {
					if (res.code == 200) {
						this.obj=res.data;
						this.Businesstype=res.data.is_rest;
						this.arr=res.data.time_content;
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
			
			add(e) {
				this.arr.push({
					start: '',
					end: ''
				})
			},
			
			save(e){
				let params={
					time_content:JSON.stringify(this.arr),
					id:this.obj.id,
					is_rest:this.Businesstype,
				}
				this.request({
					url:"Smdcshop/saveyingyetime",
					data: params
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
			bindTimeStar(e) {
				let index = e.currentTarget.dataset.index;
				console.log(e)
				this.arr[index].start = e.detail.value;
			},
			bindTimeEnd(e) {
				let index = e.currentTarget.dataset.index;
				this.arr[index].end = e.detail.value;
			}
		}
	}
</script>

<style>
	.checklist-box {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		margin: 5px 0;
		margin-right: 22px;
	}

	.radio__inner {
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		border: 1px solid #DCDFE6;
		border-radius: 2px;
		box-sizing: border-box;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		background-color: #fff;
		z-index: 1;
		-webkit-transition: border-color .3s;
		transition: border-color .3s;
	}

	.radio__inner-icon {
		width: 8px;
		height: 8px;
		border-radius: 10px;
		opacity: 0;
		-webkit-transition: -webkit-transform .3s;
		transition: -webkit-transform .3s;
		transition: transform .3s;
		transition: transform .3s, -webkit-transform .3s;
	}

	.is-default-checked {
		opacity: 1;
		background-color: #007aff;
		-webkit-transform: rotate(45deg) scaleY(1);
		transform: rotate(45deg) scaleY(1);
	}

	.checklist-text {
		font-size: 28rpx;
		margin-left: 5px;
		-webkit-transition: color 0.2s;
		transition: color 0.2s;
		color: #000;
	}

	.act_border {
		border: 1rpx solid #007aff;
	}

	.cell {
		padding: 20rpx;
	}

	.title-block {
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.amd {
		padding: 0rpx 20rpx;
	}

	.Addtime {
		width: 250rpx;
		height: 70rpx;
		border: 1px solid transparent;
		padding: 0 36rpx;
		background-color: #1E9FFF;
		color: #fff;
		white-space: nowrap;
		text-align: center;
		font-size: 28rpx;
		border-radius: 4rpx;
		cursor: pointer;
	}

	.cellPicker {
		font-size: 26rpx;
		border: 1rpx solid #F1F1F1;
		padding: 15rpx 0rpx;
		width: 180rpx;
		text-align: center;
	}

	.delelt {
		color: red;
		font-size: 26rpx;
	}

	.iconshanchu1 {
		font-size: 26rpx;
		margin-right: 10rpx;
	}
	
	
		/*  */
	.footer-bar {
			height: 160rpx;
			/*兼容 IOS<11.2*/
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容 IOS>11.2*/
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
	}
	.footer-bar .content {
			width: 100%;
			height: 160rpx;
			background-color: #fff;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 100;
			/*兼容 IOS<11.2*/
			padding-bottom: constant(safe-area-inset-bottom);
			/*兼容 IOS>11.2*/
			padding-bottom: env(safe-area-inset-bottom);
			box-sizing: content-box;
			box-shadow: 0 -5rpx 10rpx #eee;
	}
	.footer-bar .content .btn {
			width: 700rpx;
			height: 100rpx;
			background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
			border-radius: 8rpx;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
			text-align: center;
			line-height: 100rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #fff;
	}
	.footer-bar .content .detail-btn {
			width: 50%;
			height: 40rpx;
	}
	.footer-bar .content .detail-btn .btn-icon {
			flex: none;
			display: block;
			width: 32rpx;
			height: 32rpx;
			margin-right: 8rpx;
	}
</style>
