<template>
  <view class="timePicker-container" @click="datetimePickerShow">
    <input class="timePicker-input" type="text" v-model="viewValue" readonly />
    <u-datetime-picker
      :show="timePickerShow"
      v-model="currentTime"
      mode="time"
      @confirm="datetimePickerConfirm"
      @cancel="datetimePickerClose"
      @close="datetimePickerClose"
    />
  </view>
</template>

<script>
import { formatTime } from '@/utils/formatUtils'
export default {
  data () {
    return {
      timePickerShow: false,
      currentTime: formatTime(new Date(), 'hh:mm'),
      viewValue: formatTime(new Date(), 'hh:mm'),
    }
  },
  methods: {
    datetimePickerShow () {
      this.timePickerShow = true
    },
    datetimePickerClose () {
      this.timePickerShow = false
    },
    datetimePickerConfirm (result) {
      const { value } = result

      this.datetimePickerClose()
    }
  },
}
</script>

<style lang="scss" scoped>
.timePicker-container {
  position: relative;

  .timePicker-input {
    width: 100%;
    height: 35px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0 40px 0 12px;
    font-size: 14px;
    color: #333;

    &::placeholder {
      color: #999;
    }
  }
}
</style>