<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getViewCourseDetails } from '../api'

// 课程详情数据
const courseDetails = ref<any>({})
const collapseData = ref<any[]>([])
const activeNames = ref<string[]>([])

const route = useRoute()
const id = route.query.id as string

// tab切换
const activeTab = ref('study')
const tabList = [
  { label: '学习', name: 'study' },
  // { label: '论坛', name: 'forum' },
  // { label: '大作业', name: 'homework' },
  // { label: '考试', name: 'exam' },
  // { label: '课程教务', name: 'affair' },
  // { label: '直播', name: 'live' },
  // { label: '资料', name: 'material' },
  // { label: '数字教材', name: 'ebook' },
]

// 简介/目标切换
const introTab = ref('intro')
const introField = computed(() => (introTab.value === 'intro' ? 'represent' : 'target'))

// 加载状态
const loadingVisible = ref(false)
const loadingText = ref('')

// 获取课程详情
const fetchCourseDetails = async () => {
  const res = await getViewCourseDetails({ id })
  courseDetails.value = res.data
  // 章节处理逻辑，转为el-collapse结构
  if (courseDetails.value.chapters?.[0]?.children) {
    collapseData.value = courseDetails.value.chapters[0].children.map((chapter: any, cIdx: number) => ({
      id: chapter.id,
      name: `第${cIdx + 1}章：${chapter.name}`,
      rawName: chapter.name,
      children: chapter.children.map((section: any) => ({
        id: section.id,
        name: section.name,
        children: (section.children || []).map((res: any) => ({
          id: res.id,
          name: res.name,
        })),
      })),
    }))
  }
}
onMounted(fetchCourseDetails)

const handleStudy = () => {
  // 你的学习逻辑
}

const handleClose = () => {
  // 关闭页面的逻辑
  window.close()
}

// 处理AI功能跳转
const handleAIAction = (type: 'learning' | 'test') => {
  const urls = {
    learning: '/ai-custom-learning.html',
    test: '/ai-unit-test.html',
  }

  const texts = {
    learning: '正在准备AI定制学习环境...',
    test: '正在准备AI单元测试环境...',
  }

  loadingText.value = texts[type]
  loadingVisible.value = true

  // 3秒后跳转
  setTimeout(() => {
    loadingVisible.value = false
    window.open(urls[type], '_blank')
  }, 3000)
}
</script>

<template>
  <div class="preview-container-wrapper">
    <!-- 头部区域 -->
    <div class="preview-header">
      <div class="header-content">
        <div>
          <h1 class="header-title">📚 课程预览</h1>
          <p class="header-subtitle">{{ courseDetails.course_alias_name || courseDetails.name }}</p>
        </div>
        <div class="header-actions">
          <el-button @click="handleClose" type="primary" plain size="large">关闭页面</el-button>
        </div>
      </div>
    </div>

    <div class="preview-container">
      <div class="flex active">
        <!-- 头部课程信息区 -->
        <div class="course-view-h">
          <div class="view-h-l">
            <img :src="courseDetails.cover || '/center_resource/course_default.png'" />
            <div class="btn" @click="handleStudy">立即学习</div>
          </div>
          <div class="course-view-r">
            <div class="course-view-r__info">
              <div class="name">{{ courseDetails.course_alias_name || courseDetails.name }}</div>
              <div class="tag-box">
                <div class="tag" v-if="courseDetails.required_type_name">{{ courseDetails.required_type_name }}</div>
                <div class="tag" v-if="courseDetails.credit">{{ courseDetails.credit }}学分</div>
                <div class="tag" v-if="courseDetails.term_name">{{ courseDetails.term_name }}</div>
              </div>
            </div>
            <div class="view-content">
              <div class="view-content-hd">
                <div :class="introTab === 'intro' ? 'btn active' : 'btn'" @click="introTab = 'intro'">课程简介</div>
                <div :class="introTab === 'target' ? 'btn active' : 'btn'" @click="introTab = 'target'">授课目标</div>
              </div>
              <div class="view-content_c" v-if="!courseDetails[introField]">
                <el-empty :image-size="50" style="padding: 0" description="暂无数据"></el-empty>
              </div>
              <div class="view-content_c" v-else v-html="courseDetails[introField]"></div>
            </div>
          </div>
        </div>
        <div class="course-view-teacher">
          <div class="teacher-hd">课程讲师</div>
          <div class="teacher-content">
            <div class="teacher-content-item" v-for="item in courseDetails.lecturers || []" :key="item.id">
              <img :src="item.avatar || '/center_resource/avatar.svg'" />
              <div class="box">
                <div class="name">{{ item.name }}</div>
                <div class="dec" v-html="item.summarize"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="course-view-bd">
        <!-- element-plus tab菜单 -->
        <el-tabs v-model="activeTab" class="tabs">
          <el-tab-pane v-for="tab in tabList" :key="tab.name" :label="tab.label" :name="tab.name">
            <template v-if="tab.name === 'study'">
              <!-- 章节内容用el-collapse展示 -->
              <div class="collapse-list">
                <el-collapse v-model="activeNames" accordion>
                  <el-collapse-item
                    v-for="chapter in collapseData"
                    :key="chapter.id"
                    :name="chapter.id"
                    :title="chapter.name">
                    <template #title>
                      <div class="chapter-title">
                        <span>{{ chapter.name }}</span>
                        <div class="chapter-actions">
                          <el-button
                            size="small"
                            type="primary"
                            class="ai-btn"
                            @click.stop="handleAIAction('learning')">
                            AI定制学习
                          </el-button>
                          <el-button size="small" type="success" class="ai-btn" @click.stop="handleAIAction('test')">
                            AI单元测试
                          </el-button>
                        </div>
                      </div>
                    </template>
                    <div class="section-list">
                      <div v-for="section in chapter.children" :key="section.id" class="section-item">
                        <div class="section-title">{{ section.name }}</div>
                        <div class="resource-list">
                          <div v-for="resource in section.children" :key="resource.id" class="resource-item">
                            {{ resource.name }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </template>
            <template v-else>
              <div class="tab-placeholder">{{ tab.label }}内容开发中…</div>
            </template>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 自定义加载弹框 -->
    <div v-if="loadingVisible" class="custom-loading-modal">
      <div class="custom-loading-dialog">
        <div class="loading-content">
          <div class="loading-icon-wrapper">
            <div class="loading-icon">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M12 2V6M12 18V22M4.93 4.93L7.76 7.76M16.24 16.24L19.07 19.07M2 12H6M18 12H22M4.93 19.07L7.76 16.24M16.24 7.76L19.07 4.93"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </div>
          </div>
          <div class="loading-text-wrapper">
            <h3 class="loading-title">{{ loadingText }}</h3>
            <p class="loading-subtitle">请稍候，正在为您准备环境...</p>
          </div>
          <div class="loading-progress">
            <div class="progress-bar">
              <div class="progress-fill"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.preview-container-wrapper {
  height: 100vh;
  background-color: #eee;
  box-sizing: border-box;
}

// 头部样式
.preview-header {
  background: linear-gradient(135deg, #ab0a3d 0%, #d4145a 100%);
  color: white;
  padding: 20px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;

  .header-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .header-subtitle {
    opacity: 0.9;
    font-size: 16px;
  }

  .header-actions {
    .el-button {
      padding: 12px 24px;
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 6px;
      font-size: 16px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
      }
    }
  }
}

.preview-container {
  max-width: 1400px;
  margin: 0 auto;
  height: calc(100vh - 140px);
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.flex {
  display: flex;
  &.active {
    .course-view-h {
      background: #ab0a3d;
      box-shadow: 0px 6px 12px 1px rgba(0, 0, 0, 0.05);
    }
    .view-h-l {
      .btn {
        background: #fff;
        color: #555555;
      }
    }
    .course-view-r {
      .name {
        color: #fff;
      }
      .view-content {
        .view-content-hd {
          .btn {
            color: #fff;
            &.active {
              color: #fff;
              font-weight: bold;
            }
          }
        }
        .view-content_c {
          color: #fff;
        }
      }
    }
  }
}
.course-view-h {
  flex: 1;
  position: relative;
  background: linear-gradient(90deg, #dfe4e6 0%, #eaeaea 39%, #b3b3b3 100%);
  border-radius: 10px 0 0 10px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  .view-h-l {
    margin-right: 32px;
    min-width: 260px;
    img {
      height: 150px;
      width: 100%;
      display: block;
      border-radius: 12px;
    }
    .btn {
      background: #ab0a3d;
      border-radius: 12px;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      line-height: 37px;
      margin-top: 10px;
      cursor: pointer;
    }
  }
  .course-view-r {
    position: relative;
    width: 100%;
    .name {
      font-size: 20px;
      font-weight: bold;
      color: #000;
      line-height: 100%;
      margin-bottom: 20px;
    }
    .tag-box {
      display: flex;
      .tag {
        padding: 0 9px;
        line-height: 23px;
        background: #fff;
        border-radius: 4px 4px 4px 4px;
        font-size: 14px;
        color: #555555;
        margin-right: 10px;
      }
    }
    .view-content {
      border-radius: 9px;
      margin-top: 10px;
      .view-content_c {
        font-size: 12px;
        color: #535353;
        height: 85px;
        overflow: auto;
        &::-webkit-scrollbar {
          width: 3px;
        }
        &::-webkit-scrollbar-track {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 30px !important;
        }
        &::-webkit-scrollbar-thumb {
          background-color: rgba(255, 255, 255, 0.5);
          border-radius: 30px !important;
        }
      }
      .view-content-hd {
        display: flex;
        .btn {
          line-height: 33px;
          margin-right: 18px;
          font-size: 14px;
          color: #666666;
          cursor: pointer;
          &.active {
            color: #ba143e;
          }
        }
      }
    }
  }
}
.course-view-teacher {
  width: 410px;
  background-color: #fff;
  border-radius: 0px 10px 10px 0px;
  padding: 30px 30px 0 30px;
  box-sizing: border-box;
  .teacher-hd {
    font-size: 20px;
    font-weight: bold;
  }
  .teacher-content {
    padding-top: 30px;
    box-sizing: border-box;
    height: 150px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 5px;
      margin-right: 40px !important;
      border-radius: 30px !important;
    }
    &::-webkit-scrollbar-track {
      background-color: #dfe4e6;
      opacity: 0.5;
      border-radius: 30px !important;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #b3b3b3;
      border-radius: 30px !important;
    }
    .teacher-content-item {
      display: flex;
      margin-bottom: 30px;
      img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    .box {
      margin-left: 30px;
      .name {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 100%;
        margin-bottom: 10px;
      }
      .dec {
        font-size: 12px;
        color: #666666;
        line-height: 18px;
      }
    }
  }
}
.course-view-bd {
  flex: 1;
  padding: 10px 20px;
  background-color: #fff;
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;
}
.tabs {
  .el-tabs__item {
    --el-font-size-base: 16px;
    padding: 0 20px !important;
    font-weight: 400;
    text-align: center;
  }
  .el-tabs__item.is-active {
    font-weight: 500;
  }
  .el-tabs__active-bar {
    padding: 0 20px;
    margin-left: -20px;
  }
  .el-tabs__nav-wrap::after {
    height: 1px !important;
  }
}

// 新增的 collapse 相关样式
.collapse-list {
  .chapter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .chapter-actions {
      display: flex;
      gap: 8px;

      .ai-btn {
        font-size: 12px;
        padding: 4px 8px;
      }
    }
  }

  .section-list {
    .section-item {
      margin-bottom: 16px;
      padding: 12px;
      background-color: #f8f9fa;
      border-radius: 6px;

      .section-title {
        font-weight: 500;
        color: #333;
        margin-bottom: 8px;
        font-size: 14px;
      }

      .resource-list {
        .resource-item {
          padding: 6px 12px;
          margin: 4px 0;
          background-color: #fff;
          border-radius: 4px;
          font-size: 13px;
          color: #666;
          border-left: 3px solid #ab0a3d;

          &:hover {
            background-color: #f0f0f0;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.el-collapse-item__header {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.el-collapse-item__content {
  padding: 16px;
}

// 自定义加载弹框样式
.custom-loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  .custom-loading-dialog {
    background-color: white;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 40px 30px;
    min-width: 420px;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .loading-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .loading-icon-wrapper {
        margin-bottom: 24px;
        position: relative;
        z-index: 1;

        .loading-icon {
          display: inline-block;
          width: 60px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;

          svg {
            width: 32px;
            height: 32px;
            color: #ab0a3d;
            animation: spin 2s linear infinite;
          }
        }
      }

      .loading-text-wrapper {
        margin-bottom: 24px;
        position: relative;
        z-index: 1;
        text-align: center;

        .loading-title {
          font-size: 18px;
          font-weight: 600;
          margin: 0 0 8px 0;
          color: #333;
        }

        .loading-subtitle {
          font-size: 14px;
          margin: 0;
          color: #666;
          font-weight: 400;
        }
      }

      .loading-progress {
        position: relative;
        z-index: 1;
        width: 100%;

        .progress-bar {
          width: 100%;
          height: 6px;
          background: #f0f0f0;
          border-radius: 3px;
          overflow: hidden;
          position: relative;

          .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ab0a3d, #d4145a);
            border-radius: 3px;
            animation: progress 3s ease-in-out;
          }
        }
      }
    }
  }
}

// 动画效果
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes progress {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>
