<template>
	<view class="time1">
		<view class="top flex justify-between align-center">
			<text @tap="cancel">取消</text>
			<text class="confirm-class" @tap="confirm">确定</text>
		</view>
		<picker-view class="picker" @change="getime" indicator-style="height:30px;" :value="value">
			<picker-view-column>
				<view class="hours" style="line-height:30px; text-align: center;" v-for="(item,index) in hoursList" :key="index">{{item}}</view>
			</picker-view-column>
		
			<picker-view-column>
				<view class="minutes" style="line-height:30px; text-align: center;" v-for="(item,index) in minutes" :key="index">{{item}}</view>
			</picker-view-column>
			<picker-view-column>
				<view style="line-height:30px; text-align: center;color: #fc6035;">至</view>
			</picker-view-column>
			<picker-view-column>
				<view class="hours" style="line-height:30px; text-align: center;" v-for="(item,index) in hoursList" :key="index">{{item}}</view>
			</picker-view-column>
	
			<picker-view-column>
				<view class="minutes" style="line-height:30px; text-align: center;" v-for="(item,index) in minutes" :key="index">{{item}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>
<script>
	let minutes=[]
	for (let i = 0; i <= 59; i=i+30) {
		let m = '';
		if(i<10){
			m="0"+i
		} else {
			m = i
		}
	  minutes.push(m)
	}
	export default {
		props:{
			time:{
				type: Array,
				default: ['00','00','00','00','00']
			}
		},
		watch:{
			time() {
                this.value = this.time;
            },
		},
		created(){
			
		},
		data(){
			return{
				value:this.time,//默认结束开始时间
				hoursList:['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
				minutes,
			}
		},
		methods:{
			confirm(){
				// 2021-7-13 解决组件出现 undefined 问题
				let value1,value2,value3,value4;

				if(typeof(this.value[0]+'') == 'undefined' || this.value[0] === '0') {
					value1 = '00';
				} else {
					value1 = this.value[0];
				}
				if(typeof(this.value[1]) == 'undefined' || this.value[1] === '0') {
					value2 = '00';
				} else {
					value2 = this.value[1];
				}
				if(typeof(this.value[3]) == 'undefined' || this.value[3] === '0') {
					value3 = '00';
				} else {
					value3 = this.value[3];
				}
				if(typeof(this.value[4]) == 'undefined' || this.value[4] === '0') {
					value4 = '00';
				} else {
					value4 = this.value[4];
				}
				
				// 2021-7-13 选择 结束时间 小于 开始时间 提示
				if(value1 > value3 || (value1 === value3 && value2 > value4)) {
					uni.showToast({
						title:"结束时间不能小于开始时间",
						duration:1500, mask:false, icon:'none'
					});
					return;
				}
        if(value1 ==0){
          value1 = "00";
        }
        if(value2 ==0){
          value2 = "00";
        }
        if(value3 ==0){
          value3 = "00";
        }
        if(value4 ==0){
          value4 = "00";
        }
				let time = value1+":"+value2+" - "+value3+":"+value4
				this.$emit("confrim",{time:time})
			},
			cancel(){
				let time = this.value[0]+":"+this.value[1]+"-"+this.value[3]+":"+this.value[4]
				this.$emit("cancel",{time:time})
			},
			getime(e){
				let val = e.detail.value
				this.value[0] = this.hoursList[val[0]] 
				this.value[1] = this.minutes[val[1]] 
				this.value[2] = val[2]
				this.value[3] = this.hoursList[val[3]] 
				this.value[4] = this.minutes[val[4]]

			},
		}
	}
</script>
<style lang="scss">
	.time1{
		width:100%;
		margin: 0 auto;
		background-color:#FFFFFF;
		color: #000;
		height: 450rpx;
		.top{
			width: 690rpx;
			margin: 0 auto;
			height: 100rpx;
			line-height: 100rpx;
			text{
				font-weight: bold;
				&:nth-child(1){
					font-size: 28rpx;
					color: #999;
				}
				&:nth-child(2){
					font-size: 28rpx;
					color: #0A84FF;
				}
			}
		}
		.tip12{
			width: 100%;
			height: 100rpx;
			view{
				width: 50%;
				text-align: center;
				line-height: 100rpx;
				font-size: 40rpx;
				color: #000000;
			}
		}
		.hours{
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}
		.minutes{
			font-size: 30rpx;
			font-weight: bold;
			color: #000;
		}
	}
	.picker{
		width: 100%;
		height: 300rpx;
	}
	.confirm-class {
		margin-right: 10px;
		float: right;
	}
</style>
