<template>
  <div class="n-options-date-time">
    <div class="n-calendar-th">{{title}}</div>
    <div ref="scroll" class="n-options-date-time-main n-small-scrollbar">
      <template v-for="i in length">
        <div :key="i" class="n-options-date-time-item" :class="{active: value === i - 1}" @click="onClick(i - 1)">{{getText(i)}}</div>
      </template>
    </div>
  </div>
</template>

<script>
import {prop, getIntersectionEntry, scrollIntoView} from '@uif/next/lib/utils/tools'
export default {
  props: {
    visible: prop.boolean(),
    // 标题
    title: prop.string(),
    // 数量
    length: prop.number(10),
    // 值
    value: prop.number(0)
  },
  watch: {
    visible (visible) {
      visible && this.setActiveVisible()
    }
  },
  methods: {
    onClick (value) {
      this.$emit('click', value)
    },
    getText (n) {
      return ('0' + (n - 1)).substr(-2)
    },
    setActiveVisible () {
      getIntersectionEntry(this.$el.querySelector('.active')).then(entry => {
        if (!entry.isIntersecting) {
          scrollIntoView(entry.target, {behavior: 'instant', block: 'center'})
        }
      })
    }
  }
}
</script>
