<template>
  <div class="sk-time-line">
    <el-slider
      :model-value="modelValue"
      vertical
      :marks="marks"
      :show-tooltip="false"
      height="100%"
      :min="min"
      :max="max"
      v-bind="$attrs"
      @update:model-value="$emit('update:model-value', $event)"
      @input="thisValue = $event;$emit('input', $event)"
    />
  </div>
</template>

<script>
import { computed, defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'SkTimeLine',
  props: {
    modelValue: {
      type: Number,
      default: 1990,
    },
    min: {
      type: Number,
      default: 1990,
    },
    max: {
      type: Number,
      default: 2020,
    },
    color: {
      type: String,
      default: '#FFFFFF80',
    },
    selectColor: {
      type: String,
      default: '#25FFFF',
    },
    format: {
      type: String,
      default: '年',
    },
  },
  setup (props) {
    const thisValue = ref(props.modelValue)
    const marks = computed(() => {
      const data = {}
      for (let i = props.min; i <= props.max; i += 2) {
        data[i] = {
          style: {
            color: props.color,
          },
          label: i + props.format,
        }
      }
      data[thisValue.value] = {
        style: {
          color: props.selectColor,
        },
        label: thisValue.value + props.format,
      }
      return data
    })
    return {
      marks,
      thisValue,
    }
  },
})
</script>

<style>

</style>
