<template>
    <div class="seller-score">
        <h2>{{ $t('yourePerformanceScore') }}</h2>
        <ul>
            <li v-for="(item, i) in items" :key="i">
                <small>{{ item.title }}</small>
                <span>{{ item.percent }}%</span>
                <svg viewBox="0 0 250 250" :style="{'--percent': item.percent }">
                    <circle v-for="j in 2" :key="j" />
                </svg>
            </li>
        </ul>
    </div>
</template>

<script setup>
const { shop } = inject('data')
const items = reactive([
    { title: 'رضایت مشتریان', percent: shop.rate * 10 },
    { title: 'تاخیر در ارسال', percent: shop.warn * 10 },
    { title: 'بازگشت کالا', percent: shop.returnedScore },
    { title: 'لغو سفارش', percent: shop.canceledScore },
])
</script>

<style lang="scss">
.seller-score {
    @apply w-full md:w-[21.4rem] h-[10.1rem] lg:w-[18.3rem] lg:h-[21.9rem] flex flex-col pt-[1.1rem] gap-[1.1rem] lg:pt-5 lg:gap-5 rounded-[0.6rem] border-2 border-neutral-200;

    h2 {
        @apply text-[#333333] text-sm lg:text-lg font-medium font-vazir pr-[1.1rem] lg:pr-5;
    }

    ul {
        @apply w-full flex flex-wrap gap-2.5 lg:gap-x-[1.9rem] lg:gap-y-5 pt-[1.1rem] lg:pt-5 justify-center border-t border-[#E5E5E5];

        li {
            @apply w-[4.3rem] h-[4.3rem] lg:w-[6.9rem] lg:h-[6.9rem] relative flex flex-col items-center justify-center gap-2 rounded-full;

            small {
                @apply text-[#333333] text-[0.4em] lg:text-[0.6em] font-bold font-vazir mt-1;
            }

            span {
                @apply text-[#333333] text-xs lg:text-base font-medium font-vazir;
            }

            svg {
                @apply absolute inset-0;

                --stroke-width: 5px;

                @screen lg {
                    --stroke-width: 12px;
                }

                --radius: calc((250px - var(--stroke-width)) / 2);

                circle {
                    cx: 125px;
                    cy: 125px;
                    r: var(--radius);
                    stroke-width: var(--stroke-width);
                    fill: none;
                    stroke-linecap: round;
                }

                circle:first-child {
                    stroke: #D9D9D9;
                }

                circle:last-child {
                    transition: stroke-dasharray 0.3s linear 0s;
                    stroke: #47B556;
                    transform-origin: 125px 125px;
                    --circumference: calc(var(--radius) * 3.14 * 2);
                    --dash: calc((var(--percent) * var(--circumference)) / 100);
                    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
                }
            }






        }
    }

}
</style>