<template>
  <el-date-picker
    v-model="dateRange"
    type="datetimerange"
    value-format="yyyy-MM-dd HH:mm:ss"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    :picker-options="pickerOptions"
    :clearable="false"
    v-on="$listeners"
    :style="{width: width}"
    :default-time="['00:00:00', '23:59:59']"
  />
</template>
<script>
import { DatePickerOptions } from '@/utils/constants'

export default {
  name: "StartEndDatePicker",
  props: {
    startDate: {
      type: String,
      default: null,
    },
    endDate: {
      type: String,
      default: null,
    },
    pickerOptions: {
      type: Object,
      default: DatePickerOptions.DEFAULT
    },
    width: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
    }
  },
  computed: {
    dateRange: {
      get() {
        if (this.startDate == null || this.endDate == null) {
          return []
        }
        return [this.startDate, this.endDate];
      },
      set(val) {
        this.$emit('update:startDate', val[0]);
        this.$emit('update:endDate', val[1])
      }
    }
  },
}
</script>
