<template>
	<view>
		<u-form-item
			:label="label"
			:prop="prop"
			:required="required"
			:label-position="labelPosition"
			@click="fnShowPicker"
		>
			<view class="select_content">
				<u-input
					:value="modelValue || '请选择'"
					border="none"
					input-align="right"
					readonly
				/>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</u-form-item>
		<u-line />
		<u-datetime-picker
			v-model="value"
			:show="visible"
			:max-date="maxDate"
			:min-date="minDate"
			:mode="mode"
			@cancel="visible = false"
			@confirm="fnConfirm"
		/>
	</view>
</template>

<script>
import dayjs from "dayjs";

export default {
	props: {
		label: {
			type: String,
			default: "时间",
		},
		prop: {
			type: String,
			default: "",
		},
		mode: {
			type: String,
			default: "datetime",
		},
		labelPosition: {
			type: String,
			default: "left",
		},
		required: {
			type: Boolean,
			default: true,
		},
		maxDate: {
			type: Number,
			default: dayjs().add(10, "year").valueOf(),
		},
		minDate: {
			type: Number,
			default: dayjs().subtract(10, "year").valueOf(),
		},
		modelValue: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			visible: false,
			value: new Date().getTime(),
		};
	},
	methods: {
		fnShowPicker() {
			this.visible = true;
		},
		fnConfirm({ mode, value }) {
			this.$emit("fn-confirm-emit", { mode, value });
			this.visible = false;
		},
	},
};
</script>

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