<template>
  <div :class="['year-range-picker', { 'is-focus': isFocus }]">
    <el-date-picker
      ref="start"
      v-model="value[0]"
      type="year"
      :size="size"
      format="yyyy"
      value-format="yyyy"
      :placeholder="startPlaceholder"
      :editable="false"
      :clearable="false"
      @focus="focusHandler"
      @blur="blurHandler"
      @change="
        val => {
          dateChangeHandler(val, 0)
        }
      "
    />
    <span class="range-separator">{{ rangeSeparator }}</span>
    <el-date-picker
      ref="end"
      v-model="value[1]"
      type="year"
      :size="size"
      :format="format"
      :value-format="valueFormat"
      :placeholder="endPlaceholder"
      :editable="false"
      @focus="focusHandler"
      @blur="blurHandler"
      @change="
        val => {
          dateChangeHandler(val, 1)
        }
      "
    />
  </div>
</template>

<script>
export default {
  name: 'YearRangePicker',
  props: {
    value: {
      type: Array,
      required: true,
    },
    size: {
      type: String,
      default: 'small',
    },
    format: {
      type: String,
      default: 'yyyy',
    },
    valueFormat: {
      type: String,
      default: 'yyyy',
    },
    startPlaceholder: {
      type: String,
      default: '开始年份',
    },
    endPlaceholder: {
      type: String,
      default: '结束年份',
    },
    rangeSeparator: {
      type: String,
      default: '-',
    },
  },
  data() {
    return {
      current: '',
      temp: ['', ''],
      selectCount: 0,
      focusCount: 0,
      blurCount: 0,
    }
  },
  computed: {
    canceled() {
      return this.selectCount !== this.blurCount
    },
    isFocus() {
      return this.focusCount !== this.blurCount
    },
  },
  methods: {
    focusHandler() {
      this.focusCount++
      if (this.value[0] && this.value[1]) {
        this.temp[0] = this.value[0]
        this.temp[1] = this.value[1]
      }
      this.$emit('input', ['', ''])
    },
    blurHandler() {
      this.blurCount++
      if (this.canceled) {
        if (this.temp[0] && this.temp[1]) {
          this.$emit('input', [this.temp[0], this.temp[1]])
        }
        this.init()
      }
    },
    dateChangeHandler(val, index) {
      if (!val) {
        this.$emit('input', ['', ''])
        return
      }

      this.selectCount++

      if (!this.current) {
        this.current = val
        this.focus(index)
      } else {
        if (Number(val) <= Number(this.current)) {
          this.$emit('input', [val, this.current])
        } else {
          this.$emit('input', [this.current, val])
        }
        this.init()
      }
    },
    focus(index) {
      const refMap = ['start', 'end']
      this.$refs[refMap[index]].focus()
    },
    init() {
      this.current = ''
      this.temp[0] = this.temp[1] = ''
      this.selectCount = this.focusCount = this.blurCount = 0
    },
  },
}
</script>

<style lang="scss" scoped>
.year-range-picker {
  display: flex;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #fff;
  &:hover {
    border-color: #c0c4cc;
  }
  &.is-focus {
    border-color: #409eff;
  }
  .range-separator {
    width: 30px;
    text-align: center;
    font-size: 13px;
    font-family: Helvetica, Microsoft YaHei;
  }
  ::v-deep .el-date-editor {
    width: calc((100% - 30px) / 2);
    .el-input__prefix {
      color: #303133;
      font-size: 14px;
    }
    &:last-of-type .el-input__prefix {
      display: none;
    }
    .el-input__inner {
      border: none;
      padding: 0;
      background-color: transparent;
      text-align: center;
    }
    &.el-input--large .el-input__inner {
      height: 38px;
    }
    &.el-input--small .el-input__inner {
      height: 30px;
    }
    &.el-input--mini .el-input__inner {
      height: 26px;
    }
    &:first-of-type .el-input__inner {
      padding-left: 33px;
    }
    &:last-of-type .el-input__inner {
      padding-right: 33px;
    }
  }
}
</style>
