<template>
  <div :class="classes" @mousedown.prevent>
    <div :class="[timePanelPrefix + '-body']">
      <div :class="[timePanelPrefix + '-content']">
        <div :class="[timePanelPrefix + '-header']" v-if="showDate">{{ visibleDate }}</div>
        <time-spinner
          ref="timeSpinner"
          :steps="steps"
          type="start"
          :show-seconds="showSeconds"
          :date="date"
          :hours="hours"
          :minutes="minutes"
          :seconds="seconds"
          :hide-disabled-options="hideDisabledOptions"
          :disabledHours="disabledHours"
          :disabledMinutes="disabledMinutes"
          :disabledSeconds="disabledSeconds"
          @on-change="handleChange"
          @on-pick-click="handlePickClick"
        ></time-spinner>
      </div>
      <Confirm v-if="confirm" @on-pick-clear="handlePickClear" @on-pick-success="handlePickSuccess"></Confirm>
    </div>
  </div>
  <!-- <div :class="[prefixCls + '-body-wrapper']" @mousedown.prevent>
        <div :class="[prefixCls + '-body']">
            <div :class="[timePrefixCls + '-header']" v-if="showDate">{{ visibleDate }}</div>
            <div :class="[prefixCls + '-content']">
                <time-spinner
                    ref="timeSpinner"
                    :show-seconds="showSeconds"
                    :steps="steps"
                    :hours="hours"
                    :minutes="minutes"
                    :seconds="seconds"
                    :hide-disabled-options="hideDisabledOptions"
                    @on-change="handleChange"
                    @on-pick-click="handlePickClick"></time-spinner>
            </div>
            <Confirm
                v-if="confirm"
                @on-pick-clear="handlePickClear"
                @on-pick-success="handlePickSuccess"></Confirm>
        </div>
  </div>-->
</template>
<script>
import TimeSpinner from "../base/time-spinner.vue";
import Confirm from "../base/confirm.vue";

import Mixin from "./mixin";
import Locale from "../../../mixins/locale";

import { initTimeDate } from "../util";

import { prefix } from "../../var";
const timePrefix = prefix + "time";
const timePanelPrefix = prefix + "time-panel";

export default {
  name: "TimePicker",
  mixins: [Mixin, Locale],
  components: { TimeSpinner, Confirm },
  props: {
    date: {},
    format: {},
    steps: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      timePanelPrefix: timePanelPrefix,
      timePrefix: timePrefix,
      // date: initTimeDate(),
      value: "",
      showDate: false,
      currentFormat: this.format ? this.format : "HH:mm:ss",
      hours: "",
      minutes: "",
      seconds: "",
      disabledHours: [],
      disabledMinutes: [],
      disabledSeconds: [],
      hideDisabledOptions: false,
      confirm: false
    };
  },
  computed: {
    classes() {
      return [
        `${timePanelPrefix}-body-wrapper`,
        `${timePrefix}-with-range`,
        {
          [`${timePrefix}-with-seconds`]: this.showSeconds
        }
      ];
    },
    showSeconds() {
      return (this.currentFormat || "").indexOf("ss") !== -1;
    },
    visibleDate() {
      const date = this.date;
      const month = date.getMonth() + 1;
      const tYear = this.t("i.datepicker.year");
      const tMonth = this.t(`i.datepicker.month${month}`);
      return `${date.getFullYear()}${tYear} ${tMonth}`;
    }
  },
  watch: {
    value(newVal) {
      if (!newVal) return;
      newVal = new Date(newVal);
      if (!isNaN(newVal)) {
        this.date = newVal;
        this.handleChange(
          {
            hours: newVal.getHours(),
            minutes: newVal.getMinutes(),
            seconds: newVal.getSeconds()
          },
          false
        );
      }
    }
  },
  methods: {
    handleClear() {
      this.date = initTimeDate();
      this.hours = "";
      this.minutes = "";
      this.seconds = "";
    },
    handleChange(date, emit = true) {
      if (date.hours !== undefined) {
        this.date.setHours(date.hours);
        this.hours = this.date.getHours();
      }
      if (date.minutes !== undefined) {
        this.date.setMinutes(date.minutes);
        this.minutes = this.date.getMinutes();
      }
      if (date.seconds !== undefined) {
        this.date.setSeconds(date.seconds);
        this.seconds = this.date.getSeconds();
      }
      if (emit) this.$emit("on-pick", this.date, true);
    },
    updateScroll() {
      this.$refs.timeSpinner.updateScroll();
    }
  },
  mounted() {
    if (this.$parent && this.$parent.$options.name === "DatePicker")
      this.showDate = false;
  }
};
</script>
