<template>
  <div class="uif-time-picker uif-tp">
    <div class="uif-tp-header">选择时间</div>
    <div class="uif-tp-content" :class="{'second': hasSecond}">
      <time-picker-select title="时" :length="24" :value="hour"
                          @click="handleChangeHour"></time-picker-select>
      <time-picker-select title="分" :length="60" :value="minute"
                          @click="handleChangeMinute"></time-picker-select>
      <time-picker-select v-if="hasSecond" title="秒" :length="60" :value="second"
                          @click="handleChangeSecond"></time-picker-select>
    </div>
  </div>
</template>

<script>
import TimePickerSelect from './time-picker-select'
export default {
  components: {TimePickerSelect},
  props: {
    hour: {
      type: Number,
      default: 0
    },
    minute: {
      type: Number,
      default: 0
    },
    second: {
      type: Number,
      default: 0
    },
    hasSecond: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleChangeHour (value) {
      this.$emit('update:hour', value)
      this.$emit('u-change')
    },
    handleChangeMinute (value) {
      this.$emit('update:minute', value)
      this.$emit('u-change')
    },
    handleChangeSecond (value) {
      this.$emit('update:second', value)
      this.$emit('u-change')
    }
  }
}
</script>
