<template>
  <div class="progress-circle">
    <svg>
      <circle class="back" r="49" cx="55" cy="55"></circle>
      <circle
        class="front"
        r="49"
        cx="55"
        cy="55"
        :style="strokeStyle"
      ></circle>
    </svg>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";

export default defineComponent({
  props: {
    loan: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const strokeStyle = computed((): any => {
      const percent =
        100 - (props.loan.currentDue.amount / props.loan.amount.amount) * 100;

      return {
        "stroke-dashoffset": -(307 / 100) * percent,
      };
    });

    return {
      strokeStyle,
    };
  },
});
</script>

<style lang="scss">
.progress-circle {
  border-radius: 50%;
  position: relative;
  width: 110px;
  height: 110px;
  margin-bottom: 16px;

  svg {
    width: 110px;
    height: 110px;
    transform: rotate(90deg) scaleX(-1);

    circle {
      fill: transparent;
      stroke: var(--blue-20);
      stroke-width: 11px;

      &.front {
        stroke: var(--blue);
        stroke-dasharray: 307;
        stroke-dashoffset: 307;
        stroke-linecap: round;
      }
    }
  }

  @include screen-sm() {
    margin-bottom: 0;
    margin-right: 16px;
  }

  @include screen-lg() {
    margin-right: 24px;
  }
}
</style>
