<template>
  <div class="uif-tp-select">
    <div class="uif-tp-select-title">{{title}}</div>
    <div class="uif-tp-select-scroll">
      <template v-for="(d, i) in new Array(length)">
        <div class="uif-tp-select-item" :class="{active: value === i}" :key="i"
             @click="handleChoose($event, i)">{{pad2(i)}}</div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    length: {
      type: Number,
      default: 60
    },
    value: {
      type: Number,
      default: 0
    }
  },
  mounted () {
    if (this.value) {
      this.$el.querySelector('.gm-scroll-view').scrollTop = this.value * 24
    }
  },
  methods: {
    handleChoose ({target}, value) {
      this.$emit('click', value)
      target.parentNode.scrollTo({top: target.offsetTop, behavior: 'smooth'})
    },
    pad2 (n) {
      return n < 10 ? '0' + n : n
    }
  }
}
</script>
