<template>
  <div class="flex flex-col bg-[#f5f5f5]">
    <nut-list :list-data="[courseDetail]" class="mt-[30rpx]">
        <template #default="{item}">
            <div class="flex flex-col mx-[30rpx] rounded-[20rpx] bg-white p-[20rpx]">
                <div class="flex justify-between">
                    <img :src="item.coverImage" alt="cover" class="w-[192rpx] h-[192rpx] rounded-[10rpx]">
                    <div class="ml-[16rpx] flex flex-col justify-between">
                        <p class="text-[40rpx] font-500">{{ item?.title }}</p>
                        <div class="flex items-center mt-[16rpx]">
                            <img :src="item?.teacher?.avatar" alt="avatar" class="w-[54rpx] h-[54rpx] rounded-full">
                            <p class="text-[32rpx] font-400 text-[#333] ml-[10rpx]">{{ item?.teacher?.name }}</p>
                        </div>
                    </div>
                </div>
                <div class="flex justify-between mt-[30rpx]">
                    <span class="text-[32rpx] font-400 text-[#333]">购买章节</span>
                    <span class="text-[30rpx] font-400">{{ paidCourseName }}</span>
                </div>
                <div class="flex items-center justify-between mt-[22rpx]">
                    <span class="text-[32rpx] font-400 text-[#333]">课程价格</span>
                    <nut-price :price="courseDetail?.price" size="normal" class="font-500" />
                </div>
            </div>
        </template>
    </nut-list>
    <div class="flex pl-[24rpx] py-[16rpx] pr-[30rpx] items-center justify-between bg-white">
      <nut-price :price="courseDetail?.price" size="large" class="font-500" />
      <div class="w-[416rpx] h-[100rpx] rounded-[20rpx] bg-[#28BEBB] text-white text-[44rpx] font-600 flex items-center justify-center" @click="toPayment">
        立即支付
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useShoppingCartStore } from "@/store/shoppingCart";
  import { useGetCourseDetail,useGetLessonList } from "@/composables/useCourses";
  import { useRouter } from "vue-router";
import { CartTypeEnum } from "@/types/cart";

  const router = useRouter();
  const shoppingCartStore = useShoppingCartStore();
  const { courseDetail } = useGetCourseDetail();
  const { lessonList } = useGetLessonList();

  const paidCourseName = computed(() =>{
    const courseNames = lessonList.value.filter(item => item.price > 0).map((item,index) => ({title:item.title,index:index+1}));
    return courseNames.length > 1 ? `第${courseNames[0].index}章到第${courseNames[courseNames.length - 1].index}章` : courseNames[0]?.title;
  })

  const toPayment = () => {
    shoppingCartStore.addShoppingCart({
        type: CartTypeEnum.Course,
        id: courseDetail.value.id,
        name: courseDetail.value.title,
        price: courseDetail.value.price,
        cover: courseDetail.value.coverImage,
        count: 1,
    })
    router.push({ path: "/checkout/payment", query: { type: CartTypeEnum.Course } });
  };
</script>

<style lang="scss" scoped></style>
