<!-- 
<date-range :start.sync="startTime" :end.sync="endTime"></date-range>
其中startTime, endTime为父组件data
 -->
<template>
	<div>
		<el-date-picker v-model="startTime" :size="size" :type="type" :format="format" :placeholder="startPla" :picker-options="startOption" @change="handleStartTimeChange" :default-value="startDef" range-separator="~"></el-date-picker>
		<el-date-picker v-model="endTime" :size="size" :type="type" :format="format" :placeholder="endPla" :picker-options="endOption" @change="handleEndTimeChange" :default-value="endDef" range-separator="~"></el-date-picker>	
	</div>
	
</template>
<script type="text/javascript">
	const SIZE_TYPES = ['large', 'small', 'mini']
	const DATE_TYPES = ['year', 'month', 'date', 'week', 'datetime', 'datetimerange', 'daterange']
	export default {
	  props: {
	  	start: {
	  		type: String,
	  		required: true
	  	},
	  	end: {
	  		type: String,
	  		required: true
	  	},
	  	size: {
	  		type: String,
	  		required: false,
	  		validator: (value) => SIZE_TYPES.includes(value)
	  	},
	  	type: {
	  		type: String,
	  		default: 'date',
	  		required: false,
	  		validator: (value) => DATE_TYPES.includes(value)
	  	},
	  	format: {
	  		type: String,
	  		default: 'yyyy-MM-dd',
	  	},
	  	startDef: {
	  		type: String,
	  		required: false
	  	},
	  	endDef: {
	  		type: String,
	  		required: false
	  	},
	  	startPla: {
	  		type: String,
	  		default: '起始时间'
	  	},
	  	endPla: {
	  		type: String,
	  		default: '结束时间'
	  	},
	  	startOpt: {
	  		type: Object
	  	},
	  	endOp: {
	  		type: Object
	  	}
	  },
	  data() {
	  	return {
	  		startTime: this.start,
	  		endTime: this.end,
	  		startOption: {...this.startOpt},
	  		endOption: {...this.endOpt, disabledDate: (time) => time.getTime() < this.startTime}
	  	}
	  },
	  methods: {
	  	handleStartTimeChange(time) {
	  	  this.$emit('update:start', time)
	  	},
	  	handleEndTimeChange(time) {
	  	  this.$emit('update:end', time)
	  	},

	  }
	}
</script>
<style type="text/css"></style>