<template>
	<view class="datetimePicker" @touchmove.stop.prevent = "moveHandle">
		<u-datetime-picker ref="datetimePicker" itemHeight="120" :visibleItemCount="visibleItem" :show="visible"
			v-model="timestamp" :mode="dateType" @confirm="onSelsectDate" @cancel="onVisible" />
	</view>
</template>

<script>
	export default {
		name: "bs-datetimePicker",
		options: { styleIsolation: 'shared' },
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			dateType: {
				type: String,
				default: 'date'
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		data() {
			return {
				//时间选择配置
				showPopup: false,
				timestamp: new Date().getTime(),
				dateValue: "", //时间戳转换后 年-月-日 
				visibleItem: 4,
			};
		},
		methods: {
			moveHandle(){
				
			},
			//自定义时间格式
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				return `${value}分`;
			},

			onVisible() {
				this.$emit('onVisible')
			},
			// 时间选择
			onSelsectDate(dateInfo) {
				const date = this.formatDate(dateInfo.value)
				this.dateValue = date
				this.timestamp = dateInfo.value
				this.$emit('onSelsectDate', { dateValue: date, timestamp: dateInfo.value, })
			},

			//时间戳转换
			formatDate(timestamp) {
				const nowDate = new Date(timestamp)
				var year = nowDate.getFullYear();
				var month = nowDate.getMonth() + 1;
				var date = nowDate.getDate();
				const hour = nowDate.getHours()
				const minute = nowDate.getMinutes()
				if (this.dateType === 'date') {
					return `${year}-${ month}-${date}`
				} else {
					return `${year}-${ month}-${date} ${hour}-${ minute}`
				}
			},
		}
	}
</script>

<style lang="scss">
	/* #ifdef MP */
	/deep/.u-popup__content {
		height: 40vh !important;

		.u-picker__view__column {
			.u-picker__view__column__item {
				line-height: 88rpx !important;
			}
		}
	}

	/* #endif */
</style>
