<template>
  <div class="dv-time-control">
    <div ref="controlLeft" class="dv-time-control-left">
      <div class="dv-time-control-left-button" @click.stop="changeIsPlayTime">
        <div class="dv-time-control-left-button-icon-close" v-if="isPlayTime">▐▐</div>
        <div class="dv-time-control-left-button-icon-open" v-else></div>
      </div>
    </div>
    <div class="dv-time-control-hover-bubble-content" :style="{left: styleLeft + 'px'}" v-if="isShowTimeNumber">
      <div class="hover-bubble">
        {{showTimeNumber}}
      </div>
    </div>
    <div class="dv-time-control-current-bubble-content" :style="{left: nowStyleLeft + 'px'}">
      <div class="current-bubble">
        {{nowShowTimeNumber}}
      </div>
    </div>
    <div ref="controlRight" class="dv-time-control-right" @mousemove="showTips($event)" @mouseleave="isShowTimeNumber = false" @click.stop="changeNowPlayTime">
      <ul ref="oneHour" class="dv-time-control-steps">
        <li v-for="(item,index) in totalDay * 24" :key="index" :class="index <= nowPlayTimeNumber ? (index === nowTimeNumber ? 'bg-now' : 'bg-active') : ''"></li>
      </ul>
      <div class="dv-time-control-hours">
        <div class="dv-time-control-hours-day" v-for="(item,index) in totalDay" :key="index">
          <div class="dv-time-control-hours-list">
            <div class="dv-time-control-hour" v-for="(item,index1) in 7" :key="index1">
              {{index1 | numberToHour}}
            </div>
          </div>
        </div>
      </div>
      <ul class="dv-time-control-date">
        <li v-for="(item,index) in date" :key="index">
          {{item.day}}{{item.week | weekToChinese}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import dayjs from 'dayjs';

  export default {
    name: 'DvTimeControl',
    data () {
      return {
        isInitialize: true,
        isPlayTime: false, // 是否自动播放切换时间
        isKeyControl: false,
        totalDay: 7,
        date: [],
        nowTimeNumber: 24, // 当前显示的时间点
        nowPlayTimeNumber: 24,
        isShowTimeNumber: false, // 是否显示hover的事件
        showTimeNumber: '', // hover处的时间值
        nowShowTimeNumber: '', // 当前数据展示的事件值
        styleLeft: 12.35, // hover时的x轴定位
        nowStyleLeft: 41, // 当前展示的时间点的x轴定位
        nowTimeX: 41 // 当前时间点的x轴位置
      };
    },
    props: {
      playInterval: {
        type: Number,
        default: 3500
      },
      preDay: { // 向前显示的时间
        type: Number,
        default: 6
      }
    },
    watch: {
      nowPlayTimeNumber () {
        this.$nextTick(() => {
          let nowTime = this.numberToDate(this.nowPlayTimeNumber, 'YYYY-MM-DD HH:00:00');
          let ulWidth = this.$refs.oneHour.clientWidth;
          let liWidth = ulWidth / 24 / this.totalDay;
          let controlLeftWidth = this.$refs.controlLeft.getBoundingClientRect().width + 1;
          this.nowShowTimeNumber = this.numberToDate(this.nowPlayTimeNumber, 'HH:00');
          this.nowStyleLeft = (this.nowPlayTimeNumber + 1) * liWidth + controlLeftWidth;
          this.$emit('updateTime', nowTime);
          if (this.isInitialize) {
            this.$emit('initializeTime', nowTime);
            this.isInitialize = false;
          }
        });
      }
    },
    filters: {
      // 数值转为3小时的数据
      numberToHour: function (value) {
        return ((value + 1) * 3) >= 10 ? ((value + 1) * 3) : ('0' + (value + 1) * 3);
      },
      // 星期转为中文
      weekToChinese: function (value) {
        switch (value) {
          case 'Monday':
            return '周一';
          case 'Tuesday':
            return '周二';
          case 'Wednesday':
            return '周三';
          case 'Thursday':
            return '周四';
          case 'Friday':
            return '周五';
          case 'Saturday':
            return '周六';
          case 'Sunday':
            return '周日';
          default:
            break;
        }
      }
    },
    mounted () {
      let that = this;
      this.initialize();
      document.addEventListener('keydown', (e) => {
        let key = window.event.keyCode;
        // 时间移动==》
        if (key === 39) {
          that.next();
        }
        // 时间移动《==
        if (key === 37) {
          that.pre();
        }
      });
    },
    methods: {
      initialize () {
        let that = this;
        let today = new Date();
        let curDate = new Date();
        curDate.setHours(0);
        curDate.setMinutes(0);
        curDate.setSeconds(0);
        curDate.setMilliseconds(0);
        that.preDate = new Date(curDate.getTime() - that.preDay * 24 * 60 * 60 * 1000);
        let nowHour = dayjs(today).format('HH');
        that.nowTimeNumber = 24 * that.preDay + Number(nowHour) - 2;
        that.nowPlayTimeNumber = that.nowTimeNumber;
        that.date = [];

        for (let i = 0; i < 7; i++) {
          let date = new Date(that.preDate.getTime() + i * 24 * 60 * 60 * 1000);
          let day = dayjs(date).format('MM/DD');
          let week = dayjs(date).format('dddd');
          let dateObject = {
            day: day,
            week: week
          };
          that.date.push(dateObject);
        }

        let ulWidth = this.$refs.oneHour.clientWidth;
        let liWidth = ulWidth / 24 / this.totalDay;
        this.nowTimeX = liWidth * that.nowTimeNumber;
        this.setIntegralPoint();
      },
      // 设置30分切换事件
      setIntegralPoint () {
        let that = this;
        that.intervalTime = setInterval(function () {
          if (new Date().getMinutes() === 30 && new Date().getSeconds() === 0) {
            clearInterval(that.intervalTime);
            that.initialize();
          }
        }, 1000);
      },
      start () {
        let that = this;
        that.isPlayTime = true;
        that.play();
        that.timer = setInterval(function () {
          that.play();
        }, that.playInterval);
      },
      play() {
        const that = this;
        if (!that.isKeyControl) {
          if (that.nowPlayTimeNumber === that.nowTimeNumber) {
            that.nowPlayTimeNumber = 0;
          }
          else if (that.nowPlayTimeNumber < that.nowTimeNumber && that.isPlayTime) {
            that.nowPlayTimeNumber++;
          }
          else {
            clearInterval(that.timer);
            that.timer = null;
          }
        }

      },
      pause () {
        let that = this;
        clearInterval(that.timer);
        this.isPlayTime = false;
        that.timer = null;
      },
      // 播放|暂停
      changeIsPlayTime () {
        if (this.isPlayTime) {
          this.pause();
        }
        else {
          this.start();
        }
      },
      next () {
        let that = this;
        that.isKeyControl = true;
        if (that.nowPlayTimeNumber === that.nowTimeNumber) {
          that.nowPlayTimeNumber = 0;
        }
        else if (that.nowPlayTimeNumber < that.nowTimeNumber) {
          that.nowPlayTimeNumber++;
        }
        setTimeout(() => {
          that.isKeyControl = false;
        }, 3000);
      },
      pre () {
        let that = this;
        that.isKeyControl = true;
        if (that.nowPlayTimeNumber === 0) {
          that.nowPlayTimeNumber = that.nowTimeNumber;
        }
        else if (that.nowPlayTimeNumber > 0) {
          that.nowPlayTimeNumber--;
        }
        setTimeout(() => {
          that.isKeyControl = false;
        }, 3000);
      },
      // 显示提示
      showTips (event) {
        this.isShowTimeNumber = true;
        let parentX = this.$refs.controlRight.getBoundingClientRect().left;
        let allWidth = this.$refs.controlRight.getBoundingClientRect().width;
        let controlLeftWidth = this.$refs.controlLeft.getBoundingClientRect().width + 1;
        let nowX = event.x - parentX;
        let nowPercent = nowX / allWidth;
        let nowShowTimeNumber = parseInt(nowPercent * 24 * this.totalDay);
        this.showTimeNumber = this.numberToDate(nowShowTimeNumber, 'HH:00');
        this.styleLeft =  event.x - parentX + controlLeftWidth;
      },

      // 切换当前播放的时间
      changeNowPlayTime (e) {
        this.pause();
        let parentX = this.$refs.controlRight.getBoundingClientRect().left;
        let nowX = e.x - parentX;
        let allWidth = this.$refs.controlRight.getBoundingClientRect().width;
        if (nowX > this.nowTimeX) {
          this.nowPlayTimeNumber = this.nowTimeNumber;
        }
        else {
          let nowPercent = nowX / allWidth;
          this.nowPlayTimeNumber = parseInt(nowPercent * 24 * this.totalDay);
        }
      },

      // 数字转换为时间格式
      numberToDate (value, format) {
        let that = this;
        let day = parseInt(value / 24);
        let hour = value - day * 24 + 1;
        let nowDay = hour > 0 ? day + 1 : day;
        let nowDate = new Date(that.preDate.getTime() + (nowDay - 1) * 24 * 60 * 60 * 1000 + hour * 60 * 60 * 1000);
        return dayjs(nowDate).format(format);
      }
    },
    destroyed () {
      clearInterval(this.timer);
      clearInterval(this.intervalTime);
    }
  };
</script>

