<template>
  <BasicLayout>
    <view class="course-detail">
      <!-- 课程信息卡片 -->
      <view class="info-card">
        <view class="card-title">课程信息</view>
        <view class="divider"></view>

        <view class="course-info">
          <image
            class="course-image"
            :src="courseDetail.xkkcImg"
            mode="aspectFill"
          ></image>

          <view class="course-content">
            <view class="course-name">{{ courseDetail.title }}</view>
            <view class="course-teacher"
              >开课老师：{{ courseDetail.teacher }}</view
            >
            <view class="course-location"
              >上课地点：{{ courseDetail.location }}</view
            >
            <view class="course-time"
              >上课时间：{{ courseDetail.studyTime }}</view
            >
            <view class="course-price">
              金额：<text class="price-value">¥{{ courseDetail.price }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 老师信息卡片 -->
      <view class="info-card">
        <view class="card-title">老师信息</view>
        <view class="divider"></view>

        <view class="teacher-info">
          <!-- 教师头部信息区域 -->
          <view class="teacher-header">
            <image
              class="teacher-avatar"
              :src="teacherInfo.avatar"
              mode="aspectFill"
            ></image>
            <view class="teacher-basic-info">
              <view class="teacher-name">{{ teacherInfo.name }}</view>
              <view class="teacher-title">课程教师</view>
            </view>
          </view>

          <!-- 教师简介区域 -->
          <view class="teacher-intro-section">
            <view class="intro-title">教师简介</view>
            <view class="teacher-intro">
              <text>{{ teacherInfo.introduction }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 教学理念 -->
      <view class="info-card">
        <view class="card-title">教学理念</view>
        <view class="divider"></view>

        <view class="content-section">
          <text>{{ teachingPhilosophy }}</text>
        </view>
      </view>

      <!-- 教学计划 -->
      <view class="info-card">
        <view class="card-title">教学计划</view>
        <view class="divider"></view>

        <view class="content-section">
          <template v-if="teachingPlan && teachingPlan.length > 0">
            <view
              v-for="(phase, index) in teachingPlan"
              :key="index"
              class="teaching-phase"
            >
              <text>{{ phase }}</text>
            </view>
          </template>
          <template v-else>
            <view class="empty-data">
              <u-icon name="info-circle" color="#C8C9CC" size="18"></u-icon>
              <text>暂无教学计划</text>
            </view>
          </template>
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="flex-row items-center pb-10 pt-5">
          <u-button
            text="返回"
            class="ml-15 mr-7"
            :plain="true"
            @click="navigateBack"
          />
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { navigateBack } from "@/utils/uniapp";
import { useDataStore } from "@/store/modules/data";
import { storeToRefs } from "pinia";
import { imagUrl } from "@/utils";
import { kcjhFindKcjhByKcIdApi } from "@/api/base/server";

// 定义课程数据类型
interface CourseData {
  id?: string;
  kcmc?: string;
  jsName?: string;
  kcdd?: string;
  kcje?: number;
  studyTime?: string;
  kcjsms?: string;
  jxll?: string;
  remark?: string;
  xkkcImg?: string;
  [key: string]: any; // 允许其他字段
}

const useData = useDataStore();
const { kcData } = storeToRefs(useData);

// 教学计划 - 此处假设没有具体教学计划字段，将备注内容拆分为教学计划
const teachingPlan = ref<string[]>([]);

const courseData = kcData.value as CourseData;
if (courseData && courseData.id) {
  kcjhFindKcjhByKcIdApi({
    xkkcId: courseData.id,
  }).then((res) => {
    if (res.resultCode == 1) {
      teachingPlan.value = res.result.map(
        (item: any) => item.jhjd + ":" + item.jhms
      );
    }
  });
}

// 课程详情数据
const courseDetail = computed(() => {
  const data = (kcData.value as CourseData) || {};
  return {
    id: data.id || "",
    title: data.kcmc || "暂无课程名称",
    teacher: data.jsName || "暂无教师信息",
    location: data.kcdd || "暂无地点信息",
    price: data.kcje || 0,
    studyTime: data.studyTime || "暂无上课时间",
    xkkcImg: data.xkkcImg || "/static/images/robot-course.jpg", // 默认图片
  };
});

// 教师信息
const teacherInfo = computed(() => {
  const data = (kcData.value as CourseData) || {};
  return {
    name: data.jsName || "暂无教师信息",
    avatar: imagUrl(data.jstx), // 默认头像
    introduction: data.kcjsms || "暂无教师介绍",
  };
});

// 教学理念
const teachingPhilosophy = computed(() => {
  const data = (kcData.value as CourseData) || {};
  return data.jxll || "暂无教学理念信息";
});
</script>

<style lang="scss" scoped>
.course-detail {
  background-color: #f5f7fa;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  height: 44px;
  background-color: #2879ff;

  .nav-left {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
  }

  .nav-title {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
  }

  .nav-right {
    width: 40px;
  }
}

.info-card {
  margin: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .divider {
    height: 1px;
    background-color: #eee;
    margin-bottom: 15px;
  }
}

.course-info {
  display: flex;

  .course-image {
    width: 120px;
    height: 138px;
    border-radius: 8px;
    margin-right: 15px;
  }

  .course-content {
    flex: 1;

    .course-name {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }

    .course-teacher,
    .course-location {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }

    .course-time {
      font-size: 14px;
      color: #666;
      margin-bottom: 8px;
    }

    .course-price {
      font-size: 14px;
      color: #666;

      .price-value {
        color: #ff6b00;
        font-weight: bold;
      }
    }
  }
}

.teacher-info {
  display: flex;
  flex-direction: column;

  .teacher-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .teacher-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 15px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      border: 2px solid #fff;
    }

    .teacher-basic-info {
      .teacher-name {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin-bottom: 4px;
      }

      .teacher-title {
        font-size: 14px;
        color: #666;
        background-color: #f4f7fc;
        padding: 2px 8px;
        border-radius: 4px;
        display: inline-block;
      }
    }
  }

  .teacher-intro-section {
    width: 100%;

    .intro-title {
      font-size: 15px;
      font-weight: 500;
      color: #555;
      margin-bottom: 8px;
      padding-left: 8px;
      border-left: 3px solid #2879ff;
    }

    .teacher-intro {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
      background-color: #f8f9fc;
      padding: 12px;
      border-radius: 8px;
      text-align: justify;
    }
  }
}

.content-section {
  font-size: 14px;
  color: #666;
  line-height: 1.6;

  .teaching-phase {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .empty-data {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    color: #909399;
    font-size: 14px;
    
    text {
      margin-left: 8px;
    }
  }
}

.bottom-action {
  padding: 15px;
  margin-top: 20px;

  .back-btn {
    width: 100%;
    height: 44px;
    line-height: 44px;
    background-color: #fff;
    color: #333;
    border-radius: 22px;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }
}
</style>
