<template>
  <div :class="wrapper" class="canvas" v-if="isInit">
    <canvas
      :id="id"
      :style="{height: '10px'}"
      v-if="canvasWidth"
      :width="canvasWidth"
      height="10">
    </canvas>
  </div>
</template>

<script>
  export default {
    props: ['times', 'deviceId'],

    data () {
      return {
        ctx: null,
        canvasWidth: '',
        canvasHeight: '',
        isInit: false,
        wrapper: `canvas-${new Date().getTime()}`,
        id: `timeline-${new Date().getTime()}-${this.deviceId}`,
        timer: null
      }
    },

    watch: {
      times: {
        deep: true,
        handler (v) {
          if (v.length && this.ctx) {
            this.init()
          }
        }
      }
    },

    mounted () {
      this.$nextTick(() => {
        this.init()
      })
    },

    destroyed () {
      clearInterval(this.timer)
    },

    methods: {
      init () {
        if (this.ctx) {
          this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
        }
        this.isInit = false
        this.$nextTick(() => {
          this.isInit = true
          this.$nextTick(() => {
            this.canvasWidth = document.querySelector(`.${this.wrapper}`).offsetWidth
            this.canvasHeight = document.querySelector(`.${this.wrapper}`).offsetHeight

            this.$nextTick(() => {
              const el = document.querySelector(`#${this.id}`)
              this.ctx = el.getContext('2d')
              this.ctx.width  = document.querySelector('.canvas').offsetWidth
              this.ctx.height  = document.querySelector('.canvas').offsetHeight
              this.renderPlayback()
            })
          })
        })
      },

      countdown () {
        this.timer = setInterval(() => {
          if (this.isLiveing) {
            this.initNowTime()
          } else {
            this.x = this.x + this.canvasWidth / (24 * 60 * 60)
          }
        }, 1000)
      },

      initNowTime () {
        const date = new Date()
        const seconds = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()

        this.x = this.canvasWidth / (24 * 60 * 60) * seconds
      },

      drawLine(ctx, options) {
        const { beginX, beginY, endX, endY, lineColor, lineWidth } = options
        ctx.beginPath()
        ctx.lineWidth = lineWidth
        ctx.moveTo(beginX, beginY)
        ctx.lineTo(endX, endY)
        ctx.strokeStyle = lineColor
        ctx.stroke()
      },

      renderPlayback () {
        const ctx = this.ctx
        const unit = this.canvasWidth / (24 * 60 * 60)
        this.times.forEach(item => {
          this.drawLine(ctx, {
            beginX: item.startTime * unit,
            beginY: 28,
            endX: item.startTime * unit,
            endY: 0,
            lineColor: 'rgba(0, 156, 255, 1)',
            lineWidth: item.endTime * unit - item.startTime * unit
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .canvas {
    position: relative;
    width: 100%;
    height: 10px;

    canvas {
      width: 100%;
      height: 10px;
    }
  }
</style>