ntcri/src/views/CourseDetail.vue

<script setup>
import { ref, reactive, computed, watch } from "vue";
import { useMainStore } from "@/stores/store";
import { useRoute } from "vue-router";
import VueDatePicker from "@vuepic/vue-datepicker";
import "@vuepic/vue-datepicker/dist/main.css";
import axios from "axios";
import moment from "moment";
import Navbar from "@/components/Navbar.vue";
import CourseCard from "@/components/CourseCard.vue";

const route = useRoute();
const store = useMainStore();
const courseId = route.params.id; // 網址參數

// signUpDialog
let step = ref(1);
// let signUpDialog = ref(false);
let signUpDialog = reactive([]);

let checkConsent = ref(false);

watch(signUpDialog, (val) => {
  console.log("signUpDialog", val);
});

let groupName = ref("");
let course = reactive({
  data: [],
});
let isInner = ref("");
let isLoading = ref(false);
let isSignUpLoading = ref(false);

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "探索課程",
    disabled: false,
    href: "/course-list",
  },
  {
    title: "課程清單",
    disabled: true,
  },
]);

let courseNameId = ref(null);

// 取得資料
(async () => {
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_class_name?class_name_id=${courseId}`
    );
    course.data = response.data.classes[0];
    isInner.value = course.data.is_inner;
    console.log("courseData", course.data);
    courseNameId.value = course.data.class_name_id;
    console.log(" courseNameId.value", courseNameId.value);
    getOtherClass();

    if (course.data.group_id === 1) {
      groupName.value = "未來工藝學群";
    } else if (course.data.group_id === 2) {
      groupName.value = "技藝工藝學群";
    } else if (course.data.group_id === 3) {
      groupName.value = "生活工藝學群";
    } else if (course.data.group_id === 4) {
      groupName.value = "青年工藝學群";
    } else if (course.data.group_id === 5) {
      groupName.value = "世代工藝學群";
    } else if (course.data.group_id === 6) {
      groupName.value = "修護工藝學群";
    } else if (course.data.group_id === 7) {
      groupName.value = "跨域工藝學群";
    } else if (course.data.group_id === 8) {
      groupName.value = "線上工藝學群";
    } else if (course.data.group_id === 9) {
      groupName.value = "綠工藝希望工程";
    }
  } catch (error) {
    console.error(error);
  }
})();

let session = reactive({
  data: [],
});

// 取得場次
(async () => {
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_event?class_name_id=${courseId}`
    );
    session.data = response.data.classes;
    console.log("session.data", session.data);
    console.log("response", response.data.classes[0]);
  } catch (error) {
    console.error(error);
  }
})();

let other = reactive({
  classes: [],
});

// 取得清單
async function getOtherClass() {
  isLoading.value = true;
  // let number = Math.floor(Math.random() * 300) + 1; // 在 1-300 間取一個隨機正整數
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_class_name?is_check=1&category=${course.data.category}&page_num=1&page_amount=4`
    );
    console.log("其他 response", response);
    other.classes = response.data.classes.filter(
      (item) => item.class_name_id !== courseNameId.value
    ); // 移除當前課程(保留3筆)
    // other.classes = response.data.classes;
    isLoading.value = false;
  } catch (error) {
    console.error(error);
  }
}

const dynamicCols = computed(() => {
  return isInner.value === 0 ? "5" : "8";
});

let user = reactive({
  name: "",
  user_name: "",
  birthday: "",
  gender: "",
  phone: "",
  address: "",
});

function closeSignUpDialog() {
  for (let index = 0; index < signUpDialog.length; index++) {
    signUpDialog[index] = false;
  }
  checkConsent.value = false;
  step.value = 1;
}

// 取得報名資料
async function signUp(index) {
  let isLogin = store.checkToken();
  let token = store.token;
  console.log("isLogin", isLogin);

  if (isLogin && token) {
    signUpDialog[index] = true;
    let response = await axios.get(
      `https://cmm.ai:8088/api/get_user_information?get_all=0&get_detail_information=1&access_token=${token}`
    );
    console.log("response.data user_inform", response.data);
    Object.keys(response.data.user_inform[0]).forEach((key) => {
      if (user[key] !== undefined) {
        user[key] = response.data.user_inform[0][key];
      }
    });

    // 判斷手機格式
    const phoneSplit = response.data.user_inform[0].phone.split(" ");

    if (phoneSplit.length === 1) {
      user.phone = phoneSplit[0];
    } else if (phoneSplit.length === 2) {
      user.phone = phoneSplit[1];
    }

    console.log("response", response);
  } else {
    signUpDialog[index] = false;
    store.openLoginDialog();
  }
}

let birthdayError = ref(false);
let resultCard = reactive({
  text: "",
  icon: "",
  color: "",
});

// 確認報名
async function signUpSubmit(id) {
  let token = store.token;
  isSignUpLoading.value = true;

  if (!user.birthday || user.birthday === "") {
    birthdayError.value = true;
    // isSignUpLoading.value = false;
  } else {
    birthdayError.value = false;
    // isSignUpLoading.value = false;
  }

  // 檢查欄位是否有空值
  for (const value of Object.values(user)) {
    if (!value) {
      isSignUpLoading.value = false;
      return;
    }
  }

  console.log("token", token);

  const formData = new FormData();
  formData.append("event_id", id);

  try {
    const response = await axios.post(
      `https://cmm.ai:8088/api/input_registration?access_token=${token}`,
      formData
    );
    console.log("確認報名", response);
    isSignUpLoading.value = false;

    if (response.data.msg === "success") {
      resultCard.text = "報名成功！";
      resultCard.icon = "mdi-check-circle";
      resultCard.color = "success";
      step.value++;
    } else if (response.data.msg === "already registrate") {
      resultCard.text = "已報名過此課程";
      resultCard.icon = "mdi-information";
      resultCard.color = "info";
      step.value++;
    } else {
      resultCard.text = response.data.msg;
      resultCard.icon = "mdi-information";
      resultCard.color = "info";
      step.value++;
    }

    // if (response.data.msg === "already registrate") {
    //   resultCard.text = "此課程已報名";
    //   resultCard.icon = "mdi-information";
    //   resultCard.color = "info";
    //   step.value++;
    // } else if (response.data.msg === "class is full") {
    //   resultCard.text = "報名已額滿";
    //   resultCard.icon = "mdi-information";
    //   resultCard.color = "info";
    //   step.value++;
    // } else if (response.data.code === 200) {
    //   resultCard.text = "報名成功！";
    //   resultCard.icon = "mdi-check-circle";
    //   resultCard.color = "success";
    //   step.value++;
    // }
  } catch (error) {
    console.error(error);
  }
}

// 開啟登入視窗
// function openLoginDialog() {
//   store.loginDialog = true;
// }

let currentTitle = computed(() => {
  switch (step.value) {
    case 1:
      return "報名同意書";
    case 2:
      return "課程報名表";
  }
});

// 判斷報名時間是否已截止
function isDateExpired(dateString) {
  const registrationEndDate = new Date(dateString);
  // 獲取當前時間
  const currentDate = new Date();

  console.log("registrationEndDate", registrationEndDate);
  console.log("currentDate", currentDate);

  if (registrationEndDate > currentDate) {
    return true; // 日期已過期
  } else {
    return false; // 日期未過期
  }
}
</script>

<template>
  <Navbar />

  <v-container class="mt-16 course-detail">
    <v-breadcrumbs
      :items="breadcrumbs"
      divider="/"
      class="mt-3 mb-16 pa-0"
    ></v-breadcrumbs>

    <v-row class="justify-center">
      <v-col cols="3" class="title pa-0">
        <img
          src="@/assets/img/course/detail-background.png"
          alt="臺灣工藝學校全球學習共享平台"
          class="bg-img"
        />
        <h2>{{ course.data.name }}</h2>
      </v-col>
      <v-col :cols="dynamicCols" class="pa-0 d-flex justify-center">
        <img
          :src="store.getImageSrc(course.data)"
          alt="臺灣工藝學校全球學習共享平台"
          class="cover-img"
          :class="{ small: isInner === 0 }"
        />
      </v-col>
      <v-col cols="12">
        <div class="info">
          <table>
            <thead>
              <tr>
                <th colspan="2">課程資訊</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>課程主題</td>
                <td>{{ course.data.name }}</td>
              </tr>
              <tr>
                <td>課程簡介</td>
                <td v-html="store.formatString(course.data.introduction)"></td>
              </tr>
              <tr v-show="course.data.category !== ''">
                <td>課程類別</td>
                <td>
                  {{
                    course.data.group_id === 9
                      ? course.data.group_sort
                      : course.data.category
                  }}
                </td>
              </tr>
              <tr>
                <td>課程地點</td>
                <td>{{ course.data.address }}</td>
              </tr>
              <tr v-if="course.data.organizer !== ''">
                <td>主辦單位</td>
                <td>
                  {{
                    course.data.group_id === 9
                      ? course.data.location_name
                      : course.data.organizer
                  }}
                </td>
              </tr>
              <!-- <tr>
                <td>課程地點</td>
                <td>{{ course.data.address }}</td>
              </tr> -->
              <tr>
                <td>所屬學群</td>
                <td>{{ groupName }}</td>
              </tr>
              <!-- <tr>
                <td>報名對象</td>
                <td></td>
              </tr> -->
              <!-- <tr>
                <td>收費方式</td>
                <td></td>
              </tr> -->
              <!-- <tr>
                <td>報名方式</td>
                <td></td>
              </tr> -->
              <tr
                v-if="
                  isInner !== 0 &&
                  session.data.length &&
                  session.data[0]?.contact !== '' &&
                  course.data.group_id !== 9
                "
              >
                <td>聯絡方式</td>
                <td>{{ session.data[0]?.contact }}</td>
              </tr>
              <tr
                v-if="
                  isInner !== 0 &&
                  session.data.length &&
                  session.data[0]?.fee_payment !== null
                "
              >
                <td>繳費方式</td>
                <td>
                  {{ session.data[0]?.fee_payment }}
                  <span
                    v-if="session.data[0]?.fee_payment === '匯款'"
                    class="text-red"
                  >
                    （匯款後請主動來電告知姓名與帳號後五碼）
                  </span>
                </td>
              </tr>
              <tr v-if="isInner === 0">
                <td>備註</td>
                <td>此課程不會登錄至學習護照中</td>
              </tr>
            </tbody>
          </table>
          <div class="d-flex justify-end">
            <v-btn v-if="isInner === 0" rounded="xl" color="brown">
              <a :href="session.data[0]?.URL" target="_blank"
                >觀看課程資訊與報名</a
              >
            </v-btn>
            <!-- <v-btn v-else rounded="xl" color="brown">附件下載</v-btn> -->
          </div>
        </div>
      </v-col>
      <v-col
        cols="12"
        v-if="isInner !== 0 && session.data.length"
        :class="{
          hide: course.data.special_class_list_name === 'one_day_class',
        }"
      >
        <div class="sessions mb-16">
          <table>
            <thead>
              <tr>
                <th>場次名稱</th>
                <th>開始／結束時間</th>
                <th v-show="session.data[0].location" style="width: 200px">
                  課程教室
                </th>
                <th>課程費用</th>
                <th>課程名額</th>
                <th>講師</th>
                <th>報名截止日</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in session.data" :key="index">
                <td width="20%">{{ item.class_name }}</td>
                <td width="20%">
                  {{
                    moment(`${item.start_time}`)
                      .utcOffset(0)
                      .format("YYYY/MM/DD HH:mm")
                  }}
                  <br />
                  ～ <br />
                  {{
                    moment(`${item.end_time}`)
                      .utcOffset(0)
                      .format("YYYY/MM/DD HH:mm")
                  }}
                </td>
                <td v-show="item.location !== ''">
                  {{ item.location }}
                </td>
                <td>{{ item.fee_method }}</td>
                <td>{{ item.number_limit }}</td>
                <td>{{ item.lecturer }}</td>
                <td>
                  <span
                    v-if="item.registration_end && item.registration_end !== ''"
                  >
                    {{
                      moment(`${item.registration_end}`)
                        .utcOffset(0)
                        .format("YYYY/MM/DD HH:mm")
                    }}
                  </span>
                  <span v-else>無</span>
                </td>
                <td>
                  <v-btn v-if="isInner === 0" rounded="xl" color="brown">
                    <a :href="item.URL" target="_blank">報名</a>
                  </v-btn>

                  <v-dialog
                    v-else
                    width="auto"
                    class="pa-0 signup-dialog"
                    scrollable
                    persistent
                  >
                    <template v-slot:activator="{ props }">
                      <v-btn
                        v-if="isDateExpired(item.registration_end)"
                        @click="signUp(index)"
                        v-bind="props"
                        text="報名"
                        rounded="xl"
                        color="brown"
                      >
                      </v-btn>
                      <v-btn
                        v-else
                        text="已截止"
                        rounded="xl"
                        color="brown"
                        disabled
                      >
                      </v-btn>
                    </template>

                    <template v-slot:default="{ isActive }">
                      <v-card class="mx-auto pa-3" max-width="1000">
                        <v-card-title
                          class="text-h6 font-weight-regular justify-space-between"
                        >
                          <v-avatar
                            v-if="step !== 3"
                            color="primary"
                            size="26"
                            v-text="step"
                            class="me-3"
                          ></v-avatar>
                          <span>{{ currentTitle }}</span>
                        </v-card-title>

                        <v-window v-model="step">
                          <v-window-item :value="1">
                            <v-card-text>
                              <section class="consent">
                                <h4 class="text-center">個人資料使用同意書</h4>
                                <p>
                                  臺灣工藝學校全球學習共享平台〈以下簡稱工藝中心〉因辦理
                                  <span class="font-weight-medium"
                                    >【{{ item.class_name }}】</span
                                  >
                                  業務而獲取您的個人資料：姓名、連絡方式〈包括但不限於電話號碼、E-MAIL、居住或工作地址〉等得以直接或間接識別您個人之資料。若您所提供之個人資料，經檢舉或工藝中心發現不足以確認您的身分真實性或其他個人資料冒用、盜用、資料不實等情形，工藝中心有權暫時停止提供對您的服務。
                                </p>

                                <p>
                                  工藝中心將基於個人資料保護法及相關法令之規定下，依隱私權保護政策，蒐集、處理及利用您的個人資料。您同意工藝中心以您所提供的個人資料確認您的身份、與您進行連絡、提供您相關服務及資訊，以及其他隱私權保護政策規範之使用方式。工藝中心針對您的個人資料利用之期間，自您簽署同意起至您請求刪除個資為止。
                                </p>

                                <p>
                                  您可依個人資料保護法，就您的個人資料向工藝中心進行查詢或請求閱覽、請求給複製本、請求補充或更正、請求停止蒐集及處理與利用、請求刪除。但因您行使上述權利而導致工藝中心相關業務對您的權益產生減損時，工藝中心不負相關賠償責任。
                                </p>
                              </section>

                              <v-checkbox
                                v-model="checkConsent"
                                label="我已完全閱讀並同意以上內容"
                                color="brown"
                              ></v-checkbox>
                            </v-card-text>
                          </v-window-item>

                          <v-window-item :value="2">
                            <v-card-text class="pa-0">
                              <v-sheet class="mx-auto user-form">
                                <v-form @submit.prevent>
                                  <h2
                                    class="text-center font-weight-medium mb-8"
                                  >
                                    【{{ item.class_name }}】
                                  </h2>
                                  <v-label class="d-block">
                                    <p class="d-flex mb-5">
                                      真實姓名<span class="mark">*</span>
                                    </p>
                                    <v-text-field
                                      v-model="user.name"
                                      :rules="[
                                        (v) => !!v || '請輸入您的真實姓名',
                                      ]"
                                      density="compact"
                                      variant="outlined"
                                    ></v-text-field>
                                  </v-label>

                                  <v-label class="mt-1">
                                    <p class="d-flex mb-5">
                                      生日<span class="mark">*</span>
                                    </p>
                                  </v-label>

                                  <VueDatePicker
                                    v-model="user.birthday"
                                    :format="store.datePickerFormat"
                                    :enable-time-picker="false"
                                    :max-date="new Date()"
                                    locale="cn"
                                  ></VueDatePicker>

                                  <span
                                    v-if="birthdayError"
                                    class="birthday-error"
                                    >請選擇您的生日</span
                                  >

                                  <v-label class="d-block mt-5">
                                    <p class="d-flex mb-5">
                                      手機號碼<span class="mark">*</span>
                                    </p>
                                    <v-text-field
                                      v-model="user.phone"
                                      :rules="[
                                        (v) => !!v || '請輸入您的手機號碼',
                                      ]"
                                      density="compact"
                                      variant="outlined"
                                    ></v-text-field>
                                  </v-label>

                                  <v-label class="d-block mt-1">
                                    <p class="d-flex mb-3">
                                      性別<span class="mark">*</span>
                                    </p>

                                    <v-radio-group v-model="user.gender" inline>
                                      <v-radio
                                        label="男"
                                        value="男"
                                        color="brown"
                                      ></v-radio>
                                      <v-radio
                                        label="女"
                                        value="女"
                                        class="mx-2"
                                        color="brown"
                                      ></v-radio>
                                      <v-radio
                                        label="多元"
                                        value="多元"
                                        color="brown"
                                      ></v-radio>
                                    </v-radio-group>
                                  </v-label>

                                  <v-label class="d-block">
                                    <p class="d-flex mb-5">
                                      地址<span class="mark">*</span>
                                    </p>
                                    <v-text-field
                                      v-model="user.address"
                                      :rules="[(v) => !!v || '請輸入您的地址']"
                                      density="compact"
                                      variant="outlined"
                                    ></v-text-field>
                                  </v-label>

                                  <v-label class="d-block">
                                    <p class="d-flex mb-5">備註</p>

                                    <v-textarea
                                      placeholder="如有特殊需求或有需攜伴，請在備註欄告知老師"
                                      variant="outlined"
                                      rows="2"
                                    ></v-textarea>
                                  </v-label>

                                  <v-row class="mt-3">
                                    <v-col cols="6">
                                      <v-btn
                                        rounded
                                        class="w-100"
                                        variant="outlined"
                                        color="brown"
                                        @click="
                                          isActive.value = false;
                                          step = 1;
                                        "
                                        >取消</v-btn
                                      >
                                    </v-col>
                                    <v-col cols="6">
                                      <v-btn
                                        rounded
                                        type="submit"
                                        class="w-100"
                                        variant="flat"
                                        color="brown"
                                        :loading="isSignUpLoading"
                                        @click="signUpSubmit(item.event_id)"
                                        >確定報名</v-btn
                                      >
                                    </v-col>
                                  </v-row>
                                </v-form>
                              </v-sheet>
                            </v-card-text>
                          </v-window-item>

                          <v-window-item :value="3">
                            <v-card-text class="px-0 px-sm-2">
                              <v-sheet
                                width="300"
                                class="text-center mx-auto result-card"
                              >
                                <v-icon
                                  class="mb-5"
                                  :color="resultCard.color"
                                  :icon="resultCard.icon"
                                  size="112"
                                ></v-icon>

                                <h2 class="text-h5 mb-6">
                                  {{ resultCard.text }}
                                </h2>

                                <v-divider class="mb-7"></v-divider>

                                <v-btn
                                  class="text-none me-3"
                                  rounded
                                  width="90"
                                  color="brown"
                                  variant="outlined"
                                  @click="
                                    isActive.value = false;
                                    step = 1;
                                  "
                                >
                                  關閉
                                </v-btn>
                                <v-btn
                                  color="brown"
                                  class="text-none"
                                  rounded
                                  @click="isActive.value = false"
                                >
                                  <router-link to="/user/passport"
                                    >前往會員專區</router-link
                                  >
                                </v-btn>
                              </v-sheet>
                            </v-card-text>
                          </v-window-item>
                        </v-window>

                        <v-divider v-if="step === 1"></v-divider>

                        <v-card-actions v-if="step === 1" class="mt-2">
                          <!-- <v-btn v-if="step > 1" variant="text" @click="step--">
                            上一步
                          </v-btn> -->
                          <v-spacer></v-spacer>
                          <v-btn
                            class="me-2 px-5"
                            color="brown"
                            variant="outlined"
                            @click="isActive.value = false"
                          >
                            不同意
                          </v-btn>
                          <v-btn
                            class="px-5"
                            color="brown"
                            variant="flat"
                            :disabled="!checkConsent"
                            @click="step++"
                          >
                            我同意
                          </v-btn>
                        </v-card-actions>
                      </v-card>
                    </template>
                  </v-dialog>

                  <!-- <v-btn rounded="xl" color="brown">
                    <a v-if="isInner === 0" :href="item.URL" target="_blank"
                      >報名</a
                    >

                    <v-dialog
                      v-else
                      v-model="signUpDialog[index]"
                      width="auto"
                      scrollable
                      persistent
                      class="pa-0 signup-dialog"
                    >
                      <template v-slot:activator="{ props }">
                        <p v-bind="props" @click="signUp(index)">報名</p>
                      </template>
                      <template v-slot:default="{ isActive }">
                        <v-card class="mx-auto pa-3" max-width="1000">
                          <v-card-title
                            class="text-h6 font-weight-regular justify-space-between"
                          >
                            <v-avatar
                              v-if="step !== 3"
                              color="primary"
                              size="26"
                              v-text="step"
                              class="me-3"
                            ></v-avatar>
                            <span>{{ currentTitle }}</span>
                          </v-card-title>

                          <v-window v-model="step">
                            <v-window-item :value="1">
                              <v-card-text>
                                <section class="consent">
                                  <h4 class="text-center">
                                    個人資料使用同意書
                                  </h4>
                                  <p>
                                    臺灣工藝學校全球學習共享平台〈以下簡稱工藝中心〉因辦理
                                    <span class="font-weight-medium"
                                      >【{{ item.class_name }}】</span
                                    >
                                    業務而獲取您的個人資料：姓名、連絡方式〈包括但不限於電話號碼、E-MAIL、居住或工作地址〉等得以直接或間接識別您個人之資料。若您所提供之個人資料，經檢舉或工藝中心發現不足以確認您的身分真實性或其他個人資料冒用、盜用、資料不實等情形，工藝中心有權暫時停止提供對您的服務。
                                  </p>

                                  <p>
                                    工藝中心將基於個人資料保護法及相關法令之規定下，依隱私權保護政策，蒐集、處理及利用您的個人資料。您同意工藝中心以您所提供的個人資料確認您的身份、與您進行連絡、提供您相關服務及資訊，以及其他隱私權保護政策規範之使用方式。工藝中心針對您的個人資料利用之期間，自您簽署同意起至您請求刪除個資為止。
                                  </p>

                                  <p>
                                    您可依個人資料保護法，就您的個人資料向工藝中心進行查詢或請求閱覽、請求給複製本、請求補充或更正、請求停止蒐集及處理與利用、請求刪除。但因您行使上述權利而導致工藝中心相關業務對您的權益產生減損時，工藝中心不負相關賠償責任。
                                  </p>
                                </section>

                                <v-checkbox
                                  v-model="checkConsent"
                                  label="我已完全閱讀並同意以上內容"
                                  color="brown"
                                ></v-checkbox>
                              </v-card-text>
                            </v-window-item>

                            <v-window-item :value="2">
                              <v-card-text class="pa-0">
                                <v-sheet class="mx-auto user-form">
                                  <v-form @submit.prevent>
                                    <h2
                                      class="text-center font-weight-medium mb-8"
                                    >
                                      【{{ item.class_name }}】
                                    </h2>
                                    <v-label class="d-block">
                                      <p class="d-flex mb-5">
                                        真實姓名<span class="mark">*</span>
                                      </p>
                                      <v-text-field
                                        v-model="user.name"
                                        :rules="[
                                          (v) => !!v || '請輸入您的真實姓名',
                                        ]"
                                        density="compact"
                                        variant="outlined"
                                      ></v-text-field>
                                    </v-label>

                                    <v-label class="mt-1">
                                      <p class="d-flex mb-5">
                                        生日<span class="mark">*</span>
                                      </p>
                                    </v-label>

                                    <VueDatePicker
                                      v-model="user.birthday"
                                      :format="store.datePickerFormat"
                                      :enable-time-picker="false"
                                      :max-date="new Date()"
                                      locale="cn"
                                    ></VueDatePicker>

                                    <span
                                      v-if="birthdayError"
                                      class="birthday-error"
                                      >請選擇您的生日</span
                                    >

                                    <v-label class="d-block mt-5">
                                      <p class="d-flex mb-5">
                                        手機號碼<span class="mark">*</span>
                                      </p>
                                      <v-text-field
                                        v-model="user.phone"
                                        :rules="[
                                          (v) => !!v || '請輸入您的手機號碼',
                                        ]"
                                        density="compact"
                                        variant="outlined"
                                      ></v-text-field>
                                    </v-label>

                                    <v-label class="d-block mt-1">
                                      <p class="d-flex mb-3">
                                        性別<span class="mark">*</span>
                                      </p>

                                      <v-radio-group
                                        v-model="user.gender"
                                        inline
                                      >
                                        <v-radio
                                          label="男"
                                          value="男"
                                          color="brown"
                                        ></v-radio>
                                        <v-radio
                                          label="女"
                                          value="女"
                                          class="mx-2"
                                          color="brown"
                                        ></v-radio>
                                        <v-radio
                                          label="多元"
                                          value="多元"
                                          color="brown"
                                        ></v-radio>
                                      </v-radio-group>
                                    </v-label>

                                    <v-label class="d-block">
                                      <p class="d-flex mb-5">
                                        地址<span class="mark">*</span>
                                      </p>
                                      <v-text-field
                                        v-model="user.address"
                                        :rules="[
                                          (v) => !!v || '請輸入您的地址',
                                        ]"
                                        density="compact"
                                        variant="outlined"
                                      ></v-text-field>
                                    </v-label>

                                    <v-label class="d-block">
                                      <p class="d-flex mb-5">備註</p>

                                      <v-textarea
                                        placeholder="如有特殊需求或有需攜伴，請在備註欄告知老師"
                                        variant="outlined"
                                        rows="2"
                                      ></v-textarea>
                                    </v-label>

                                    <v-row class="mt-3">
                                      <v-col cols="6">
                                        <v-btn
                                          rounded
                                          class="w-100"
                                          variant="outlined"
                                          color="brown"
                                          @click="closeSignUpDialog()"
                                          >取消</v-btn
                                        >
                                      </v-col>
                                      <v-col cols="6">
                                        <v-btn
                                          rounded
                                          type="submit"
                                          class="w-100"
                                          variant="flat"
                                          color="brown"
                                          :loading="isSignUpLoading"
                                          @click="signUpSubmit(item.event_id)"
                                          >確定報名</v-btn
                                        >
                                      </v-col>
                                    </v-row>
                                  </v-form>
                                </v-sheet>
                              </v-card-text>
                            </v-window-item>

                            <v-window-item :value="3">
                              <v-card-text class="px-0 px-sm-2">
                                <v-sheet
                                  width="300"
                                  class="text-center mx-auto result-card"
                                >
                                  <v-icon
                                    class="mb-5"
                                    :color="resultCard.color"
                                    :icon="resultCard.icon"
                                    size="112"
                                  ></v-icon>

                                  <h2 class="text-h5 mb-6">
                                    {{ resultCard.text }}
                                  </h2>

                                  <v-divider class="mb-7"></v-divider>

                                  <v-btn
                                    class="text-none me-3"
                                    rounded
                                    width="90"
                                    color="brown"
                                    variant="outlined"
                                    @click="closeSignUpDialog()"
                                  >
                                    關閉
                                  </v-btn>
                                  <v-btn
                                    color="brown"
                                    class="text-none"
                                    rounded
                                    @click="closeSignUpDialog()"
                                  >
                                    <router-link to="/user/passport"
                                      >前往會員專區</router-link
                                    >
                                  </v-btn>
                                </v-sheet>
                              </v-card-text>
                            </v-window-item>
                          </v-window>

                          <v-divider v-if="step === 1"></v-divider>

                          <v-card-actions v-if="step === 1" class="mt-2">
                            <v-spacer></v-spacer>
                            <v-btn
                              class="me-2 px-5"
                              color="brown"
                              variant="outlined"
                              @click="signUpDialog[index] = false"
                            >
                              不同意
                            </v-btn>
                            <v-btn
                              class="px-5"
                              color="brown"
                              variant="flat"
                              :disabled="!checkConsent"
                              @click="step++"
                            >
                              我同意
                            </v-btn>
                          </v-card-actions>
                        </v-card>
                      </template>
                    </v-dialog>
                  </v-btn> -->
                </td>
                <!-- <td style="width: 0; padding: 0; border: none">
                  <div class="signup-btn">
                    <v-btn rounded="xl" color="brown">
                      <span @click="signUp()">點我報名 a</span>
                    </v-btn>
                  </div>
                </td> -->
              </tr>
            </tbody>
          </table>
        </div>
      </v-col>
      <v-col v-if="other.classes.length" cols="12" class="mb-16">
        <p class="other-title">其他推薦課程</p>
        <div class="d-flex justify-center mb-10" v-if="isLoading">
          <v-progress-circular
            color="grey-lighten-4"
            indeterminate
          ></v-progress-circular>
        </div>
        <v-row>
          <v-col
            sm="6"
            md="4"
            cols="12"
            v-for="(item, index) in other.classes"
            :key="index"
            class="pa-5"
          >
            <CourseCard :data="item" />
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss">
.v-window {
  overflow-y: auto;
}

.hide {
  display: none !important;
}

.course-detail {
  .cover-img {
    // width: 100%;
    height: 100%;
    max-height: 25em;
    object-fit: cover;
    &.small {
      width: auto;
      height: auto;
    }
  }

  .title {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h2 {
      margin-top: -2.1875em;
      margin-left: 0.3125em;
      font-size: 1.5em;
      font-weight: 500;
      line-height: 2em;
      letter-spacing: 0.0625em;
      color: #201715;
    }
    .bg-img {
      width: 15.625em;
      position: absolute;
      z-index: -1;
      right: -0.9375em;
      bottom: -6.25em;
    }
  }

  .info {
    margin: 3.125em auto;
    padding: 1.5625em 3.125em;
    table {
      td {
        padding: 25px 25px 0;
        line-height: 2em;
        letter-spacing: 0.0625em;
        vertical-align: top;
        white-space: pre-line; // 顯示換行標籤
        &:first-child {
          border-right: 0.0625em solid #333;
        }

        strong {
          font-weight: 500;
        }
      }
      th {
        padding-bottom: 1.25em;
        border-bottom: 0.0625em solid #333;
      }
      th,
      td:first-child {
        width: 7.3125em;
        font-size: 1.125em;
        font-weight: 500;
      }
    }
  }

  .info,
  .sessions {
    background-color: #f2f2f4;
    table {
      width: 100%;
      border-collapse: collapse;
      td {
        line-height: 1.875em;
      }
    }
  }

  .sessions {
    padding: 1.5em 1.5em 0.5em;
    letter-spacing: 0.1em;
    overflow-x: scroll;
    table {
      width: 100%;
      position: relative;

      @media (max-width: 1280px) {
        width: 1000px;
      }

      th {
        width: 7.3125em;
        font-size: 1.125em;
        font-weight: 500;
        padding-bottom: 1.25em;
      }
      td {
        padding: 1em;
        text-align: center;
        vertical-align: middle;
      }
      tbody {
        background-color: #fff;
      }
    }

    .signup-btn {
      position: absolute;
      bottom: -3.3125em;
      right: 0;
    }
  }

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

  .other-title {
    margin: 1.875em 0;
    padding-bottom: 1.875em;
    font-size: 1.625em;
    text-align: center;
    border-bottom: 0.0625em solid;
  }
}

.user-form {
  width: 37.5em;
  padding: 0 1.875em 1.875em;
  // box-shadow: 0.0625em 0.0625em 0.5em #ccc;
  // border-radius: 0.3125em;
  // margin: 0 0.9375em 0.9375em;

  @media (max-width: 600px) {
    width: 100%;
    padding: 0;
  }

  h2 {
    font-size: 1.125em;
  }

  .result-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .birthday-error {
    display: block;
    font-size: 0.75em;
    color: #b00020;
    margin-left: 0.9375em;
    padding-top: 0.3125em;
  }
}

.signup-dialog {
  .v-card-text {
    @media (max-width: 600px) {
      overflow-y: auto;
      max-height: 31.25em;
    }
  }
}

.consent {
  max-width: 50em;
  padding: 1.875em 1.25em;
  border: 0.0625em solid #909090;
  border-radius: 0.3125em;
  h4 {
    font-size: 1.125em;
    font-weight: 400;
    margin-bottom: 1.25em;
  }
  p {
    margin-top: 1.25em;
    font-size: 1em;
    line-height: 1.625em;
  }
}
</style>