<template>
  <AppLayout :rightContent="rightContent" :has-title="false">
    <div class="pb-24 mb-6">
      <!-- Course Image -->
      <div class="mb-4">
        <img :src="course?.cover || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'" :alt="course?.title"
          class="w-full h-auto" />
      </div>

      <!-- Course Header -->
      <div class="px-4">
        <div class="bg-white p-4 mb-4 rounded-xl shadow-lg">
          <div v-if="course?.group_type_title" class="bg-gray-100 rounded-lg p-2 mb-3 inline-block">
            <div class="text-gray-600 text-sm font-semibold">{{ course?.group_type_title }}</div>
          </div>
          <h1 class="text-2xl text-gray-900 font-bold mb-1">{{ course?.title }}</h1>
          <h2 class="text-sm text-gray-500">{{ course?.subtitle }}</h2>
          <div class="mt-4 flex justify-between items-center">
            <div v-if="course?.pay_type !== 'DESIGNATE'" class="flex items-end gap-2">
              <div v-if="course?.price !== '0.00'" class="flex items-baseline">
                <span class="text-red-500 font-bold text-2xl">¥{{ course?.price }}</span>
                <!-- <span class="text-gray-500 text-sm ml-1">/人</span> -->
              </div>
              <div v-else class="text-red-500 text-lg font-bold">
                免费
              </div>
            </div>
            <div v-else class="text-red-500 text-sm font-bold">
              指定学习
            </div>
            <div class="bg-red-500 text-white text-xs px-3 py-1 rounded-md">
              限时优惠
            </div>
          </div>
          <div class="flex justify-between text-xs text-gray-500 mt-3 border-t border-gray-100 pt-3">
            <div>已更新{{ course?.count }}期</div>
            <div>{{ course?.buy_count }}人订阅</div>
          </div>
          <div v-if="course?.expireDate" class="text-xs text-gray-500 mt-1">
            有效期: {{ course?.expireDate || '没有字段' }}
          </div>
        </div>
      </div>

      <!-- Course Main Content -->
      <div class="px-4">
        <!-- Course Details -->
        <!-- <FrostedGlass class="mb-4 p-4 rounded-xl" v-if="course?.introduce">
          <h3 class="text-lg font-bold text-gray-800 mb-3">本课程介绍</h3>
          <p v-html="course?.introduce" class="text-gray-700 whitespace-pre-line"></p>
        </FrostedGlass> -->

        <!-- Tab Navigation -->
        <FrostedGlass class="mb-6 rounded-xl overflow-hidden">
          <div class="border-b border-gray-200">
            <div class="flex">
              <button v-for="(item, index) in curriculumItems" :key="index" @click="activeTab = item.title" :class="[
                'flex-1 py-3 font-medium text-center',
                activeTab === item.title
                  ? 'text-green-600 border-b-2 border-green-600 bg-green-50/50'
                  : 'text-gray-500'
              ]">
                {{ item.title }}
              </button>
            </div>
          </div>

          <!-- Tab Content -->
          <div class="p-4">
            <!-- <div v-if="activeTab === '课程特色'">
              <div v-html="course?.feature"></div>
            </div> -->

            <div v-if="activeTab === '课程介绍'">
              <p v-html="course?.introduce" class="text-gray-700 whitespace-pre-line"></p>
            </div>

            <div v-if="activeTab === '主讲教师'">
              <div v-for="(item, index) in lecturers" :key="index" class="flex items-center" style="margin-bottom: 1rem;">
                <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
                  <img :src="item?.photo || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'" alt="lecturer"
                    class="w-full h-full object-cover" @error="handleImageError" />
                </div>
                <div>
                  <h4 class="font-bold text-gray-900">{{ item?.name }}</h4>
                  <p class="text-sm text-gray-600">{{ item?.educational }}</p>
                  <p class="text-xs text-gray-500 mt-1">{{ item?.introduce }}</p>
                </div>
              </div>
            </div>

            <div v-if="activeTab === '课程大纲'">
              <div class="space-y-4">
                <div v-for="(item, index) in displayedSchedule" :key="index" class="border-l-2 border-green-500 pl-3" @click="goToStudyDetail(item)">
                  <h4 class="font-medium text-gray-800">{{ item.title }}</h4>
                  <p class="text-sm text-gray-600 mt-1">{{ item.duration }}分钟 · 开课时间: {{ item.schedule_time }}</p>
                </div>
                <div v-if="course?.schedule?.length > 4" class="flex justify-center mt-4">
                  <button @click="toggleSchedule"
                    class="p-2 rounded-full hover:bg-green-50 text-green-600 hover:text-green-700 transition-all duration-300">
                    <van-icon :name="isScheduleExpanded ? 'arrow-up' : 'arrow-down'"
                      class="text-xl transform transition-transform duration-300" />
                  </button>
                </div>
              </div>
            </div>

            <div v-if="activeTab === '打卡互动'">
              <!-- 打卡区域 -->
              <div class="py-4">
                <div class="bg-white rounded-lg p-4 mb-4 cursor-pointer">
                  <div class="flex items-center justify-between" @click="goToCheckin()">
                    <div class="flex items-center gap-3">
                      <van-icon size="3rem" name="calendar-o" class="text-xl text-gray-600" />
                      <div>
                        <div class="text-base font-medium">打卡</div>
                        <div class="text-sm text-gray-500">关联{{ task_list.length }}个打卡</div>
                      </div>
                    </div>
                    <van-icon name="arrow" class="text-gray-400" />
                  </div>
                </div>
              </div>
            </div>

            <!-- <div v-if="activeTab === '课程亮点'">
              <div class="space-y-3 text-gray-700">
                <div v-html="course?.highlights"></div>
              </div>
            </div> -->

            <!-- <div v-if="activeTab === '学习目标'">
              <div class="space-y-3 text-gray-700">
                <div v-html="course?.learning_goal"></div>
              </div>
            </div> -->
          </div>
        </FrostedGlass>

        <!-- lecturers Introduction -->
        <!-- <FrostedGlass class="mb-6 p-4 rounded-xl" v-if="lecturers.length">
          <h3 class="text-lg font-bold text-gray-800 mb-3">主讲老师</h3>
          <div v-for="(item, index) in lecturers" :key="index" class="flex items-center" style="margin-bottom: 1rem;">
            <div class="w-16 h-16 rounded-full overflow-hidden mr-4">
              <img :src="item?.photo || 'https://cdn.ipadbiz.cn/mlaj/images/default_block.png'" alt="lecturer"
                class="w-full h-full object-cover" @error="handleImageError" />
            </div>
            <div>
              <h4 class="font-bold text-gray-900">{{ item?.name }}</h4>
              <p class="text-sm text-gray-600">{{ item?.educational }}</p>
              <p class="text-xs text-gray-500 mt-1">{{ item?.introduce }}</p>
            </div>
          </div>
        </FrostedGlass> -->

        <!-- Student Reviews -->
        <FrostedGlass class="mb-6 p-4 rounded-xl">
          <div class="flex justify-between items-center mb-3">
            <h3 class="text-lg font-bold text-gray-800">学员评价</h3>
            <!-- 立即评论按钮 - 仅在已购买但未评价时显示 -->
            <van-button
              v-if="isPurchased && !isReviewed"
              @click="showReviewPopup = true"
              size="small"
              round
              color="linear-gradient(to right, #3b82f6, #2563eb)"
              class="shadow-sm text-xs px-4 py-1.5 min-w-[80px] hover:shadow-md transition-all duration-200"
            >
              <van-icon name="edit" size="12" class="mr-1" />
              立即评论
            </van-button>
          </div>
          <div class="flex items-center mb-3">
            <div class="flex items-center mr-2">
              <van-rate v-model="commentScore" readonly allow-half color="#facc15" void-color="#e5e7eb" size="20" />
            </div>
            <div class="text-gray-700">{{ commentScore }} ({{ commentTotal }}条评论)</div>
          </div>

          <div class="space-y-4">
            <div v-for="(item, index) in commentList" :key="index" class="border-b border-gray-100 pb-3">
              <div class="flex justify-between">
                <div class="font-medium text-gray-800">{{ item.name }}</div>
                <div class="text-xs text-gray-500">{{ formatDate(item.created_time) }}</div>
              </div>
              <p class="text-sm text-gray-600 mt-1">
                {{ item.note }}
              </p>
            </div>
          </div>
          <button @click="router.push(`/courses/${course?.id}/reviews`)"
            class="w-full text-center text-green-600 mt-3 text-sm">
            查看全部评价
          </button>
        </FrostedGlass>
      </div>

      <!-- Bottom Action Bar -->
      <div class="fixed bottom-16 left-0 right-0 bg-white shadow-lg p-3 flex justify-between items-center">
        <div class="flex space-x-4">
          <!-- <button class="flex flex-col items-center text-gray-500 text-xs">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
              />
            </svg>
            咨询
          </button> -->
          <!-- <button class="flex flex-col items-center text-gray-500 text-xs">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
              />
            </svg>
            分享
          </button> -->
          <button class="flex flex-col items-center text-gray-500 text-xs transition-transform duration-300"
            @click="toggleFavorite" :class="{ 'animate-favorite': isFavorite }">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transition-transform duration-300"
              :fill="isFavorite ? 'red' : 'none'" viewBox="0 0 24 24" :stroke="isFavorite ? 'red' : 'currentColor'">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4.318 6.318 a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682 a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318 a4.5 4.5 0 00-6.364 0z" />
            </svg>
            收藏
          </button>
        </div>
        <div class="flex items-center">
          <div v-if="!course?.is_buy" class="mr-2">
            <div v-if="course?.price !== '0.00'" class="text-red-500 font-bold">¥{{ course?.price || 0 }}</div>
            <div v-if="course?.price !== '0.00'" class="text-xs text-gray-400 line-through">
              ¥{{ Math.round((course?.price || 0) * 1.2) }}
            </div>
          </div>
          <van-button v-if="!isPurchased" @click="handlePurchase" round block
            color="linear-gradient(to right, #22c55e, #16a34a)" class="shadow-md">
            {{ course?.price !== '0.00' ? '立即' : '免费' }}购买
          </van-button>
          <van-button v-else @click="handleViewCourse" round block
            color="linear-gradient(to right, #22c55e, #16a34a)" class="shadow-md">
            查看课程
          </van-button>
        </div>
      </div>
    </div>

    <!-- Review Popup -->
    <ReviewPopup v-model:show="showReviewPopup" title="立即评价" @submit="handleReviewSubmit" />

    <!-- 打卡弹窗 -->
    <van-popup
      v-model:show="showCheckInDialog"
      round
      position="bottom"
      @close="closeCheckInDialog"
      :style="{ minHeight: '30%', maxHeight: '80%', width: '100%' }"
    >
      <div class="p-4">
        <div class="flex justify-between items-center mb-3">
          <h3 class="font-medium">
            <span :class="{ 'text-green-500' : showTaskList }" @click="toggleTask('today')">今日打卡</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <span :class="{ 'text-green-500' : showTimeoutTaskList }" @click="toggleTask('timeout')">历史打卡</span>
          </h3>
          <van-icon name="cross" @click="showCheckInDialog = false" />
        </div>

        <div v-if="checkInSuccess" class="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-500 mx-auto mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <h4 class="text-green-700 font-medium mb-1">打卡成功！</h4>
        </div>
        <template v-else>
          <div class="grid grid-cols-2 gap-4 py-2">
            <button
              v-for="checkInType in default_list"
              :key="checkInType.id"
              class="flex flex-col items-center p-2 rounded-lg border transition-colors
                  bg-white/70 border-gray-100 hover:bg-white"
              :class="{
                  'bg-green-100 border-green-200': selectedCheckIn?.id === checkInType.id
              }"
              @click="handleCheckInSelect(checkInType)"
            >
              <div class="w-12 h-12 rounded-full flex items-center justify-center mb-1 transition-colors
                      bg-gray-100 text-gray-500"
                  :class="{
                      'bg-green-500 text-white': selectedCheckIn?.id === checkInType.id
                  }"
              >
                <van-icon v-if="checkInType.task_type === 'checkin'" name="edit" size="1.5rem" :color="checkInType.is_gray ? 'gray' : ''" />
                <van-icon v-if="checkInType.task_type === 'upload'" name="tosend" size="1.5rem" :color="checkInType.is_gray ? 'gray' : ''" />
              </div>
              <span :class="['text-xs', checkInType.is_gray ? 'text-gray-500' : '']">{{ checkInType.name }}</span>
            </button>
          </div>

          <div v-if="selectedCheckIn" class="mt-3">
            <button
              class="mt-2 w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-2 rounded-lg flex items-center justify-center"
              @click="handleCheckInSubmit"
              :disabled="isCheckingIn"
            >
              <template v-if="isCheckingIn">
                <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
                提交中...
              </template>
              <template v-else>提交打卡</template>
            </button>
          </div>
        </template>
      </div>
    </van-popup>
    <van-back-top right="5vw" bottom="25vh" offset="600" />
  </AppLayout>
</template>

<script setup lang="jsx">
import { ref, onMounted, defineComponent, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCart } from '@/contexts/cart'
import { useAuth } from '@/contexts/auth'
import { useTitle } from '@vueuse/core';
import { showToast, showDialog } from 'vant';
import { formatDate } from '@/utils/tools'

import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'

// 导入接口
import { getCourseDetailAPI, getGroupCommentListAPI, addGroupCommentAPI } from "@/api/course";
import { addFavoriteAPI, cancelFavoriteAPI } from "@/api/favorite";
import { checkinTaskAPI } from '@/api/checkin';

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const route = useRoute()
const router = useRouter()
const { currentUser } = useAuth()

const course = ref(null)
const lecturers = ref([])
const activeTab = ref('课程介绍')
// 是否收藏状态
const isFavorite = ref(false)
// 是否已购买状态
const isPurchased = ref(false)
// 是否已评论状态
const isReviewed = ref(false)
const showReviewPopup = ref(false)

// 打卡相关状态
const task_list = ref([])
const timeout_task_list = ref([])
const default_list = ref([])
const showTaskList = ref(true)
const showTimeoutTaskList = ref(false)
const showCheckInDialog = ref(false)
const selectedCheckIn = ref(null)
const isCheckingIn = ref(false)
const checkInSuccess = ref(false)

const { addToCart, proceedToCheckout } = useCart()

// Handle favorite toggle
// 收藏/取消收藏操作
const toggleFavorite = async () => {
  if (isFavorite.value) {
    const { code, msg } = await cancelFavoriteAPI({
      group_id: course.value.id
    })
    if (code) {
      isFavorite.value = !isFavorite.value
      showToast('取消收藏')
    }
  } else {
    const { code, msg } = await addFavoriteAPI({
      group_id: course.value.id
    })
    if (code) {
      isFavorite.value = !isFavorite.value
      showToast('收藏成功')
    }
  }
}

// Curriculum items
const curriculumItems = computed(() => {
  if (!course.value) return [];

  return [
    { title: '课程介绍', active: activeTab.value === '课程介绍', show: !!course.value.introduce },
    { title: '主讲教师', active: activeTab.value === '主讲教师', show: !!(lecturers.value && lecturers.value.length > 0) },
    { title: '课程大纲', active: activeTab.value === '课程大纲', show: !!(course.value.schedule && course.value.schedule.length > 0) },
    // { title: '课程亮点', active: activeTab.value === '课程亮点', show: !!course.value.highlights },
    // { title: '学习目标', active: activeTab.value === '学习目标', show: !!course.value.learning_goal },
    { title: '打卡互动', active: activeTab.value === '打卡互动', show: !!course.value.is_buy },
  ].filter(item => item.show);
});

// Handle image error
const handleImageError = (e) => {
  e.target.src = ''
}

// Right content component
const RightContent = defineComponent({
  setup() {
    return () => (
      <button class="p-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6 text-gray-700"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
          />
        </svg>
      </button>
    )
  },
})

const rightContent = h(RightContent)

// 立即购买操作
const handlePurchase = () => {
  // 检查用户是否已登录
  if (!currentUser.value) {
    showToast('请先登录')
    router.replace({ path: '/login', query: { redirect: $route.fullPath } })
    return
  }

  if (course.value) {
    // 调试日志：检查course.value.form_url的值
    console.log('CourseDetailPage - course.value.form_url:', course.value.form_url)
    console.log('CourseDetailPage - 完整course数据:', course.value)

    const cartItem = {
      id: course.value.id,
      type: 'course',
      title: course.value.title,
      price: course.value.price,
      imageUrl: course.value.imageUrl,
      form: course.value.form, // 报名关联的表单
    }

    // 只有当form_url存在且不为空时才添加该字段
    if (course.value.form_url && course.value.form_url.trim() !== '') {
      cartItem.form_url = window.location.origin + course.value.form_url // 课程关联的表单的 URL
    }

    // 调试日志：检查传递给addToCart的数据
    console.log('CourseDetailPage - 传递给addToCart的数据:', cartItem)

    addToCart(cartItem)
    proceedToCheckout()
  }
}

// 提交评论操作
const handleReviewSubmit = async (review) => {
  const { code, msg } = await addGroupCommentAPI({
    group_id: course.value?.id,
    note: review.note,
    score: review.rating
  })
  if (code) {
    showToast('评论提交成功')
    isReviewed.value = true
    await fetchCommentList()
  }
}

const commentList = ref([])
const commentScore = ref(0)
const commentTotal = ref(0)

// 获取评论列表
const fetchCommentList = async () => {
  const { code, data } = await getGroupCommentListAPI({
    group_id: course.value?.id,
    page: 0,
    limit: 5
  })
  if (code) {
    commentList.value = data.comment_list
    commentScore.value = data.comment_score || 0
    commentTotal.value = data.comment_count || 0
  }
}

// 初始化
onMounted(async () => {
  const id = route.params.id
  // 调用接口获取课程详情
  const { code, data } = await getCourseDetailAPI({ i: id });
  if (code) {
    const foundCourse = data;
    if (foundCourse) {
      course.value = foundCourse;
      lecturers.value = foundCourse.lecturer;
      isFavorite.value = foundCourse.is_favorite;
      isPurchased.value = foundCourse.is_buy;
      isReviewed.value = foundCourse.is_comment;

      // 设置默认选中的 tab，确保选中的 tab 有内容
      const availableTabs = curriculumItems.value;
      if (availableTabs.length > 0 && !availableTabs.some(item => item.title === activeTab.value)) {
        activeTab.value = availableTabs[0].title;
      }

      // 获取评论列表
      await fetchCommentList()

      // 处理task_list数据格式
      if (data.task_list) {
          data.task_list.forEach(item => {
              task_list.value.push({
                  id: item.id,
                  name: item.title,
                  task_type: item.task_type,
                  is_gray: item.is_gray
              });
          });
      }

      // 处理timeout_task_list数据格式
      if (data.timeout_task_list) {
          data.timeout_task_list.forEach(item => {
              timeout_task_list.value.push({
                  id: item.id,
                  name: item.title,
                  task_type: item.task_type,
                  is_gray: item.is_gray
              });
          });
      }

      default_list.value = task_list.value;
    } else {
      // 课程不存在，跳转到课程主页面
      showToast('课程不存在')
      router.push('/courses')
    }
  }


  // TAG: 录入个人信息表单的标记, 进入页面时清理所有info_entry_completed_开头的localStorage标记
  const keysToRemove = []
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i)
    if (key && key.startsWith('info_entry_completed_')) {
      keysToRemove.push(key)
    }
  }
  keysToRemove.forEach(key => {
    localStorage.removeItem(key)
    console.log('清理历史个人信息录入标记:', key)
  })
})


const isScheduleExpanded = ref(false)

// 计算显示的课程大纲列表
const displayedSchedule = computed(() => {
  if (!course.value?.schedule) return []
  return isScheduleExpanded.value || course.value.schedule.length <= 4
    ? course.value.schedule
    : course.value.schedule.slice(0, 4)
})

// 切换课程大纲展开/收起状态
const toggleSchedule = () => {
  isScheduleExpanded.value = !isScheduleExpanded.value
}

/**
 * 处理查看课程按钮点击
 */
const handleViewCourse = () => {
  // 检查课程审核状态
  if (!course.value.is_approval_enable) {
    showDialog({
      title: '温馨提示',
      message: '购买的课程正在审核中，请稍后再试',
      confirmButtonText: '知道了',
      confirmButtonColor: '#4caf50',
    })
    return;
  }
  router.push(`/profile/studyCourse/${course.value.id}`);
};

// 跳转课程大纲
const goToStudyDetail = (item) => {
  console.warn(course.value);
  // 如果没有购买过, 禁止操作
  if (!course.value.is_buy) {
    return;
  }
  // 检查课程审核状态
  if (!course.value.is_approval_enable) {
    showDialog({
      title: '温馨提示',
      message: '购买的课程正在审核中，请稍后再试',
      confirmButtonText: '知道了',
      confirmButtonColor: '#4caf50',
    })
    return;
  }
  // 检查课程是否在开课时间内, course_start_time 开课时间, course_end_time 停课时间
  if (!course.value.is_in_course_time) {
    showDialog({
      title: '温馨提示',
      message: `请在指定课程时间: ${course.value.course_start_time} - ${course.value.course_end_time}内操作!`,
      confirmButtonText: '知道了',
      confirmButtonColor: '#4caf50',
    })
    return;
  }
  // 跳转详情
  router.push(`/studyDetail/${item.id}`)
}

// 打卡相关方法
/**
 * 处理打卡选择
 * @param {Object} type - 打卡类型对象
 */
const handleCheckInSelect = (type) => {
  if (type.is_gray && type.task_type === 'checkin') {
    showToast('您已经完成了今天的打卡');
    return;
  }
  if (type.task_type === 'upload') {
    router.push({
      path: '/checkin/index',
      query: {
        id: type.id
      }
    });
    showCheckInDialog.value = false;
    return;
  } else {
    selectedCheckIn.value = type;
  }
};

/**
 * 处理打卡提交
 */
const handleCheckInSubmit = async () => {
  if (!selectedCheckIn.value) {
    showToast('请选择打卡项目');
    return;
  }

  isCheckingIn.value = true;
  try {
    const { code } = await checkinTaskAPI({ task_id: selectedCheckIn.value.id });
    if (code) {
      checkInSuccess.value = true;
      // 重置表单
      setTimeout(() => {
        checkInSuccess.value = false;
        selectedCheckIn.value = null;
        showCheckInDialog.value = false;
      }, 1500);
    }
  } catch (error) {
    console.error('打卡失败:', error);
    showToast('打卡失败，请重试');
  } finally {
    isCheckingIn.value = false;
  }
};

/**
 * 打开打卡弹窗
 */
const goToCheckin = () => {
  // 检查课程审核状态
  if (!course.value.is_approval_enable) {
    showDialog({
      title: '温馨提示',
      message: '购买的课程正在审核中，请稍后再试',
      confirmButtonText: '知道了',
      confirmButtonColor: '#4caf50',
    })
    return;
  }
  if(!default_list.value.length) {
    showToast('暂无打卡任务');
    return;
  }
  showCheckInDialog.value = true;
};

/**
 * 切换打卡任务类型
 * @param {string} type - 任务类型 ('today' | 'timeout')
 */
const toggleTask = (type) => {
  if(type === 'today') {
    showTaskList.value = true;
    showTimeoutTaskList.value = false;
    default_list.value = task_list.value;
  } else {
    showTaskList.value = false;
    showTimeoutTaskList.value = true;
    default_list.value = timeout_task_list.value;
  }
}

/**
 * 关闭打卡弹窗
 */
const closeCheckInDialog = () => {
  showCheckInDialog.value = false;
}
</script>

<style lang="less">
.animate-favorite {
  animation: favorite-animation 0.5s ease;
}

@keyframes favorite-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.van-back-top {
  background-color: #4caf50;
}
</style>