<script setup>
import { reactive } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import Navbar from "@/components/NavbarSub.vue";

const route = useRoute();
const courseId = route.params.id; // 網址參數
const course = reactive({
  data: [],
});

// 取得課程資訊
(async function getData() {
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_class_name?class_name_id=${courseId}`
    );
    course.data = response.data.classes[0];
    console.log("courseData", course.data);
  } catch (error) {
    console.error(error);
  }
})();
</script>

<template>
  <Navbar />

  <v-container class="mt-16 course-detail">
    <v-row>
      <v-col cols="12">
        <img :src="`https://cmm.ai/ntcri/${course.data.cover_img}`" alt="" />
      </v-col>
      <v-col cols="12">
        <div class="h-100 d-flex flex-column">
          <h2>{{ course.data.name }}</h2>
          <section>
            <h4 class="mb-5">課程簡介：</h4>
            <p class="mb-5">
              {{ course.data.introduction }}
            </p>
          </section>
        </div>
      </v-col>
      <v-col cols="12">
        <p>
          {{ course.data.content }}
        </p>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss">
.course-detail {
  width: 1000px;

  @media (max-width: 991px) {
    width: 100%;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  h2 {
    padding: 20px;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    background-color: var(--main-color);
    letter-spacing: 2px;
  }
  section {
    height: 100%;
    padding: 30px;
    border: 2px solid var(--main-color);
    h4 {
      font-weight: normal;
    }
  }
  p {
    line-height: 30px;
    white-space: pre-line;
  }
}
</style>
