<template>
	<myPickerview :list="list" :isLink="false" @confirm="confirm" ref="picker"></myPickerview>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import myPickerview from './my-pickerview'
	const picker = ref(null)
	function generateString(length, char) {
	    return char.repeat(length);
	}
	function createNumberArr(len) {
		return new Array(len).fill(1).map((v, index) => {
			return `${generateString(`${len}`.length-1,'0')}${index}`.slice(-2)
		})
	}

	const $HOURS =createNumberArr(24)
	const $MINUTES = createNumberArr(60)
	const list = reactive(
		[
			$HOURS,
			[':'],
			$MINUTES,
			['至'],
			$HOURS,
			[':'],
			$MINUTES
		]
	)
	const emits=defineEmits(['confirm'])

	function open() {
		picker.value.open()
	}
	function confirm(e){
		const val=e.join('').replace('至','-')
		emits('confirm',val)
	}
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
</style>