<template>
  <div class="full-width">
    <div class="mark">
      <xl-time-mark v-model="colorConfig" />
    </div>
    <div style="margin-top: 15px">
      <xl-button type="primary" @click="changeData">变更数据</xl-button>
      <xl-button type="primary" @click="revertData">还原数据</xl-button>
      <xl-button type="primary" @click="doLoop">性能测试</xl-button>
    </div>
  </div>
</template>

<script>
import { XlTimeMark } from '../../../lib/index'
export default {
  components: {
    XlTimeMark
  },
  data() {
    return {
      timer: null,
      colorConfig: [],
      initColorConfig: [{
        color: '#FFC107',
        label: '平',
        timeRange: ['00:00-23:59']
      }, {
        color: '#f54c17',
        checked: true,
        label: '峰'
      }, {
        color: '#4caf50',
        label: '谷'
      }, {
        color: '#2196f3',
        label: '尖'
      }],
      changedColorConfig: [{
        color: '#FFC107',
        label: '平',
        timeRange: ['03:30-06:29', '07:30-07:59']
      }, {
        color: '#f54c17',
        label: '峰',
        timeRange: ['00:00-03:29', '08:00-11:29']
      }, {
        color: '#4caf50',
        label: '谷',
        timeRange: ['11:30-23:59']
      }, {
        color: '#2196f3',
        label: '尖',
        timeRange: ['06:30-07:29']
      }]
    }
  },
  created() {
    this.colorConfig = this.initColorConfig
  },
  beforeDestroy() {
    this.checkAndClear()
  },
  methods: {
    checkAndClear() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    changeData() {
      this.checkAndClear()
      this.doChangeData()
    },
    revertData() {
      this.checkAndClear()
      this.doRevertData()
    },
    doChangeData() {
      this.colorConfig = this.changedColorConfig
    },
    doRevertData() {
      this.colorConfig = this.initColorConfig
    },
    testRender: function * () {
      while (true) {
        this.doChangeData()
        yield
        this.doRevertData()
        yield
      }
    },
    doLoop() {
      this.checkAndClear()
      const renderLoop = this.testRender()
      this.timer = setInterval(() => {
        renderLoop.next()
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
.full-width {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .mark {
    width: 963px;
  }
}
</style>
