<template>
  <div class="circle">
    <div
      v-for="(loop, index) in details"
      class="needle"
      :key="`needle-loop-${index}-${label}`"
      :style="{transform: `translate(60px, 58px) rotate(${selector(loop.loop) - 180}deg)`, background: loop.color}"
     
    ></div>
  </div>
</template>

<script>
import DetailsMixin from "@/mixins/DetailsMixin";
import { mapMutations } from 'vuex';
export default {
  props: ["details", "selector", "label"],
  mixins: [DetailsMixin],
  methods: {
    ...mapMutations(['setPreview'])
  }
};
</script>

<style scoped>
.circle {
  height: 120px;
  width: 120px;
  border-radius: 100px 100px 100px 100px;
  background: #eee;
}

.needle {
  position: absolute;
  height: 4px;
  width: 57px;
  transform-origin: center left;
  border-radius: 5px 5px;
  /* transform: rotate(-90deg); */
  /* transform: translate(50px, 48px) rotate(-180deg); */
}
</style>