<template>
  <el-popper :visible="isShow" :visibleArrow="false" placement="bottom-left" class="fbg-time" @click.native="handleClickBox" @popupClick="handleClickBox">
    <fbg-input :value="text" readonly @click="hanldeClick"  icon="time" />
    <div slot="popup" :class="{'fbg-time-box': true}">
      <div class="fbg-time-box-item">
        <div class="fbg-time-box-item-main" ref="hour" @scroll="handleScroll($event, 'hour')">
          <ul class="fbg-time-list">
            <li v-for="(item, index) in hours" :key="index" class="fbg-time-list-item" @click="handleClickItem(index, 'hour')">{{item}}</li>
          </ul>
        </div>
      </div>
      <div class="fbg-time-box-item">
        <div class="fbg-time-box-item-main" ref="minute" @scroll="handleScroll($event, 'minute')">
          <ul class="fbg-time-list">
            <li v-for="(item, index) in minutes" :key="index" class="fbg-time-list-item"  @click="handleClickItem(index, 'minute')">{{item}}</li>
          </ul>
        </div>
      </div>
      <div class="fbg-time-box-item">
        <div class="fbg-time-box-item-main" ref="second" @scroll="handleScroll($event, 'second')">
          <ul class="fbg-time-list">
            <li v-for="(item, index) in seconds" :key="index" class="fbg-time-list-item"  @click="handleClickItem(index, 'second')">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
  </el-popper>
</template>
<style scoped>

</style>
<script>
import Input from '../input';
import Popper from '../popper/index.vue';
export default {
  props: {
    value: {
      type: [String, Object], 
      default: '00:00:00'
    }
  },
  components: {
    'fbg-input': Input,
    'el-popper': Popper,
  },
  data() {
    const hours = this.createTimeList(24);
    const minutes = this.createTimeList(60);
    const seconds = this.createTimeList(60);
    return {
      hours,
      minutes,
      seconds,
      lineHeight: 30,
      isShow: false,
      text: '',
      time: {
        hour: 0,
        minute: 0,
        second: 0
      },
      timer: {
        hour: null,
        minute: null,
        second: null
      }
    }
  },
  watch: {
    time: {
      immediate: true,
      deep: true,
      handler(data) {
        this.text = this.createdText(data);
        this.$emit('input', this.inputValue()); 
      }
    },
    value: {
      immediate: true,
      handler(value) {
        try {
          if (typeof value === 'string') {
            value = this.analysisTime(value);
          }
          this.time = value;
          this.jumpTimeItem(value.hour, 'hour');
          this.jumpTimeItem(value.minute, 'minute');
          this.jumpTimeItem(value.second, 'second');
        } catch(e) {
          console.error('timePicker组件value参数错误！');
        }
      }
    }
  },
  mounted() {
    document.addEventListener('click', ()=>{
      if (!this.openStatus) {
        this.isShow = false;
      }
      this.openStatus = false;
    });
  },
  methods: {
    analysisTime(text) {
      const time = text.split(':');
      return {
        hour: time[0] || 0,
        minute: time[1] || 0,
        second: time[2] || 0
      }
    },
    createTimeList(time) {
      const arr = [];
      for (let i = 0; i < time; i++) {
        arr.push(this.zeroize(i));
      }
      return arr;
    },
    handleClickBox() {
      this.openStatus = true;
      this.$emit('onClick');
    },
    handleClickItem(index, type) {
      this.jumpTimeItem(index, type);
    },
    jumpTimeItem(index, type) {
      this.$nextTick(() => {
        this.$refs[type].scrollTop = index * this.lineHeight;
      });
    },
    createdText(data) {
      const arr = [this.zeroize(data.hour), this.zeroize(data.minute), this.zeroize(data.second)];
      return arr.join(' : '); 
    },
    hanldeClick() {
      this.isShow = !this.isShow;
    },
    zeroize(value) {
      if (typeof value !== 'number' && typeof value !== 'string') {
        return '00';
      }
      if (value.toString().length <= 1) {
          return '0' + value;
      }
      return value;
    },
    inputValue() {
      if (typeof this.value === 'object') {
        return this.time;
      } else if (typeof this.value === 'string') {
        return this.createdText(this.time);
      } else {
        throw new Error('timePicker组件value参数类型错误！');
      }
    },
    handleScroll(e, type) {
      if (this.timer[type]) {
        return false;
      }
      const el = e.target;
      this.timer[type] = setTimeout(() => {
        let num = Math.floor(el.scrollTop / this.lineHeight);
        let value = num;
        if (el.scrollTop % this.lineHeight > this.lineHeight / 2) {
          value = num + 1;
          el.scrollTop = value * this.lineHeight;
        } else {
          el.scrollTop = num * this.lineHeight;
        }
        clearTimeout(this.timer[type]);
        this.timer[type] = '';
        this.time[type] = value;
        this.$emit('change', this.inputValue(), this.time); 
      }, 200);
    }
  }
}
</script>
<style lang="scss" scoped>
.fbg {
  &-time {
    width: 150px;
    position: relative;
    &-box {
      position: relative;
      width: 100%;
      top: 100%;
      left: 0px;
      transition: all 0.4s;
      box-shadow: 0px 0px 5px $themeShadowColor;
      background-color: #fff;
      height: 150px;
      display: flex;
      overflow: hidden;
      &-item {
        position: relative;
        flex: 1;
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        border-right: 1px solid #ddd;
        text-align: center;
        box-sizing: border-box;
        max-height: inherit;
        &::before {
          content: '';
          width: 100%;
          position: absolute;
          top: 0px;
          height: 30px;
          left: 0px;
          background-color: #f5f5f5;
        }
        &-main {
          height: 100%;
          overflow: auto;
          max-height: inherit;
          scrollbar-width: none;
          -ms-overflow-style: none;
          &::-webkit-scrollbar {
            display: none;
          }
        }
      }
      &-item:last-child {
        border: 0px;
      }
    }
    &-box.open {
      max-height: 150px;
      visibility: visible;
    }
    &-box.hide {
      max-height: 0px;
      visibility: hidden;
    }
    &-list {
      &-item {
        position: relative;
        z-index: 99999;
        line-height: 30px;
      }
      padding-bottom:120px;
    }
  }
}
</style>