<!--
 * @Descripttion: 日期选择组件
 * @Author: 龙运模
 * @Date: 2024年07月11日
 * @LastEditors: 龙运模
 * @LastEditTime:
-->

<template>
	<div class="scDatePicker">
		<el-date-picker ref="datePicker" v-bind="$attrs" class="input" v-model="localDatePicker" @change="dateChange" @input="emitActivationDate" type="daterange"  :size="size"
			:popper-options="{ placement: 'bottom-start' }"  :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder" clearable
			:default-time="defaultTime"
		></el-date-picker>
	</div>
</template>

<script>
export default {
	name: "index",
	props:{
		activation_date: {
			type: Object,
			default: () => ({ operator: "between", value: [] })
		},
		size:{ type: String, default: "small" },
		startPlaceholder:{type:String, default:""},
		endPlaceholder:{type:String, default:""}
	},
	watch:{
		activation_date:{
			handler(val){
				if(!val || val.value.length == 0){
					this.localDatePicker = [];
				}else{
					this.localDatePicker = val.value.map((date,index)=> index===0? this.$TOOL.getStartTime(date):this.$TOOL.getEndTime(date));
				}
			},
			immediate:true,
			deep:true
		}
	},
	data(){
		return{
			localDatePicker:[],
			defaultTime:[
				new Date(2000, 1, 1, 0, 0, 0),
				new Date(2000, 1, 1, 23, 59, 59)
			]
		}
	},
	mounted() {

	},
	methods:{
		dateChange(e){
			this.localDatePicker = e;
			this.emitActivationDate();
		},
		emitActivationDate() {
			let date = this.localDatePicker.map((date,index) => index===0? this.$TOOL.formatStartTime(date):this.$TOOL.formatEndTime(date));
			this.$emit('update:activation_date', {
				operator: this.activation_date.operator,
				value: this.localDatePicker && this.localDatePicker.length > 0? date:[]
			});
		}
	}
}
</script>

<style scoped lang="scss">
	.scDatePicker{
		width: 100%;
	}
</style>
