<template>
	<view class="">
		<header-title title="规则设置"></header-title>
		
		<view class="main">
			<view class="main-home">
				<view class="box-pack-between ft32 main-item">
					<view>添加的时间 </view>
				</view>
				<view class="item-bg" v-for="(item,index) of arr" :key='index'>
					<view class="box-pack-between">
						<text>{{item}}</text>
						<image class="del" @click="del"  :data-index="index" :data-title="item" src="../../static/images/del.png" mode=""></image>
					</view>
				</view>	
			</view>
		</view>
		
		<view  style="height: 100rpx;">
			
		</view>

		<view class="bottom-bars flex-center">
			<!-- <view class="flex-center ft28 time"> -->
			<button @click="bindTimeChange">
				<view class="picker flex-center time">
					添加时间
				</view>
			</button>
			<!-- </view> -->
		</view>

		<!-- 授权 -->
		<zx-uni-popup ref="popup" type="bottom">

			<view class="shoot">
				<view class="flex shoot-header box-pack-between">
					<text class="" @click="cancel">取消</text>
					<text class="confirm" @click="confirm">确认</text>
				</view>
				<view class="flex">
					<scroll-view scroll-y class="flex-grow-1 hg400">
						<view class="header-item flex-center" :class="act_index1==index?'act':''" @click="choise1" :data-title="item"
						 :data-index="index" :key="index" v-for="(item,index) of time_list1">
							{{item}}
						</view>
					</scroll-view>

					<scroll-view scroll-y class="flex-grow-1 hg400">
						<view class="header-item flex-center" @click="choise2" :data-title="item" :data-index="index" :class="act_index2==index?'act':''"
						 :key="index" v-for="(item,index) of time_list2">
							{{item}}
						</view>
					</scroll-view>

				</view>

			</view>

		</zx-uni-popup>

	</view>
</template>

<script>
	import headerTitle from '@/components/header/header-title.vue';
	import zxUniPopup from '@/components/zx-uni-popup/uni-popup.vue';
	export default {
		components: {
			headerTitle,
			zxUniPopup,
		},
		data() {
			return {
				time_list1: [
					"00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
					"12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",
					"23:59",
				],
				time_list2: [
					"00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
					"12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",			
					"23:59",
				],
				act_index1: -1,
				act_index2: -1,
				time1: "",
				time2: "",
				arr:[],
				id:"",
			}
		},
		onLoad(e) {
			this.id=e.id;
            this.arr=JSON.parse(e.arr);
		},
		methods: {
			
			del(e){
				let title = e.currentTarget.dataset.title,index=e.currentTarget.dataset.index;
				uni.showModal({
					title: '提示',
					content: '确定要删除此时间吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if(res.confirm){
							this.request({
								url: "funeng/delExchangeOpenTime",
								data: {
									token: uni.getStorageSync("token"),
							        open_time:title,
									id:this.id
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === '200') {
								  this.arr.splice(index,1)  
							      uni.showToast({
							      	title: res.message,
							      	icon: 'none'
							      })
								}
							}).catch((res) => {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			cancel(){
				this.$refs.popup.close();
			},
			bindTimeChange(e) {
				this.$refs.popup.open();
			},
			
			choise1(e) {
				let index = e.currentTarget.dataset.index,
					title = e.currentTarget.dataset.title;
				console.log(index, "index")
				this.time1 = title;
				this.act_index1 = index;
			},
			
			choise2(e) {
				let index = e.currentTarget.dataset.index,
					title = e.currentTarget.dataset.title;
				this.time2 = title;
				this.act_index2 = index;
			},

			confirm(e) {
				console.log(e, "e")
				this.request({
					url: "funeng/addExchangeOpenTime",
					data: {
						token: uni.getStorageSync("token"),
						open_time: this.time1 + "-" + this.time2,	id:this.id
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						console.log(this.arr)
					   var time=this.time1 + "-" + this.time2;
                       this.arr.push(time);
					   this.$refs.popup.close();
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},


		},
	}
</script>

<style>
	page {}

	.main-item {
		margin: 20rpx 0 32rpx 0;
	}

	.main-home {
		width: 670rpx;
		margin: 0 auto;
	}

	.item-bg {
		width: 670rpx;
		background: #f6f8fe;
		border-radius: 12rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #333333;
		padding: 36rpx 32rpx;
		margin-bottom:20rpx ;
	}

	.del {
		width: 32rpx;
		height: 32rpx;
	}

	.bottom-bars {
		width: 100%;
		/* padding: 30rpx 0; */
		position: fixed;
		bottom: 10rpx;
	}

	.bottom-bars .time {
		text-align: center;
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(132deg, rgb(64, 158, 255) 0%, rgb(64, 158, 255) 100%);
		box-shadow: 0px 2rpx 12rpx rgb(64, 158, 255);
		opacity: 1;
		color: #fff;
	}

	.picker {
		height: 90rpx;
	}

	.shoot {
		height: 500rpx;
		background: #FFFFFF;
	}

	.header-item {
		height: 70rpx;
	}

	.hg400 {
		height: 400rpx;
	}

	.shoot-header {
		padding: 20rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.confirm {
		color: #007AFF;
	}

	.shoot .act {
		color: #007AFF;
	}
</style>
