<template>
	<div class="telly-item">
		<telly-picker :value="value3" :showClear='false' :range="pickData" :rangekey="rangekey3"
			:placeholderText="placeholderText" @bindChange="multibindChange" @cancel="cancel" @confirm="multiconfirm">
		</telly-picker>
	</div>
</template>

<script>
	//import VuePicker from 'vue-pickers'
	const tdata = [
		{
			"hour": '00',
		},
		{
			"hour": '01',
		},
		{
			"hour": '02',
		},
		{
			"hour": '03',
		},
		{
			"hour": '04',
		},
		{
			"hour": '05',
		},
		{
			"hour": '06',
		},
		{
			"hour": '07',
		},
		{
			"hour": '08',
		},
		{
			"hour": '09',
		},
		{
			"hour": '10',
		},
		{
			"hour": '11',
		},
		{
			"hour": '12',
		},
		{
			"hour": '13',
		},
		{
			"hour": '14',
		},
		{
			"hour": '15',
		},
		{
			"hour": '16',
		},
		{
			"hour": '17',
		},
		{
			"hour":'18',
		},
		{
			"hour": '19',
		},
		{
			"hour": '20',
		},
		{
			"hour": '21',
		},
		{
			"hour": '22',
		},
		{
			"hour": '23',
		},
	]
	var tdata2 = [
		{
			"minute": '00',
		},
		{
			"minute": '30',
		},
	]

	export default {
		props: {
			select:String,
		},
		data() {
			return {
				pickData: [
					tdata,
					tdata2
				],
				// result: '',
				dateinfo: {},
				//dateRange: [],
				placeholderText:this.select,
				value3: [0, 0],
				rangekey3: ['hour', 'minute'],
			}
		},
		watch:{
			select(val){
				this.placeholderText = val
			}
		},
		methods: {
			// cancel() {
			// 	this.result = 'click cancel result: null'
			// 	this.$emit('update:visibleShow', false);
			// },
			// confirm(res) {
			// 	//console.log("this.result",res[0].label)
			// 	this.$emit('update:visibleShow', false);
			// 	this.$emit('Time', `${res[0].label}:${res[1].label}`);
			// },
			//多列选择器 确定事件
			
			multiconfirm(e) {
				console.log(e)
				//this.dateinfo = {};
				// this.dateinfo.year = e[0].hour;
				// this.dateinfo.month = e[1].minute;
				this.$emit('Time', `${e[0].hour}:${e[1].minute}`);
			},
			//多列选择器 选择改变事件
			multibindChange(e) {
				console.log(e)
			},
			//取消事件
			cancel() {
				uni.showToast({
					title: "点击了取消"
				})
			},
		}
	}
</script>
<style lang="scss">
		
	/deep/.uni-flex{
		display: flex;
	}
	.telly-item {
	        display: flex;
	        text-align: center;
	        padding: 10rpx;
			justify-content: center;
	    }
</style>