chenhaodong / mew-iview

  <template>

      <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"

                      :disabled-hours="disabledHours"
                      :disabled-minutes="disabledMinutes"
                      :disabled-seconds="disabledSeconds"
                      :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';
  

      const prefixCls = 'ivu-picker-panel';
      const timePrefixCls = 'ivu-time-picker';
  
      export default {

          name: 'TimePicker',

          mixins: [ Mixin, Locale ],

          components: { TimeSpinner, Confirm },

          props: {
              steps: {
                  type: Array,
                  default: () => []
              }
          },

          data () {
              return {
                  prefixCls: prefixCls,
                  timePrefixCls: timePrefixCls,

                  date: initTimeDate(),
                  value: '',

                  showDate: false,

                  format: 'HH:mm:ss',

                  hours: '',
                  minutes: '',
                  seconds: '',

                  disabledHours: [],
                  disabledMinutes: [],
                  disabledSeconds: [],

                  hideDisabledOptions: false,
                  confirm: false

              };
          },
          computed: {
              showSeconds () {
                  return (this.format || '').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 = true;

          }
      };

  </script>