<template>
  <div class="thin pinkShadow md:h-[21.094vw] rounded-[2.564vw] md:rounded-[0.781vw] bg-white">
    <div class="relative text-center h-[56.154vw] md:h-[11.406vw]">
          <p
          class="text-black post w-[30.769vw] md:w-[6.979vw] h-[9.487vw] md:h-[2.24vw] flexBox text-[3.59vw] md:text-[0.938vw] absolute  left-0 bottom-0 bg-white  rounded-tr-[3.59vw] md:rounded-tr-[0.781vw]">
 
         {{ props?.item?.item.price > 0 ? numberFormat(props?.item?.item.price) + 'تومان' : 'رایگان' }}
     
          </p>
          <NuxtImg style="object-fit: cover;" :src="props?.item?.item.image"
            :placeholder="[30, 20]"
            alt="laravel"
            class="h-[56.154vw] md:h-[11.406vw] w-full rounded-[3.846vw] md:rounded-[0.781vw]"
          />
        </div>

        <div
          class="w-full flex flex-col justify-center space-y-[1.042vw] md:space-y-[1.25vw]"
        >
        <p @click="change"
            class="cursor-pointer mb-[15vw] md:mb-[2.5vw] text-[14px] md:text-[0.833vw] text-[#383E43] ] mt-[4vw] md:mt-[1.042vw] ms-[3vw] md:ms-[0.625vw]"
          >
        {{ props?.item?.item.name }}
     </p>

          <div
            class="flex flex-col justify-between items-center py-[3vw] md:py-[0.7vw] mx-[3vw] md:mx-[0.833vw] border-t"
          >
            <div class="flex justify-between w-full mb-[0.417vw]">
              <p class="text-[2.836vw] md:text-[0.658vw] text-[#383E43]">میزان مشاهده</p>
              <p class="text-[3.19vw] md:text-[0.741vw] text-[#383E43]">{{ Math.floor(props?.item?.completionPercentage) }} %</p>
            </div>
            <div
            id="progressbar"
            class="mt-[3vw] md:mt-[0vw] h-[2.051vw] md:h-[0.26vw] rounded-[2vw] md:rounded-[0.521vw]"
          >
            <div
                   :style="{ width: activeClass + '%' }"
              class="rounded-[2vw] md:rounded-[0.521vw] h-[2.051vw] md:h-[0.26vw]"
            ></div>
            </div>
          </div>
        </div>
      </div>
</template>
<script setup>

const props = defineProps(['item']);

const activeClass = ref(props?.item?.completionPercentage);
const router = useRouter()
const route = useRoute()
const change = () =>{
  router.replace(`/${props.item.item.id}`)
}
</script>

<style scoped>
.post::before {
    content: "";
    position: absolute;
    top: -8.1vw;
    left: 0vw;
    width: 3vw;
    height: 8.1vw;
    border-bottom-left-radius: 0.781vw;
    box-shadow: -0.03vw 0.8vw 0 -0.026vw rgb(255, 255, 255);
}
.post::after {
    content: "";
    position: absolute;
    top: 0.16vw;
    left: 100%;
    width: 3.083vw;
    height: 2.083vw;
    border-bottom-left-radius: 0.781vw;
    box-shadow: -0.26vw 1.042vw 0 0.026vw rgb(255, 255, 255);
}
#progressbar {
  background-color: #e5e5e5;

  width: 100%;
}
#progressbar > div {
  background-color: #0d3f40;
  float: left;

  left: 0;
}


@media (max-width: 768px) {
    .post::before {
        content: "";
        position: absolute;
        top: -8.1vw;
        left: 0vw;
        width: 3vw;
        height: 8.1vw;
        border-bottom-left-radius: 3.59vw;
        box-shadow: -0.03vw 2.8vw 0 -0.026vw rgb(255, 255, 255) ;
    }
    .post::after {
        content: "";
        position: absolute;
        top: 3.4vw;
        left: 100%;
        width: 5.083vw;
        height: 6.083vw;
        border-bottom-left-radius: 3.59vw;
        box-shadow: -1vw 2vw 0 0.026vw rgb(255, 255, 255) ;
    }

}
</style>