<template>
  <DateRangeComponent
    :value="props.value"
    :valueFormat="props.valueFormat"
    :disabled="props.disabled"
    :record="props.record"
    :firstPlaceholder="props.record?.placeholderContent || props.placeholder"
    :secondPlaceholder="props.record?.placeholderContent || props.placeholder"
    :readonly="props.readonly"
    @onBlur="dataValueBlur"
    @onClick="dataValueClick"
    @onChange="dataValueChange"
    @onFocus="dataValueFocus"
    @onInput="dataValueInput"
    @update:value="updateValue"
  ></DateRangeComponent>
</template>

<script setup name="FormDateRange">
const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  //保存的值
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD'
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  record: {
    type: Object,
    default: {}
  },
  placeholder: {
    type: String,
    default: '请选择日期'
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:value', 'onBlur', 'onClick', 'onChange', 'onFocus', 'onInput']);

const updateValue = value => {
  emits('update:value', value);
};

// 点击
const dataValueClick = () => {
  emits('onClick', props.record);
};
// 失去焦点
const dataValueBlur = () => {
  emits('onBlur', props.record);
};
// 改变
const dataValueChange = () => {
  emits('onChange', props.record);
};
// 获取焦点
const dataValueFocus = () => {
  emits('onFocus', props.record);
};
// 输入
const dataValueInput = () => {
  emits('onInput', props.record);
};
</script>

<style></style>
