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="date.getHours()"
                      :minutes="date.getMinutes()"
                      :seconds="date.getSeconds()"

                      :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 Options from '../../time-mixins';

      import Mixin from '../panel-mixin';
      import Locale from '../../../../mixins/locale';
  
      import { initTimeDate } from '../../util';

      const prefixCls = 'ivu-picker-panel';
      const timePrefixCls = 'ivu-time-picker';
  

      const capitalize = (str) => str[0].toUpperCase() + str.slice(1);
  

      export default {

          name: 'TimePickerPanel',
          mixins: [ Mixin, Locale, Options ],

          components: { TimeSpinner, Confirm },

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

              },
              format: {
                  type: String,
                  default: 'HH:mm:ss'
              },
              value: {
                  type: Array,
                  required: true
              },

          },

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

                  date: this.value[0] || initTimeDate(),

                  showDate: false,

                  confirm: false

              };
          },
          computed: {
              showSeconds () {

                  return !(this.format || '').match(/mm$/);

              },

              visibleDate () { // TODO

                  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 (dates) {
                  let newVal = dates[0] || initTimeDate();

                  newVal = new Date(newVal);

                  this.date = newVal;

              }
          },
          methods: {

              handleChange (date, emit = true) {

  
                  const newDate = new Date(this.date);
                  Object.keys(date).forEach(
                      type => newDate[`set${capitalize(type)}`](date[type])
                  );
  
                  if (emit) this.$emit('on-pick', newDate, true);

              },

          },

          mounted () {

              if (this.$parent && this.$parent.$options.name === 'DatePicker') this.showDate = true;

          }
      };

  </script>