<template>
	<view class="date-bg">
		<view hover-class="cc-active">
			<view class="iconfont icon-calendar timer"><text class="padding-left-xs">{{ startDate }}</text></view>
		</view>
		
		<view class="startTime">
			<ruiDatePicker
				fields="minute"
				start="2010-01-01 00:00"
				end="2030-12-30 23:59"
				:value="valueStart"
				@change="bindChangeStart"
			></ruiDatePicker>
		</view>
		
	</view>
</template>

<script>
	import ruiDatePicker from 'components/rattenking-dtpicker/rattenking-dtpicker.vue';
	
	export default {
		name: 'StartDateSelector',
		components: {ruiDatePicker},
		
		data() {
			return {
				valueStart: this.$moment(new Date()).format('YYYY-MM-DD HH:mm')
			};
		},

		computed: {
			startDate() {
				const {
					valueStart
				} = this;
				return valueStart;
			},
		},

		methods: {
			bindChangeStart(value){
				// console.log('抵达时间',value)
				this.valueStart = value;
				this.$emit('change', this.valueStart);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.timer {
		font-size: 34rpx !important;
		color: $gray;
	}
	
	.date-bg{
		position: relative;
	}
	
	.startTime{
		opacity: 0;
		position: absolute;
		top: -14rpx;
		left: 50rpx;
	}
</style>
