<template>
  <div class="flop-wrapper">
      <flop-item
       v-for="(item,index) of types"
       :key="item + index"
       :value="numbers[index]"
       v-bind="$attrs"
      />
  </div>
</template>

<script>
import {onMounted, reactive, toRefs, watch} from 'vue'
import FlopItem from './FlopItem'
 export default {
  name: "Flop",
  props:{
   type:String,
   value:Number
  },
  components:{
   FlopItem
  },
  setup(props,ctx){
    const state = reactive({
        numbers:props.value.toString().split(""),
        types:props.type.split("")
    })
    const getNumber = ()=>{
        let num = state.types.length - state.numbers.length
        while(num--){
            state.numbers.unshift(0)
        }
    }
    getNumber()
    watch(()=>{
     return props.value
    },(val)=>{
    state.numbers = val.toString().split("")
    getNumber()
    })
    return {
       ...toRefs(state)
    }
  }
};
</script>

<style lang="scss" scoped>
.flop-wrapper{
    display: flex;
}

</style>