<template>
  <div
    class="ui-date-picker"
    :class="[{'is-adaption': adaption, 'is-viewable': !editable}, 'ui-date-picker--' + size]"
  >
    <template v-if="editable">
      <template v-if="adaption">
        <span class="ui-date-picker__handle">
          <span v-if="!isEmpty" class="ui-date-picker__current">
            <template v-if="isRange">
              <template v-if="displayValue && displayValue.length">
                <span class="ui-date-picker__value-start">{{ displayValue[0] }}</span>
                <span class="ui-date-picker__value-separator">至</span>
                <span class="ui-date-picker__value-start">{{ displayValue[1] }}</span>
              </template>
            </template>
            <template v-else>
              {{ displayValue }}
            </template>
          </span>
          <span v-else class="ui-date-picker__placeholder">
            <template v-if="isRange">
              <span class="ui-date-picker__placeholder-start">{{ startPlaceholder }}</span>
              <span class="ui-date-picker__placeholder-separator">至</span>
              <span class="ui-date-picker__placeholder-start">{{ endPlaceholder }}</span>
            </template>
            <template v-else>
              <span class="ui-date-picker__placeholder-text">{{ placeholder }}</span>
            </template>
          </span>
          <span v-if="!isEmpty && clearable" class="ui-date-picker__clear" @click="handleClearClick" />
          <span v-else class="ui-date-picker__arrow" />
        </span>
      </template>
      <el-date-picker
        ref="control"
        v-model="innerValue"
        class="ui-date-picker__control"
        :class="{'is-border': border}"
        :type="type"
        :size="size"
        :format="format"
        :value-format="valueFormat"
        :editable="!adaption"
        :picker-options="pickerOptions"
        :placeholder="placeholder"
        :start-placeholder="startPlaceholder"
        :end-placeholder="endPlaceholder"
      />
    </template>
    <template v-else>
      <template v-if="isRange">
        {{ rangeText }}
      </template>
      <template v-else>
        {{ innerValue }}
      </template>
    </template>
  </div>
</template>
<script>
import DatePicker from 'element-ui/lib/date-picker'
import 'element-ui/lib/theme-chalk/date-picker.css'
import 'element-ui/lib/theme-chalk/icon.css'

export default {
  name: 'UiDatePicker',
  components: {
    ElDatePicker: DatePicker
  },
  props: {
    value: {
      type: [String, Number, Date, Array],
      default: undefined
    },
    border: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: undefined
    },
    size: {
      type: String,
      default: 'medium'
    },
    format: {
      type: String,
      default: undefined
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd hh:mm'
    },
    placeholder: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    },
    clearable: {
      type: Boolean,
      default: false
    },
    adaption: {
      type: Boolean,
      default: false
    },
    startPlaceholder: {
      type: String,
      default: ''
    },
    endPlaceholder: {
      type: String,
      default: ''
    },
    pickerOptions: {
      type: Object
    }
  },
  data() {
    return {
      displayValue: null
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    isEmpty() {
      if (this.isRange) {
        return !this.value || !this.value.length
      } else {
        return !this.value
      }
    },
    isRange() {
      return ['daterange', 'datetimerange'].includes(this.type)
    },
    rangeText() {
      if (!this.isRange) {
        return
      }
      if (!this.innerValue) {
        return
      }
      const vs = !Array.isArray(this.innerValue) ? [this.innerValue] : this.innerValue
      return vs.join(' 至 ')
    }
  },
  mounted() {
    if (this.adaption) {
      this.$refs.control.$watch('displayValue', (value) => {
        this.displayValue = value
      })
      this.displayValue = this.$refs.control.displayValue
    }
  },
  methods: {
    handleClearClick() {
      this.innerValue = null
    }
  }
}
</script>
<style lang="less">
.ui-date-picker__control{
  &.el-date-editor.el-input,
  &.el-date-editor.el-range-editor{
    width: 100%;
  }
  .el-input__inner{
    font-size: 14px;
  }
  &:not(.is-border) {
    .el-input__inner{
      padding-left: 12px;
      border-color: transparent;
      transition: all .25s;
      background-color: transparent;
    }
    .el-input__prefix{
      display: none;
    }
    &:hover {
      .el-input__inner{
        background-color: #f3f3f3;
      }
    }
  }
  &.el-range-editor&:not(.is-border) {
    padding-left: 12px;
    border-color: transparent;
    transition: all .25s;
    .el-range__icon{
      display: none;
    }
    .el-range-input{
      background-color: transparent;
    }
    &:hover {
      background-color: #f3f3f3;
    }
  }
}
.ui-date-picker{
  font-size: 14px;
  &.is-adaption{
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    .el-date-editor,
    .el-range-input{
      cursor: pointer;
    }
    &.ui-date-picker--medium{
      .ui-date-picker__handle{
        height: 40px;
        line-height: 40px;
      }
    }
    &.ui-date-picker--small{
      .ui-date-picker__handle{
        height: 32px;
        line-height: 32px;
      }
    }
    &.ui-date-picker--mini{
      .ui-date-picker__handle{
        height: 28px;
        line-height: 28px;
      }
    }
    .ui-date-picker__handle{
      display: block;
      padding-right: 18px;
      position: relative;
    }
    .ui-date-picker__arrow{
      position: absolute;
      top: 50%;
      right: 4px;
      transform: translateY(-50%);
      border: 4px solid #999;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom: 0;
    }
    .ui-date-picker__control{
      position: absolute;
      left: 0;
      top: 0;
      z-index: 3;
      opacity: 0;
    }
    .ui-date-picker__value-separator,
    .ui-date-picker__placeholder-separator{
      color: #999;
      margin: 0 6px;
    }
    .el-input__suffix{
      display: none;
    }
    .ui-date-picker__clear{
      display: inline-block;
      position: absolute;
      width: 14px;
      height: 14px;
      background-color: #ccc;
      border-radius: 50%;
      top: 50%;
      right: 0;
      margin-top: -7px;
      transform: rotate(45deg);
      z-index: 10;
      cursor: pointer;
      &:after,&:before{
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
      }
      &:after {
        width: 9px;
        height: 1px;
      }
      &:before {
        width: 1px;
        height: 9px;
      }
      &:hover {
        background-color: #999;
      }
    }
  }
}
&.ui-date-picker{
  &.is-viewable {
    &.ui-date-picker--medium {
      line-height: 22px;
      padding: 9px 0;
    }
    &.ui-date-picker--small {
      line-height: 22px;
      padding: 5px 0;
    }
    &.ui-date-picker--mini {
      line-height: 22px;
      padding: 3px 0;
    }
  }
}
</style>
