<template>
  <el-select
    v-model="showValue"
    :placeholder="placeholder"
    @change="onChange"
    :style="{width: width}"
    :clearable="clearable"
  >
    <el-option v-for="num of (end - start + 1)" :value="end - num + 1" :key="num" :label="(end - num + 1).toString() + suffix"></el-option>
  </el-select>
</template>

<script>
// 年份选择器
export default {
  name: 'rangePicker',
  props: {
    clearable: {
      type: Boolean,
      default: false,
    },
    // 双向绑定值
    value: {
      type: Number,
      default: null,
    },
    // 可选值（起始）
    start: {
      type: Number,
      default: 2020,
    },
    // 可选值（结束）
    end: {
      type: Number,
      default: 2024
    },
    placeholder: {
      type: String,
      default: '点击选择年份',
    },
    // 后缀
    suffix: {
      type: String,
      default: '年',
    },
    width: {
      type: String,
      default: '150px'
    }
  },
  computed: {
    showValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    onChange(val) {
      this.$emit('change', val);
    }
  }
}
</script>
