<template>
  <div 
    class="flop-item" 
    :style="{
     marginRight:spacing + 'px',
     width:width + 'px',
     height:height + 'px',
     fontSize:fontSize + 'px',
     textAlign:'center',
     color:color
    }"
  >
    <div 
     class="flop-number-box" 
     ref="flopContent"
     :style="{
      height:height + 'px',
      lineHeight:height + 'px'
     }"
    >
      <div class="flop-number">0</div>
      <div class="flop-number">1</div>
      <div class="flop-number">2</div>
      <div class="flop-number">3</div>
      <div class="flop-number">4</div>
      <div class="flop-number">5</div>
      <div class="flop-number">6</div>
      <div class="flop-number">7</div>
      <div class="flop-number">8</div>
      <div class="flop-number">9</div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, watch, reactive, toRefs } from "vue";
export default {
  name: "FlopItem",
  props: {
    value: String | Number,
    width: {
      type: String,
      default: "100",
    },
    height: {
      type: String,
      default: "100",
    },
    fontSize: {
      type: String,
      default: "30",
    },
    color: {
      type: String,
      default: "#000",
    },
    spacing: {
      type: String,
      default: "20",
    },
  },
  setup(props, ctx) {
    const setPosition = () => {
      let flopBox = flopContent.value;
      flopBox.style.transform = `translateY(${Number(props.value) * -1 * Number(props.height)}px)`;
    };
    onMounted(() => {
      setPosition();
    });
    watch(
      () => {
        return props.value;
      },
      (val) => {
        let flopBox = flopContent.value;
        flopBox.style.transform = `translateY(${Number(props.value) * -1 * Number(props.height)}px)`;
      }
    );
    let flopContent = ref(null);
    return {
      flopContent,
    };
  },
};
</script>

<style lang="scss" scoped>
.flop-item {
  overflow: hidden;
  .flop-number-box {
    transition: transform 1s linear;
    .flop-number {
        height: 100%;        
    }
  }
}
</style>