<template>
  <a-time-picker
    :style="`width:${record.options.width}`"
    :disabled="record.options.disabled || record.options.readOnly"
    :allowClear="record.options.clearable"
    :format="record.options.format"
    @change="handleSelectChange"
    :value="time"
  />
</template>
<script>
  import moment from "moment";

  export default {
    name: 'k-time-picker',
    // eslint-disable-next-line vue/require-prop-types
    props: ["record", "value"],
    computed: {
      time() {
        if (!this.value) {
          return undefined;
        } else {
          return moment(this.value, "HH:mm:ss");
        }
      }
    },
    methods: {
      handleSelectChange(time, timeString) {
        let saveData;
        if (!time) {
          saveData = "";
        } else {
          saveData = moment(timeString, this.record.options.format).format("HH:mm:ss");
        }
        this.$emit("change", saveData);
        this.$emit("input", saveData);
      }
    }
  };
</script>
