<template>
  <div class="flex flex-col bg-[#f5f5f5]">
    <div class="h-[426rpx] min-h-[426rpx] bg-[#000]">
      <video :src="courseDetail?.videoUrl" controls playsinline="true" class="w-full h-full" />
      <!-- <nut-video :source="{ src: courseDetail?.videoUrl, type: 'video/mp4' }" :options="options" /> -->
    </div>
    <div class="rounded-[40rpx_40rpx_0_0] h-[364rpx] bg-white mt-[-30rpx] z-1 p-[30rpx] flex flex-col justify-between">
      <div class="flex items-end">
        <nut-price :price="courseDetail.price" size="large" v-if="courseDetail.price" :decimal-digits="2" class="course-price font-700" />
        <div class="bg-[#e8f2ff] rounded-[10rpx] text-[26rpx] text-[#1D86FF] px-[10rpx] py-[6rpx] ml-[12rpx]">{{ courseDetail.lessonCount }}节课</div>
        <div class="ml-auto flex flex-col items-center">
          <img src="/images/product/wechat.png" alt="wechat" class="w-[56rpx] h-[56rpx]" />
          <span class="text-[32rpx] font-400 text-[#43C93E]">分享</span>
        </div>
      </div>
      <p class="text-[44rpx] font-500 mt-[34rpx]">{{ courseDetail.title }}</p>
      <p class="text-[30rpx] font-400 text-[#666] mt-[20rpx]">{{ courseDetail.description }}</p>
    </div>
    <div class="flex flex-col pt-[28rpx] bg-white mt-[22rpx] custom-tabs">
      <nut-tabs v-model="activeTab" :swipeable="true">
        <template #titles>
          <div
            v-for="item in list"
            :key="item.paneKey"
            class="mr-[60rpx] text-[#999] text-[36rpx] font-400 flex items-center ml-[28rpx]"
            :class="[activeTab === item.paneKey ? 'bg-[url(/images/product/tab-line.png)] bg-no-repeat bg-bottom-center bg-contain' : '']"
            @click="activeTab = item.paneKey">
            <div class="custom-title" :class="[activeTab === item.paneKey ? 'text-[#000] font-600' : '']">
              {{ item.title }}
            </div>
          </div>
        </template>
        <nut-tab-pane pane-key="intro">
          <div class="flex flex-col h-full overflow-y-auto">
            <div class="rounded-[20rpx] bg-[#F7FAFF] px-[20rpx] py-[30rpx] flex items-start mt-[20rpx] px-[28rpx]">
              <div class="flex flex-col items-center">
                <img :src="courseDetail?.teacher?.avatar" alt="" class="w-[120rpx] h-[120rpx] rounded-[50%]" />
                <div class="px-[8rpx] py-[6rpx] text-[26rpx] text-[#1D86FF] bg-[#e0eeff] rounded-[10rpx] mt-[12rpx]">{{ courseDetail?.teacher?.tag }}</div>
              </div>
              <div class="ml-[22rpx] flex flex-col w-0 flex-auto">
                <span class="text-[40rpx]">{{ courseDetail?.teacher?.name }}</span>
                <p class="text-[28rpx] text-[#3dd3d] leading-[40rpx] mt-[10rpx]">{{ courseDetail?.teacher?.bio }}</p>
              </div>
            </div>
            <div class="mt-[30rpx]">
              <img :src="courseDetail?.extra?.qrCode" alt="" class="w-full h-max" />
            </div>
          </div>
        </nut-tab-pane>
        <nut-tab-pane pane-key="catalog">
          <div class="px-[30rpx] mt-[30rpx]">
            <div class="rounded-[20rpx] bg-[#F7FAFF] h-[148rpx] flex mt-[30rpx] px-[20rpx] py-[28rpx]" v-for="(item, index) in courseCatalog" :key="index">
              <div class="text-[#ccc] font-700 text-[88rpx]">{{ index < 10 ? 0 : "" }}{{ index + 1 }}</div>
              <div class="flex flex-col justify-between ml-[30rpx]">
                <p class="text-[#999] text-[36rpx] font-500">{{ item.title }}</p>
                <div class="flex items-center">
                  <div class="flex items-center text-[#999]">
                    <Clock :stroke-width="2" class="w-[36rpx] h-[36rpx] mr-[4rpx]" />
                    <span>{{ item.duration }}</span>
                  </div>
                  <div class="flex items-center text-[#999]">
                    <CirclePlay :stroke-width="2" class="w-[36rpx] h-[36rpx] mr-[4rpx]" />
                    <span>{{ item.playCount }}</span>
                  </div>
                </div>
              </div>
              <img src="/images/product/lock-catalog.png" alt="lock" class="w-[88rpx] h-[88rpx] ml-auto" v-if="item.isLocked" @click="handleLock(item.id)"/>
              <div class="w-[72rpx] h-[38rpx] rounded-[10rpx] bg-[#e0eeff] text-[#1D86FF] text-[26rpx] px-[10rpx] py-[6rpx] ml-auto self-center" v-else>试听</div>
            </div>
          </div>
        </nut-tab-pane>
      </nut-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useGetCourseDetail, useGetCourseCatalog } from "@/composables/useCourses";
  import { Clock, CirclePlay } from "lucide-vue-next";
  import { useRouter,useRoute } from "vue-router";

  const router = useRouter();
  const route = useRoute();

  const { courseDetail } = useGetCourseDetail();

  const { courseCatalog } = useGetCourseCatalog();

  const activeTab = ref("intro");
  const list = ref([
    {
      title: "课程简介",
      paneKey: "intro",
    },
    {
      title: "课程目录",
      paneKey: "catalog",
    },
  ]);

  const handleLock = (_id: string) => {
    router.push({name:'courses-cart',params:{id:route.params.id as string}})
  }
</script>

<style lang="scss" scoped>
  .course-price {
    --nut-price-symbol-big-size: 26px;
    --nut-price-big-size: 40px;
    --nut-price-decimal-big-size: 24px;
  }

  .custom-tabs {
    --nut-tabs-titles-background-color: #fff;
    --nut-tabs-horizontal-titles-height: 35px;
  }

  :deep(.nut-tab-pane) {
    padding: 0;
  }
</style>
