<template>
	<div>
		<VuePicker :data="pickData" :showToolbar="true" @cancel="cancel" @confirm="confirm"
			:visible.sync="pickerVisible" />
	</div>
</template>

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

	export default {
		components: {
			VuePicker
		},
		props: {
			visibleShow: Boolean,
		},
		data() {
			return {
				pickData: [
					tdata,
					tdata2
				],
				pickerVisible: false,
				result: ''
			}
		},
		watch: {
			visibleShow(val) {
				this.pickerVisible = 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}`);
			}
		}
	}
</script>