<template>
	<div class="CmsDatePicker">
		<el-date-picker
			:type="type"
      :format="format"
      :value-format="valueFormat"
      :picker-options="{
        disabledDate: disabledDate,
        onPick: onPick,
        shortcuts: shortcuts
      }"
      style="width: 100%"
      v-model="selectValue"
      v-bind="$attrs"
			:placeholder="placeholder"
			allowClear
		>
			<i class="el-input__icon el-icon-date" slot="suffix"> </i>
		</el-date-picker>
	</div>
</template>

<script>
export default {
	name: "CmsDatePicker",
	props: {
		value: {
			type: [String, Array, Number],
			default: () => {
				return "";
			},
		},
		placeholder: {
			type: String,
			default: () => {
				return "";
			},
		},
    onPick: Function,
    shortcuts: {
      type: Array,
      default: () => {
        return undefined;
      },
    },
    disabledDate: Function,
		type: {
			type: String,
			default: () => {
				return "date";
			},
		},
		format: {
			type: String,
			default: () => {
				return "yyyy-MM-dd";
			},
		},
		valueFormat: {
			type: String,
			default: () => {
				return "yyyy-MM-dd";
			},
		},
	},
	data() {
		let { ...listeners } = this.$listeners;
		return {
			listeners: listeners,
		};
	},
	computed: {
		selectValue: {
			get() {
				return this.value;
			},
			set(val) {
				this.$emit("input", val);
			},
		},
	},
	methods: {
		updateVal(val) {
			this.$emit("input", val); // 通过事件实现组件属性到父组件的传递
		},
	},
};
</script>
