<template>
	<u-popup :show="show" :round="10" closeable @close="show=false">
		<view class="time">
			<view class="time-title">
				时间选择
			</view>
			<view class="time-content" v-if="chooseTimeList&&chooseTimeList.length>0">
				<!--库存大于零并且当前时间小于班次的开始时间才显示-->
				<view 
					class='time-list' 
					v-for="(item,index) of chooseTimeList" 
					:class="{on:active==index}" 
					@click="chooseTime(index)" 
					:key="index" v-if="item.last>0"
				>
					<view>				
						{{item.startPlanTime?item.startPlanTime.substr(0,5):""}}
						<text v-if="item.endPlanTime">-</text>
						{{item.endPlanTime?item.endPlanTime.substr(0,5):""}}
					</view>
					<view>
						剩余：{{item.last}}
					</view>
				</view>
			</view>

			<view style="padding: 0.5rem 0rem;color: #FF0000;" v-else>
				空空如也...
			</view>
			<view class="time-sure">
				<text class="big-btn" @click="confirm()">确定</text>
			</view>
		</view>
	</u-popup>

</template>

<script>
	export default {
		props: ["chooseTimeList", "chooseTimeData", "timeActive"],
		watch: {
			timeActive: { //父组件选中的下标
				handler(newValue, oldValue) {
					if (newValue >= 0) {
						this.active = newValue
					}
				},
				deep: false,
				immediate: false
			},
		},
		data() {
			return {
				show: false, //控制该组件显示隐藏
				active: 10000, //默认不选中
				times: "", //时间
				timeNumber: "", //当前时间转化为数字
			}
		},
		methods: {
			
			//---时间选择
			chooseTime(i) { 
				this.active = i
				this.times = this.chooseTimeList[i].startPlanTime
			},
			//---时间确认事件
			confirm(date) { 
				this.show = false;
				this.$emit("timeConfig", this.times)
			},
		},
		mounted() {
			let times = new Date().Format("yyyy-MM-dd hh:mm:ss")
			this.timeNumber = parseInt(this.$commonjs.changeTime(times))
		}
	}
</script>

<style scoped="scoped">
	.time {
		padding:30rpx 20rpx 60rpx 20rpx;
		text-align: center;
	}

	.time-title{
		font-size:32rpx;
		font-weight: bolder;
	}

	.time-content {
		display: flex;
		flex-wrap: wrap;
	}

	.time-list {
		width: 30%;
		height: 80rpx;
		text-align: center;
		line-height: 30rpx;
		color: #666666;
		background: rgb(242, 242, 242);
		border-radius: 16rpx;
		margin-right: 5%;
		margin-top: 30rpx;
	}

	.time-list view:first-child {
		margin-top: 10rpx;
	}

	.time-list view {
		width: 100%;
		text-align: center;
	}

	.time-content view:nth-child(3n) {
		margin-right: 0;
	}

	.time-list.on {
		background: none;
		color: #3dbcff;
		border: 1px solid #3dbcff;
		box-sizing: border-box;
	}

	.time-sure{
		margin-top: 30rpx;
	}
</style>
