<template>
  <el-input
    class="el-date-editor md-data-picker"
    :class="'el-date-editor--' + type"
    :readonly="!editable || readonly || type === 'dates'"
    :disabled="pickerDisabled"
    :size="pickerSize"
    :name="name"
    v-bind="firstInputId"
    v-if="!ranged"
    v-clickoutside="handleClose"
    :placeholder="placeholder"
    @focus="handleFocus"
    @keydown.native="handleKeydown"
    :value="displayValue"
    @input="value => (userInput = value)"
    @change="handleChange"
    @mouseenter.native="handleMouseEnter"
    @mouseleave.native="showClose = false"
    :validateEvent="false"
    ref="reference"
  >
    <i
      slot="prefix"
      class="md-date__icon"
      :class="[showClose ? 'hide' : '']"
      @click="handleFocus"
    >
      <img src="../../assets/images/picker/date_picker_icon-action.png" />
    </i>
    <i
      slot="suffix"
      class="el-input__icon"
      @click="handleClickIcon"
      :class="[showClose ? '' + clearIcon : '']"
      v-if="haveTrigger"
    >
    </i>
  </el-input>
  <div
    class="el-date-editor el-range-editor el-input__inner"
    :class="[
      'el-date-editor--' + type,
      pickerSize ? `el-range-editor--${pickerSize}` : '',
      pickerDisabled ? 'is-disabled' : '',
      pickerVisible ? 'is-active' : '',
    ]"
    @click="handleRangeClick"
    @mouseenter="handleMouseEnter"
    @mouseleave="showClose = false"
    @keydown="handleKeydown"
    ref="reference"
    v-clickoutside="handleClose"
    v-else
  >
    <i :class="['el-input__icon', 'el-range__icon', triggerClass]"></i>
    <input
      autocomplete="off"
      :placeholder="startPlaceholder"
      :value="displayValue && displayValue[0]"
      :disabled="pickerDisabled"
      v-bind="firstInputId"
      :readonly="!editable || readonly"
      :name="name && name[0]"
      @input="handleStartInput"
      @change="handleStartChange"
      @focus="handleFocus"
      class="el-range-input"
    />
    <slot name="range-separator">
      <span class="el-range-separator">{{ rangeSeparator }}</span>
    </slot>
    <input
      autocomplete="off"
      :placeholder="endPlaceholder"
      :value="displayValue && displayValue[1]"
      :disabled="pickerDisabled"
      v-bind="secondInputId"
      :readonly="!editable || readonly"
      :name="name && name[1]"
      @input="handleEndInput"
      @change="handleEndChange"
      @focus="handleFocus"
      class="el-range-input"
    />
    <i
      @click="handleClickIcon"
      v-if="haveTrigger"
      :class="[showClose ? '' + clearIcon : '']"
      class="el-input__icon el-range__close-icon"
    >
    </i>
  </div>
</template>

<script>
import { DatePicker } from 'element-ui';
export default {
  name: 'date-picker',
  extends: DatePicker,
};
</script>

<style lang="scss">
@import '../../assets/styles/variables.scss';
@import '../../assets/styles/element-ui.scss';
.md-data-picker {
  font-size: 12px;
  &.el-date-editor.el-input {
    width: 100%;
  }
  .md-date__icon {
    display: block;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .el-input__prefix {
    left: 100%;
    transform: translate(-22px);
  }
  &.el-input--prefix .el-input__inner {
    padding: 0 10px;
  }
}
@media screen and (min-width: $bigScreenWidth) {
  .md-data-picker {
    font-size: 14px;
    .md-date__icon {
      width: 22px;
      height: 22px;
      margin-top: 9px;
    }
    .el-input__prefix {
      transform: translate(-30px);
    }
    &.el-input--prefix .el-input__inner {
      padding: 0 15px;
    }
  }
}
</style>
