other / mew-iview

  <template>
      <div :class="classes">

          <div :class="[prefixCls+ '-list']" v-el:hours>
              <ul @click="handleClickHours">
                  <li :class="getCellCls(item)" v-for="item in hoursList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>

              </ul>
          </div>

          <div :class="[prefixCls+ '-list']" v-el:minutes>
              <ul @click="handleClickMinutes">
                  <li :class="getCellCls(item)" v-for="item in minutesList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>

              </ul>

          </div>

          <div :class="[prefixCls+ '-list']" v-show="showSeconds" v-el:seconds>
              <ul @click="handleClickSeconds">
                  <li :class="getCellCls(item)" v-for="item in secondsList" v-show="!item.hide" :index="$index">{{ item.text < 10 ? '0' + item.text : item.text }}</li>

              </ul>

          </div>
      </div>
  </template>
  <script>

      import Options from '../time-mixins';

      import { deepCopy, scrollTop } from '../../../utils/assist';

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

          mixins: [Options],

          props: {
              hours: {
                  type: Number,
                  default: 0
              },
              minutes: {
                  type: Number,
                  default: 0
              },
              seconds: {
                  type: Number,
                  default: 0
              },
              showSeconds: {
                  type: Boolean,
                  default: true
              }
          },
          data () {
              return {
                  prefixCls: prefixCls
              };
          },
          computed: {
              classes () {
                  return [
                      `${prefixCls}`,
                      {
                          [`${prefixCls}-with-seconds`]: this.showSeconds
                      }
                  ];
              },
              hoursList () {

                  let hours = [];
                  const hour_tmpl = {

                      text: 0,

                      selected: false,
                      disabled: false,
                      hide: false
                  };
  
                  for (let i = 0; i < 24; i++) {
                      const hour = deepCopy(hour_tmpl);
                      hour.text = i;
  
                      if (this.disabledHours && this.disabledHours.indexOf(i) > -1) {
                          hour.disabled = true;
                          if (this.hideDisabledOptions) hour.hide = true;
                      }

                      if (this.hours === i) hour.selected = true;

                      hours.push(hour);
                  }
  
                  return hours;

              },
              minutesList () {

                  let minutes = [];
                  const minute_tmpl = {

                      text: 0,

                      selected: false,
                      disabled: false,
                      hide: false
                  };
  
                  for (let i = 0; i < 60; i++) {
                      const minute = deepCopy(minute_tmpl);
                      minute.text = i;
  
                      if (this.disabledMinutes && this.disabledMinutes.indexOf(i) > -1) {
                          minute.disabled = true;
                          if (this.hideDisabledOptions) minute.hide = true;
                      }

                      if (this.minutes === i) minute.selected = true;

                      minutes.push(minute);
                  }
  
                  return minutes;

              },
              secondsList () {

                  let seconds = [];
                  const second_tmpl = {

                      text: 0,

                      selected: false,
                      disabled: false,
                      hide: false
                  };
  
                  for (let i = 0; i < 60; i++) {
                      const second = deepCopy(second_tmpl);
                      second.text = i;
  
                      if (this.disabledSeconds && this.disabledSeconds.indexOf(i) > -1) {
                          second.disabled = true;
                          if (this.hideDisabledOptions) second.hide = true;
                      }

                      if (this.seconds === i) second.selected = true;

                      seconds.push(second);
                  }
  
                  return seconds;

              }
          },
          methods: {

              getCellCls (cell) {
                  return [
                      `${prefixCls}-cell`,
                      {
                          [`${prefixCls}-cell-selected`]: cell.selected,
                          [`${prefixCls}-cell-disabled`]: cell.disabled
                      }
                  ];

              },
              handleClickHours (event) {
                  this.handleClick('hours', event);
              },
              handleClickMinutes (event) {
                  this.handleClick('minutes', event);
              },
              handleClickSeconds (event) {
                  this.handleClick('seconds', event);
              },
              handleClick (type, event) {
                  const target = event.target;
                  if (target.tagName === 'LI') {
                      const cell = this[`${type}List`][parseInt(event.target.getAttribute('index'))];
                      if (cell.disabled) return;
                      const data = {};
                      data[type] = cell.text;
                      this.$emit('on-change', data);
  
                      const from = this.$els[type].scrollTop;
                      const to = 24 * cell.text;
                      scrollTop(this.$els[type], from, to, 500);
                  }

              }

          }
      };
  </script>