<template>
	<view>
		<view @tap="$refs.calendar.open()" hover-class="cc-active">
			<view class="iconfont icon-calendar timer"><text class="padding-left-xs">{{ date }}</text></view>
		</view>
		<uni-calendar @confirm="handleChange" :insert="false" :range="false" :show-month="true" ref="calendar" />
	</view>
</template>

<script>
	export default {
		name: 'DateSelector',
		data() {
			const time = this.$moment().format('YYYY-MM-DD');
			return {
				time,
			};
		},

		computed: {
			date() {
				const {
					time
				} = this;
				return time;
			},
		},

		methods: {
			/**
			 * 日历确认选择了时间段
			 * @param {object} value 日历返回对象
			 */
			handleChange(value) {
				this.time = value.fulldate;
				this.$emit('change', this.time);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.timer {
		font-size: 34rpx !important;
		color: $gray;
	}
</style>
