<template>
  <div class="FlipClock">
    <Flipper v-for="(item,index) in currentData" :key="index" :ref="'flip'+index"/>
  </div>
</template>

<script>
import Flipper from './Flipper.vue'

export default {
  name: 'FlipClock',
  props: ['flopData', 'oldFlopData'],
  data() {
    return {
      timer: null,
      flipObjs: [],
      data: this.flopData,
      oldData: this.oldFlopData,
      currentData: this.oldFlopData
    }
  },
  components: {
    Flipper
  },
  watch: {
    flopData(v) {
      this.data = v;
      this.currentData = v;
      this.$nextTick(() => {
        this.setFlipObjs();
        this.initFlip();
      })
    },
    oldFlopData(v) {
      this.oldData = v;
      this.currentData = v;
      this.$nextTick(() => {
        this.setFlipObjs();
        this.initFlip();
      })
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {


  },
  mounted() {
    // this.$nextTick(() => {
    //   this.setFlipObjs();
    //   this.init();
    //   //this.run();
    // })
  }
}
</script>

<style>
.FlipClock {
  text-align: left;
}

.FlipClock .M-Flipper {
  margin: 0 3px;
}

.FlipClock em {
  display: inline-block;
  line-height: 102px;
  font-size: 66px;
  font-style: normal;
  vertical-align: top;
}
</style>
