<template>
	<view>
		<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true" >
			<view class="appointment-time u-relative">
				<view class="bold-700 lg u-p-t-30 u-p-b-30 u-text-center time-text">选择预约时间</view>
				<view class="u-absolute close" @click="onClose">
					<u-icon size="40" name="close"></u-icon>
				</view>
				<view class="block row" style="height: 560rpx;">
					<view class="aside">
						<scroll-view style="height: 100%;" scroll-y="true" scroll-with-animation="true">
							<view style="padding-bottom: 200rpx;">
								<block v-for="(item, index) in dateList" :key="index">
									<view :class="'one-item sm ' + (index == selectIndex ? 'active bg-white' : '')" @click="changeActive(index)">
										<text class="name">{{ item.name }}</text>
										<view v-if="index == selectIndex" class="active-line bg-default"></view>
									</view>
								</block>
							</view>
						</scroll-view>
					</view>
					
					<view class="main">
						<scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
							<view class="main-wrap">
								<view class="bg-white br16 row u-col-top nr time-block" v-for="(item, index) in timeList" :key="index" @click="selectTime(index)">
									<view>{{ item.start_time }}-{{ item.end_time }}</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {yuyueTime} from '@/api/order'

	export default {
		name: "appointment-time",

		props: {
			value: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {
				mobile: '',
				selectIndex: 0,
				cateList: [],
				dateList: [],
				timeList: []
			};
		},
		created() {
			this.dateList = [
				{'name': '今天'},
				{'name': '明天'}
			]

			this.getYuYueTime()
		},
		methods: {
			// 获取预约时间
			getYuYueTime() {
				const store_id = 1
				yuyueTime({store_id}).then((res) => {
					this.timeList = res.data
				})
			},

			changeActive(index) {
				const {cateList} = this
				this.selectIndex = index
			},

			// 选择时间
			selectTime(index) {
				const day = this.dateList[this.selectIndex].name
				const time_id = this.timeList[index].id
				const time = this.timeList[index].start_time + '-' + this.timeList[index].end_time
				this.$emit('update', {
					day,
					time_id,
					time
				})
			},
			
			// 提交数据
			handleSubmit(e) {
				const {mobile} = this
				if (!mobile) return this.$toast({
					title: '请授权手机号'
				})
				
				this.$emit('update', {
					mobile
				})
				
				this.showPop = false
				this.$emit('close')
			},
			
			// 关闭弹窗
			onClose() {
				this.showPop = false
				this.$emit('close')
			}
		},
		computed: {
			showPop: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		},
	};
</script>

<style lang="scss">
	.appointment-time {
		height: 560rpx;
		max-height: 560rpx;
	}

	.time-text {
		font-size: 40rpx;
	}

	.close {
		right: 30rpx;
		top: 40rpx;
	}
	
	.block {
		height: 100vh;
	}
	.aside {
		width: 180rpx;
		flex: none;
		height: 100%;
		background-color: #fdfdfd;
		
		.one-item {
			position: relative;
			text-align: center;
			height: 108rpx;
			line-height: 108rpx;
			width: 200rpx;

			&.active {
				color: $-color-theme;
				font-size: 26rpx;
				font-weight: bold;
			}
		
			.active-line {
				position: absolute;
				width: 6rpx;
				height: 30rpx;
				left: 4rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.time-block {
		height: 108rpx;
		line-height: 108rpx;
		border-bottom: 2rpx solid #F5F5F5;
	}
	
	.main {
		height: 100%;
		flex: 1;
		
		.main-wrap {
			position: relative;
			padding: 0 20rpx;
			padding-bottom: 108rpx;
			.goods {
				padding-bottom: 200rpx;
				.info {
					width: 100%;
					display: flex; 
					justify-content: space-between; 
					margin: 0 16rpx;
				}
			}
		}
	}
</style>