<template>
  <div class="x-date">
    <div class="date-box">
      <el-date-picker
        ref="datePicker"
        v-model="formValue"
        class="form-select-date-input"
        v-bind="$attrs"
        :prefix-icon="''"
        :append-to-body="appendToBody"
        :disabled="disabled"
        :clearable="clearable"
        tabindex="0"
        v-on="$listeners"
        @keyup.enter.native="handleEnter"
      ></el-date-picker>
      <x-svg-icon
        v-if="!disabled"
        :class="value && clearable && !disabled ? 'date-picker-icon-hidden' : ''"
        class="date-picker-icon"
        name="x-lib-datepicker"
      ></x-svg-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XDate',
  props: {
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Date, Array],
      default: ''
    },
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formValue: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('change', value)
      }
    }
  },
  methods: {
    handleEnter() {
      this.$refs.datePicker.focus()
    }
  }
}
</script>
