<template>
  <div class="flex flex-col">
    <ul class="flex items-center justify-between px-[30rpx] py-[20rpx] overflow-x-auto gap-[54rpx] min-h-[200rpx]">
      <li class="flex flex-col items-center min-w-max" v-for="(item, index) in lessonCategory" :key="index" @click="activeMenu = item.id">
        <img
          :src="item.icon"
          alt="icon"
          class="w-[96rpx] h-[96rpx] rounded-[40rpx] mb-[10rpx] border-solid border-[4rpx]"
          :class="[activeMenu === item.id ? 'border-[#28BEBB] ' : 'border-[transparent]']" />
        <span class="text-[40rpx] font-500" :class="[activeMenu === item.id ? 'text-[#28BEBB]' : '']">{{ item.name }}</span>
      </li>
    </ul>

    <nut-list :list-data="lessonList" class="bg-#F5F5F5">
      <template #default="{ item }">
        <div class="flex rounded-[20rpx] m-[30rpx] bg-white" @click="navigateToPage(item.id)">
            <img :src="item.image" alt="cover" class="w-[256rpx] h-[256rpx] rounded-[20rpx_0_0_20rpx]">
            <div class="ml-[20rpx] pt-[30rpx] pb-[20rpx] pr-[20rpx] flex-auto flex flex-col justify-between">
                <p class="text-[40rpx] font-500">{{ item.title }}</p>
                <div class="text-[#B8B8B8] font-400 text-[28rpx] mt-[20rpx] mb-[30rpx]">{{ item.learnCount }}已人学习</div>
                <div class="flex items-center">
                    <nut-price :price="item.price" size="small" v-if="item.price" :decimal-digits="1" class="course-price"/>
                    <div class="text-[#28BEBB] text-[32rpx]" v-else>免费</div>
                    <div class="bg-[#e8f2ff] rounded-[10rpx] text-[26rpx] text-[#1D86FF] px-[10rpx] py-[6rpx] ml-[4rpx]">{{ item.chapterCount }}节课</div>
                    <div class="text-white font-500 bg-[#1D86FF] text-[30rpx] h-[60rpx] w-[172rpx] rounded-full flex items-center justify-center ml-auto">
                        去学习
                        <ChevronRight :stroke-width="3" class="w-[36rpx] h-[36rpx]"/>
                    </div>
                </div>
            </div>
        </div>
      </template>
    </nut-list>
  </div>
</template>

<script lang="ts" setup>
  import { useGetLessonCategory, useGetLessonList } from "@/composables/useCourses";
  import { ChevronRight } from "lucide-vue-next";
  import { useRouter } from "vue-router";

  const router = useRouter();

  const { lessonCategory } = useGetLessonCategory();

  const activeMenu = ref(1);
  watch(() => lessonCategory.value,()=>{
    activeMenu.value = lessonCategory.value[0].id;
  })

  const { lessonList } = useGetLessonList();

  const navigateToPage = (id: string) => {
    router.push({name:'courses-detail',params:{id}})
  }
</script>

<style lang="scss" scoped>
.course-price{
    --nut-price-symbol-small-size:16px;
    --nut-price-small-size:18px;
    --nut-price-decimal-small-size:18px;
}
</style>
