<template>
	<u-popup :show="showPop" :round="20"  @close="confirm()" 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' 
						:style="{color:item.copyLast=='售罄'?'#ff0000':''}"
						v-for="(item,index) of chooseTimeList" 
						:class="{on:active==index}" 
						@click="chooseTime(index)" 
						:key="index"
					>
						<view >				
							{{item.startPlanTime?item.startPlanTime.substr(0,5):""}}
							<text v-if="!item.saleOnlyShowFromDate">
								-{{item.endPlanTime?item.endPlanTime.substr(0,5):""}}
							</text>
						</view>
						<view>
							<text v-if="item.copyLast!='余票充足'&&item.copyLast!='售罄'">剩余：</text> 
							{{item.copyLast}}
						</view>
					</view>
				</view>				
				<view style="padding:50rpx 0;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', 'timeActive'],
  watch: {
    timeActive: { //父组件选中的下标
      handler(newValue, oldValue) {
        if (newValue >= 0) {
          this.active = newValue
        }
      },
      deep: false,
      immediate: false
    },
  },
  data() {
    return {
      showPop: false, //控制该组件显示隐藏
      active: 10000, //默认不选中
    }
  },
  methods: {		
    //---时间选择
    chooseTime(index) { 
      if(this.chooseTimeList[index].copyLast!='售罄'){
        this.active = index
      }
    },
    //---时间确认事件
    confirm() { 
      this.showPop = false
      if(this.active!=10000){
        this.$emit('timeConfig', this.active)
      }
    }
  }
}
</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-content view:nth-child(3n) {
		margin-right: 0;
	}
	.time-list {
		width:30%;
		height: 90rpx;
		line-height: 30rpx;
		text-align: center;
		margin-right:5%;
		margin-top: 30rpx;
		border-radius: 15rpx;
		display: inline-block;
		background:#f2f2f2;
		position: relative;
		padding-bottom: 8rpx;
	}
	.time-list view {
		margin-top: 10rpx;
	}
	.time-list.on {
		border: 1px solid $theme;
		background: #DAE6F6;
	}
	.time-sure{
		margin-top:60rpx;
		text-align: center;
	}
</style>