<template>
	<u-popup :show="showPop" :round="20"  @close="showPop=false" closeable>
		<view class="son-wrap">
			<view class="time-title">
				时间选择
			</view>
			<view style="flex: 1;overflow-y: scroll;padding: 0 30rpx;">
				<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>
			
		</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 {
      showPop: false, //控制该组件显示隐藏
      active: 10000, //默认不选中
      times: '', //时间
      timeNumber: '', //当前时间转化为数字
    }
  },
  methods: {		
    //---时间选择
    chooseTime(i) { 
      this.active = i
      this.times = this.chooseTimeList[i].startPlanTime
    },
    //---时间确认事件
    confirm(date) { 
      this.showPop = 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" lang="scss">
	.son-wrap {
		position: relative;
		height:65vh;
		display: flex;
		flex-direction:column;
	}
	.time-title{
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx 24rpx;
		border-radius: 20rpx 20rpx 0 0;
	}
	.time-content {
		display: flex;
		flex-wrap: wrap;
	}
	.time-list {
		width:30%;
		height: 90rpx;
		line-height: 30rpx;
		text-align: center;
		margin-right:5%;
		border-radius: 15rpx;
		display: inline-block;
		background:#f2f2f2;
		position: relative;
		padding-bottom: 8rpx;
	}
	.time-list view {
		margin-top: 10rpx;
	}
	.time-content view:nth-child(3n) {
		margin-right: 0;
	}
	.time-list.on {
		border: 1px solid $theme;
		background: #DAE6F6;
	}
	.time-sure{
		margin-top:60rpx;
		text-align: center;
	}
</style>
