ntcri/src/views/Courses/Create.vue

<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { useMainStore } from "@/stores/store";
// import { Loader } from "@googlemaps/js-api-loader";
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";

const store = useMainStore();
const token = store.token;
console.log("token", token);

let step = ref(1);
let stepTitle = ref("");
let stepDescription = ref("");
let loading = ref(false);

const computedTitle = computed(() => {
  switch (step.value) {
    case 1:
      stepTitle.value = "Step1 選擇據點";
      stepDescription.value = "創建課程之前，請先選擇您的據點（上課地址）";
      break;
    case 2:
      stepTitle.value = "Step2 選擇工藝教育者";
      stepDescription.value =
        "開始打造屬於您的工藝履歷，讓學徒對你印象深刻吧！";
      break;
    case 3:
      stepTitle.value = "Step3 創建課程";
      stepDescription.value =
        "完整且清楚的課程建立，是連接工藝老師與學徒的重要橋梁！";
      break;
    case 4:
      stepTitle.value = "恭喜您完成創建課程！";
      stepDescription.value = "";
      break;
  }
  return { stepTitle: stepTitle.value, stepDescription: stepDescription.value };
});

let date = reactive({
  start_date: "", // 起始日期
  start_time: "", // 起始時間
  end_date: "", // 結束日期
  end_time: "", // 結束時間
  registration_start_date: "", // 報名起始日期
  registration_start_time: "", // 報名起始時間
  registration_end_date: "", // 報名截止日期
  registration_end_time: "", // 報名截止時間
});

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "我要開課",
    disabled: false,
    href: "/setup-courses",
  },
  {
    title: "創建課程",
    disabled: true,
  },
]);

// // Google Map
// const states = reactive({
//   google: null,
//   map: null,
//   markers: null,
// });

// const initMap = async () => {
//   const loader = new Loader({
//     apiKey: "AIzaSyClxiB7zcQDyGaB1r3Ww_VQG950AtjVoAk",
//     version: "weekly",
//     libraries: ["places"],
//     language: "zh-TW",
//   });
//   states.google = await loader.load();
//   states.map = new states.google.maps.Map(document.getElementById("map"), {
//     center: { lat: 25.0425, lng: 121.5468 },
//     zoom: 11,
//     mapTypeControl: false,
//     fullscreenControl: false,
//   });
// };

// onMounted(async () => {
//   await initMap();
// });

let location = reactive({
  location_name: "",
  Lng: "",
  Lat: "",
  address: "",
  school_introduction: "",
  email: "",
  phone: "",
  access_token: token,
});

let locationId = ref("");

// async function insertSchool() {
//   // 若已選擇據點則不需新增
//   if (schoolId.value !== "") {
//     locationId.value = schoolId.value;
//     return;
//   }

//   const formData = new FormData();
//   for (const key in location) {
//     formData.append(key, location[key]);
//   }

//   try {
//     const response = await axios.post(
//       "https://cmm.ai:8088/api/insert_school",
//       formData
//     );

//     locationId.value = response.data.location_id;
//     console.log("新增據點 response", response);
//   } catch (error) {
//     console.error(error);
//   }
// }

let resume = reactive({
  teacher_name: "", // 老師姓名
  work_type: "", // 工作性質
  experience: "", // 教學經驗
  expertise: "", // 專長工藝技能
  license: "", // 工藝相關證照
  media: "", // 社群媒體
  files: [], // 作品集
  introduction: "", // 老師介紹
});

let resumeList = ref([]);
let resumeDialog = ref(false);

// 新增工藝教育者履歷
async function insertResume() {
  const validationResult = await resumeForm.value.validate();

  // 驗證表單
  if (validationResult.valid) {
    resumeList.value.push(JSON.parse(JSON.stringify(resume)));
    alert("新增成功！");
    resumeDialog.value = false;

    // 清空表單的值
    for (const key in resume) {
      if (resume.hasOwnProperty(key)) {
        resume[key] = "";
      }
    }
  } else {
    return;
  }
}

// let oldFile = "";

// async function insertUserResume() {
//   if (portfolioImg.value.length) {
//     resume.files = portfolioImg.value;
//   }

//   const formData = new FormData();
//   for (const key in resume) {
//     if (key === "files") {
//       resume.files.forEach((file) => {
//         formData.append("files", file);
//       });
//     } else {
//       formData.append(key, resume[key]);
//     }
//   }

//   let token = store.token;

//   try {
//     const response = await axios.post(
//       `https://cmm.ai:8088/api/input_user_resume?access_token=${token}&old_file=${oldFile}`,
//       formData
//     );
//     console.log("新增履歷 response", response);
//   } catch (error) {
//     console.error(error);
//   }
// }

// 新增課程
let course = reactive({
  name: "", // 課程名稱
  location_id: "", // 據點編號
  category: "", // 工藝類別
  introduction: "", // 課程簡介
  syllabus: "", // 課程章節(課綱)
  organizer: "", // 主辦單位
  cover_img_file: "", // 課程圖片
  group_id: 2, // 學群編號(技藝)
  group_sort: "", // 學群細分
  special_class_list_name: "",
  recommend: 0, // 是否推薦
  is_inner: 1, // 內課課程
  is_check: 0, // 審核結果
  teachers_resume: "", // 指派工藝教育者
  access_token: token,
});

// let syllabusData = reactive({
//   title: "",
//   content: "",
// });

let section = ref("");
let sectionList = ref([]);

function addSection() {
  sectionList.value.push(section.value);
  section.value = "";
}

watch(location, (data) => {
  course.organizer = data.location_name; // 據點名稱 = 主辦單位
});

let classNameId = ref("");

async function insertClassName() {
  course.location_id = locationId.value;
  course.organizer = locationData.value.location_name;
  course.teachers_resume = JSON.stringify(assignTeachers.list);
  course.syllabus = JSON.stringify(sectionList.value);

  console.log("insertClassName", course);

  if (coverImg.value !== "") {
    course.cover_img_file = coverImg.value;
  }

  const formData = new FormData();
  for (const key in course) {
    formData.append(key, course[key]);
  }

  try {
    const response = await axios.post(
      "https://cmm.ai:8088/api/insert_class_name",
      formData
    );

    console.log("新增課程 response", response);
    classNameId.value = response.data.new_class_name_id;
  } catch (error) {
    console.error(error);
  }
}

// 新增場次
let event = reactive({
  name_id: "", // 課程名稱編號(需先新增課程取得Id)
  event: "", // 場次名稱
  start_time: "", // 課程起始日
  end_time: "", // 課程結束日
  contact: "", // 聯絡資訊
  lecturer: "", // 課程講師
  location: "", // 教室名稱
  content: "", // 課程內容
  URL: "", // 外部連結
  people: "不拘", // 對象
  fee_method: "", // 課程價格
  fee_payment: "", // 收費方式
  registration_way: "", // 報名方式
  registration_start: "", // 報名起始日
  registration_end: "", // 報名截止日
  number_limit: "", // 課程名額
  remark: "", // 備註
  ATM_address: "", // 匯款帳號(銀行代碼+帳號)
  access_token: token,
});

let eventType = ref(""); // 課程類型
let isOneDay = ref(true); // 是否為一日課程

watch(eventType, (val) => {
  if (val === "週期課程（例：2023/10/1～2023/10/30 每週一三上課）") {
    isOneDay.value = false;
  } else {
    isOneDay.value = true;
  }
});

// 若為一日課程則起始日期 = 結束日期
watch(date, (val) => {
  if (isOneDay.value && val.start_date) {
    date.end_date = val.start_date;
  }
});

let dateReminder = ref(false);
let eventData = reactive({
  list: [],
});

let isRemit = ref(false); // 是否顯示匯款資訊欄位
let bankCode = ref(""); // 銀行代碼
let bankAccount = ref(""); // 銀行帳號

watch(event, (data) => {
  if (data.fee_payment === "匯款") {
    isRemit.value = true;
  } else {
    isRemit.value = false;
  }
});

let eventFieldValidate = ref(false); // 驗證場次欄位

function addEventData() {
  // insertSession(); // 測試
  console.log("event", event);

  let isSame = store.isSameDay(date.start_date, date.end_date);
  // 起始日期不可等於結束日期(週期課程)
  if (!isOneDay.value && isSame) {
    dateReminder.value = true;
    return;
  }
  dateReminder.value = false;

  eventForm.value.validate();

  // 檢查日期欄位
  for (const key in date) {
    if (!date[key]) {
      return;
    }
  }

  // 檢查必填欄位
  if (
    event.event === "" || // 場次名稱
    event.contact === "" || // 聯絡資訊
    event.lecturer === "" || // 課程講師
    event.people === "" || // 對象
    event.fee_method === "" || // 課程價格
    event.fee_payment === "" || // 收費方式
    event.number_limit === "" || // 課程名額
    eventType.value === "" // 課程類型
  ) {
    return;
  } else {
    eventFieldValidate.value = true;
  }

  // event.location = location.address;
  // console.log("location.address", location.address);
  console.log("event.location", event.location);

  // 處理時間格式
  event.start_time = store.mergeAndFormatDateTime(
    date.start_date,
    date.start_time
  );
  event.end_time = store.mergeAndFormatDateTime(date.end_date, date.end_time);
  event.registration_start = store.mergeAndFormatDateTime(
    date.registration_start_date,
    date.registration_start_time
  );
  event.registration_end = store.mergeAndFormatDateTime(
    date.registration_end_date,
    date.registration_end_time
  );

  if (isRemit && bankCode.value !== "" && bankAccount.value !== "") {
    event.ATM_address = `(${bankCode.value})-${bankAccount.value}`;
  }
  eventData.list.push(JSON.parse(JSON.stringify(event)));
  sessionsDialog.value = false;
}

function convertDateFormat(inputDateStr) {
  const inputDate = new Date(inputDateStr);
  const formattedDate = inputDate.toISOString();
  return formattedDate;
}

let eventId = ref(null);

async function insertEvent() {
  console.log("insertEvent", event);

  if (classNameId.value !== "") {
    event.name_id = classNameId.value;
  }

  event.start_time = convertDateFormat(event.start_time);
  event.end_time = convertDateFormat(event.end_time);
  event.registration_start = convertDateFormat(event.registration_start);
  event.registration_end = convertDateFormat(event.registration_end);

  console.log("檢查日期格式", event);

  const formData = new FormData();
  for (const key in event) {
    formData.append(key, event[key]);
  }

  try {
    const response = await axios.post(
      "https://cmm.ai:8088/api/insert_event",
      formData
    );
    eventId.value = response.data.class_id;
    console.log("eventId.value", eventId.value);
    console.log("新增場次 response", response);
  } catch (error) {
    console.error(error);
  }
}

let errorEventField = ref(false);

// 創建課程
async function create() {
  console.log("course", course);
  loading.value = true;

  // 檢查必填欄位
  courseForm.value.validate();
  console.log("course", course);

  if (
    course.name === "" ||
    course.category === "" ||
    course.introduction === "" ||
    coverImg.value === ""
  ) {
    loading.value = false;
    errorField.value = true;

    setTimeout(() => {
      errorField.value = false;
    }, 3000);

    return;
  }

  // 課程時間(場次)尚未填寫完整
  if (!eventFieldValidate.value) {
    loading.value = false;
    errorEventField.value = true;

    setTimeout(() => {
      errorEventField.value = false;
    }, 3000);

    return;
  }

  locationId.value = assignLocationId.value; // 存據點 ID

  try {
    // await insertSchool(); // 新增據點
    // await insertUserResume(); // 新增履歷
    await insertClassName(); // 新增課程
    await insertEvent(); // 新增場次
    await insertSession(); // 新增課堂

    loading.value = false;
    step.value++;
  } catch (error) {
    console.error(error);
    loading.value = false;
  }
}

const getCoordinates = async () => {
  const geocoder = new states.google.maps.Geocoder();
  geocoder.geocode({ address: location.address }, (results, status) => {
    if (status === states.google.maps.GeocoderStatus.OK) {
      location.Lat = results[0].geometry.location.lat();
      location.Lng = results[0].geometry.location.lng();
    }

    // 將地圖中心設為取得的經緯度，並調整縮放等級
    // states.map.setCenter({ lat: location.Lat, lng: location.Lng });
    // states.map.setZoom(15);

    // 設定地址圖標
    // const marker = new google.maps.Marker({
    //   position: { lat: location.Lat, lng: location.Lng },
    //   map: states.map,
    //   title: location.address,
    //   icon: store.getImageUrl("map-icon/icon_house05.png"),
    // });
  });
};

// 上傳圖片 Input
const portfolioImgRef = ref(null);
const coverImgRef = ref(null);

const fileInputClick = (ref) => {
  if (ref === "portfolio") {
    portfolioImgRef.value.click();
  } else if (ref === "cover") {
    coverImgRef.value.click();
  }
};

// 作品集圖片
let portfolioImg = ref([]);
let portfolioImgList = ref([]);

const handlePortfolioImg = (files) => {
  console.log("files", files);
  // portfolioImgList.value = []; // 清空陣列
  for (let index = 0; index < files.length; index++) {
    const file = files[index];
    console.log("file", file);
    let url = URL.createObjectURL(file);
    portfolioImgList.value.push(url);
    console.log("portfolioImgList", portfolioImgList.value);
  }
};

watch(portfolioImg, (newFiles) => {
  if (newFiles.length > 0) {
    handlePortfolioImg(newFiles);
  }
});

// 封面圖片
let coverImg = ref("");
let coverImgUrl = ref("");

const handleCoverImg = (event) => {
  const file = event.target.files[0];
  console.log("選擇檔案", file);
  if (file) {
    coverImg.value = file;
    coverImgUrl.value = URL.createObjectURL(file); // 設定圖片預覽 URL
  }
};

let sessionsDialog = ref(false);

const requiredRule = (value) => !!value || "此欄位為必填";

const weekList = reactive(["一", "二", "三", "四", "五", "六", "日"]);
const selectedWeek = ref([0, 0, 0, 0, 0, 0, 0]); // 選擇星期

const toggleSelected = (index) => {
  if (selectedWeek.value[index]) {
    selectedWeek.value[index] = 0;
  } else {
    selectedWeek.value[index] = 1;
  }
};

let session = reactive({
  class_event_id: null,
  week_day_str: "",
  start_week_time: "",
  end_week_time: "",
});

let sessionTime = reactive({
  start_week_time: [],
  end_week_time: [],
});

let sessionStartTimeList = ref(["", "", "", "", "", "", ""]);
let sessionEndTimeList = ref(["", "", "", "", "", "", ""]);

// 新增課堂
async function insertSession() {
  console.log("isOneDay.value", isOneDay.value);
  const weekString = `[${selectedWeek.value.join(",")}]`;
  session.week_day_str = weekString;

  console.log("weekString", weekString);

  selectedWeek.value.map((item, index) => {
    if (item) {
      console.log("index", index);
      // 開始時間
      sessionStartTimeList.value[index] = `"${
        sessionTime.start_week_time[index].hours < 10 ? "0" : ""
      }${sessionTime.start_week_time[index].hours}:${
        sessionTime.start_week_time[index].minutes === 0
          ? "00"
          : sessionTime.start_week_time[index].minutes
      }:00"`;

      // 結束時間
      sessionEndTimeList.value[index] = `"${
        sessionTime.end_week_time[index].hours
      }:${
        sessionTime.end_week_time[index].minutes === 0
          ? "00"
          : sessionTime.end_week_time[index].minutes
      }:00"`;
    } else {
      sessionStartTimeList.value[index] = '""';
      sessionEndTimeList.value[index] = '""';
    }
  });

  session.start_week_time = `[${sessionStartTimeList.value}]`;
  session.end_week_time = `[${sessionEndTimeList.value}]`;
  session.class_event_id = eventId.value;

  // const formData = new FormData();
  // for (const key in session) {
  //   formData.append(key, session[key]);
  // }

  let oneDayData = {
    class_event_id: session.class_event_id,
    start_time: event.start_time,
    end_time: event.end_time,
    content: "",
  };

  console.log("oneDayData", oneDayData);

  // const oneDayFormData = new FormData();
  // for (const key in oneDayData) {
  //   formData.append(key, oneDayData[key]);
  // }

  try {
    if (isOneDay.value) {
      const oneDayFormData = new FormData();
      for (const key in oneDayData) {
        oneDayFormData.append(key, oneDayData[key]);
      }

      // 一日課程
      const response = await axios.post(
        "https://cmm.ai:8088/api/insert_session",
        oneDayFormData
      );
      console.log("新增課堂(一日) response", response);
    } else {
      const formData = new FormData();
      for (const key in session) {
        formData.append(key, session[key]);
      }

      // 週期課程
      const response = await axios.post(
        "https://cmm.ai:8088/api/auto_create_session",
        formData
      );
      console.log("新增課堂(週期) response", response);
    }
    // const response = await axios.post(
    //   "https://cmm.ai:8088/api/auto_create_session",
    //   formData
    // );
    // console.log("新增課堂 response", response);
  } catch (error) {
    console.error(error);
  }
}

let schoolSelect = reactive({
  list: [],
});

let schoolId = ref("");

// 取得已有據點
(async () => {
  let token = store.token;
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_school?&access_token=${token}`
    );

    schoolSelect.list = response.data.schools;
    // 調整排序(未審核移到最後)
    schoolSelect.list.sort((a, b) => b.is_pass_proposal - a.is_pass_proposal);
    console.log("取得使用者據點", schoolSelect.list);
  } catch (error) {
    console.error(error);
  }
})();

// 監聽據點 Select
watch(schoolId, (id) => {
  console.log("schoolId", id);
  // locationId.value = id;
  handleSchoolData(id);
});

let schools = reactive({
  list: [],
});

// 帶入據點資料
async function handleSchoolData(id) {
  console.log("handleSchoolData", id);
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_school?location_id=${id}`
    );

    schools.list = response.data.schools;
    console.log("取得已有據點", schools.list);

    for (const key in schools.list[0]) {
      if (location.hasOwnProperty(key) && schools.list[0][key] !== undefined) {
        location[key] = schools.list[0][key];
      }
    }
  } catch (error) {
    console.error(error);
  }
}

/* 據點 */
let assignLocationId = ref(null);

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

let locationData = ref(null);

// 存選擇的據點 ID
function setLocationId(item) {
  console.log("setLocationId", item);
  locationData.value = item;

  console.log("locationData", locationData.value);

  if (item.is_pass_proposal === 1) {
    assignLocationId.value = item.location_id;
  }
}

const schoolForm = ref(null); // Step1 表單
const resumeForm = ref(null); // Step2 表單
const courseForm = ref(null); // Step3 表單
const eventForm = ref(null); // Step4 表單

let errorField = ref(false);

function checkField(num) {
  console.log("checkField", num);
  // step.value++;
  if (num === 1) {
    console.log("assignLocationId", assignLocationId.value);

    if (!assignLocationId.value) {
      console.log("沒有");
      errorField.value = true;

      setTimeout(() => {
        errorField.value = false;
      }, 3000);

      return;
    } else {
      getSchool(assignLocationId.value); // 取得指定據點
    }
  } else if (num === 2) {
    if (!assignTeachers.list.length) {
      errorField.value = true;

      setTimeout(() => {
        errorField.value = false;
      }, 3000);

      return;
    }
  }

  step.value++;
}

let teachers = reactive({
  list: [],
});

// 取得指定據點底下的工藝教育者履歷
async function getSchool(id) {
  console.log("getSchool", id);

  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_school?location_id=${id}`
    );

    console.log("取得據點", response);
    resumeList.value = JSON.parse(response.data.schools[0].teachers_list);
    console.log("resumeList.value", resumeList.value);
  } catch (error) {
    console.error(error);
  }
}

let teacherCheckbox = ref([]);
let assignTeachers = reactive({
  list: [],
});

/* 指派工藝教育者 */
async function assignTeacher(item, index) {
  console.log("item", item);
  console.log("index", index);

  // 檢查陣列中是否已存在相同資料
  let isDuplicate = assignTeachers.list.some(function (existingItem) {
    return (
      existingItem.teacher_name === item.teacher_name &&
      existingItem.subject === item.subject
    );
  });

  // 如無重複再新增
  if (!isDuplicate) {
    assignTeachers.list.push(item);
    teacherCheckbox.value[index] = true;
    console.log("teacherCheckbox", teacherCheckbox.value);
  } else {
    console.log("已存在");

    assignTeachers.list = assignTeachers.list.filter(
      (e) => e.teacher_name !== item.teacher_name
    );

    teacherCheckbox.value[index] = false;
  }

  console.log("assignTeachers.list", assignTeachers.list);
}
</script>

<template>
  <Navbar />

  <v-container class="mb-16 pb-16">
    <v-breadcrumbs
      :items="breadcrumbs"
      divider="/"
      class="py-10"
    ></v-breadcrumbs>

    <v-card class="mx-auto pa-5 pa-sm-10">
      <v-card-title class="step-title">
        <h5>{{ computedTitle.stepTitle }}</h5>
        <p class="mt-5">{{ computedTitle.stepDescription }}</p>
      </v-card-title>

      <v-window v-model="step">
        <v-window-item :value="1">
          <v-card-text>
            <v-form
              ref="schoolForm"
              class="school-form"
              lazy-validation
              @submit.prevent
            >
              <router-link to="/setup-courses/proposal" class="proposal-link">
                <v-icon icon="mdi-plus-circle" class="me-2"></v-icon>
                想建立新據點？請點此前往提案</router-link
              >
              <ul>
                <li v-for="(item, index) in schoolSelect.list" :key="index">
                  <div
                    class="d-flex justify-space-between"
                    @click="setLocationId(item)"
                  >
                    <div class="d-flex flex-column">
                      <span class="d-flex align-center">
                        <label :for="item.location_id" class="me-3">{{
                          item.location_name
                        }}</label>
                        <v-chip
                          v-if="item.is_pass_proposal === 1"
                          color="green"
                          text-color="white"
                        >
                          已審核
                        </v-chip>
                        <v-chip
                          v-else-if="item.is_pass_proposal === 2"
                          color="error"
                          text-color="white"
                        >
                          已駁回
                        </v-chip>
                        <v-chip v-else> 未審核 </v-chip>
                        <!-- <small>{{ item.address }}</small> -->
                      </span>
                      <small class="mt-2 text-gray">{{ item.address }}</small>
                    </div>

                    <input
                      :disabled="item.is_pass_proposal !== 1"
                      v-model="assignLocationId"
                      :true-value="item.location_id"
                      type="checkbox"
                      :id="item.location_id"
                    />
                  </div>
                </li>
              </ul>
              <!-- <div v-if="schoolSelect.list.length" class="mb-10 school-list">
                <v-label class="d-flex align-center w-100 overflow-visible">
                  <p class="pe-3">已經有據點？</p>
                  <v-select
                    v-model="schoolId"
                    label="請選擇據點"
                    :items="schoolSelect.list"
                    item-title="location_name"
                    item-value="location_id"
                    hide-details
                    density="compact"
                    variant="outlined"
                  ></v-select>
                </v-label>
              </div>

              <v-row class="justify-space-evenly">
                <v-col cols="12" md="5" class="px-0">
                  <v-label class="d-block">
                    <p class="d-flex mb-5">
                      據點名稱<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="location.location_name"
                      :rules="[requiredRule]"
                      title="據點名稱"
                      placeholder="可以是您的工作室或品牌名稱／教學單位／您的姓名"
                      density="compact"
                      variant="outlined"
                      counter
                      maxlength="60"
                    ></v-text-field>
                  </v-label>
                </v-col>

                <v-col cols="12" md="5" class="px-0">
                  <v-label class="d-block">
                    <p class="d-flex mb-5">
                      據點地址<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="location.address"
                      :rules="[requiredRule]"
                      title="據點地址"
                      density="compact"
                      variant="outlined"
                      placeholder="需在安全且便於學徒到達之地點開課"
                    ></v-text-field>
                  </v-label>
                </v-col>

                <v-col cols="12" md="5" class="px-0">
                  <v-label class="d-block">
                    <p class="d-flex mb-5">
                      據點 Email<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="location.email"
                      :rules="[requiredRule]"
                      density="compact"
                      variant="outlined"
                      placeholder="請填寫 Email"
                    ></v-text-field>
                  </v-label>
                </v-col>

                <v-col cols="12" md="5" class="px-0">
                  <v-label class="d-block">
                    <div class="d-flex">
                      <p class="d-flex mb-5">
                        公開電話<span class="mark">*</span>
                      </p>
                      <span class="d-block ms-3 hint"
                        >會顯示於課程介紹中，想了解課程資訊者聯繫用途
                      </span>
                    </div>

                    <v-text-field
                      v-model="location.phone"
                      :rules="[requiredRule]"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>

                  <span class="d-block hint"
                    >會顯示於課程介紹中，想了解課程資訊者聯繫用途
                  </span>
                </v-col>

                <v-col cols="12" md="11">
                  <v-label class="d-block">
                    <p class="d-flex mb-5">
                      據點簡介<span class="mark">*</span>
                    </p>
                    <v-textarea
                      v-model="location.school_introduction"
                      :rules="[requiredRule]"
                      rows="5"
                      variant="outlined"
                    ></v-textarea>
                  </v-label>
                </v-col>
              </v-row>

              <div class="d-flex flex-column justify-end ms-md-16 ps-md-5">
                <div
                  class="map"
                  id="map"
                  style="width: 100%; height: 31.25em"
                ></div>

                <v-row>
                  <v-col cols="12" md="6">
                    <v-label class="d-flex align-center">
                      <p class="pb-5 pe-3">經度</p>
                      <v-text-field
                        v-model="location.Lng"
                        density="compact"
                        variant="outlined"
                        disabled
                      ></v-text-field>
                    </v-label>
                  </v-col>
                  <v-col cols="12" md="6" class="py-0 py-md-3">
                    <v-label class="d-flex align-center">
                      <p class="pb-5 pe-3">緯度</p>
                      <v-text-field
                        v-model="location.Lat"
                        density="compact"
                        variant="outlined"
                        disabled
                      ></v-text-field>
                    </v-label>
                  </v-col>
                </v-row>
              </div> -->
            </v-form>
          </v-card-text>
        </v-window-item>

        <v-window-item :value="2">
          <v-card-text class="resume-content">
            <button class="resume-btn">
              <p class="d-flex flex-column align-center">
                <v-icon icon="mdi-plus" size="x-large"></v-icon>
                新增工藝教育者
              </p>

              <v-dialog v-model="resumeDialog" activator="parent" width="700">
                <v-card class="pa-5">
                  <v-card-title>工藝教育者履歷</v-card-title>
                  <v-card-text>
                    <v-form ref="resumeForm" lazy-validation @submit.prevent>
                      <v-row>
                        <v-col cols="12">
                          <v-label class="d-flex align-center">
                            <p class="pb-5 pe-3">
                              老師姓名<span class="mark">*</span>
                            </p>
                            <v-text-field
                              v-model="resume.teacher_name"
                              :rules="[requiredRule]"
                              density="compact"
                              variant="outlined"
                            ></v-text-field>
                          </v-label>
                        </v-col>

                        <!-- <v-col cols="6"></v-col> -->

                        <v-col cols="12">
                          <v-label class="d-block">
                            <p class="pb-5 pe-3">
                              工作性質<span class="mark">*</span>
                            </p>
                            <v-radio-group v-model="resume.work_type" inline>
                              <v-radio label="全職" value="全職"></v-radio>
                              <v-radio
                                label="兼職"
                                value="兼職"
                                class="ps-3"
                              ></v-radio>
                            </v-radio-group>
                          </v-label>
                        </v-col>

                        <v-col cols="12" class="py-0">
                          <v-label class="d-block">
                            <p class="pb-5 pe-3">教學經驗</p>
                            <v-radio-group v-model="resume.experience" inline>
                              <v-radio label="0-5 年" value="0-5 年"></v-radio>
                              <v-radio
                                label="5-10 年"
                                value="5-10 年"
                                class="ps-3"
                              ></v-radio>
                              <v-radio
                                label="10-20 年"
                                value="10-20 年"
                                class="ps-3"
                              ></v-radio>
                              <v-radio
                                label="20 年以上"
                                value="20 年以上"
                                class="ps-3"
                              ></v-radio>
                            </v-radio-group>
                          </v-label>
                        </v-col>

                        <v-col cols="12">
                          <v-label class="d-block">
                            <p class="pb-5 pe-3">
                              專長工藝技能<span class="mark">*</span>
                            </p>
                            <v-text-field
                              v-model="resume.expertise"
                              :rules="[requiredRule]"
                              density="compact"
                              variant="outlined"
                            ></v-text-field>
                          </v-label>

                          <v-label class="d-block">
                            <p class="pb-5 pe-3">
                              工藝相關證照<span class="mark">*</span>
                            </p>
                            <v-text-field
                              v-model="resume.license"
                              :rules="[requiredRule]"
                              density="compact"
                              variant="outlined"
                              placeholder="若無工藝相關證照請填「無」"
                            ></v-text-field>
                          </v-label>

                          <v-label class="d-block">
                            <p class="d-flex">社群媒體</p>
                            <span class="d-block py-3 hint"
                              >工藝老師經營之網站或社群媒體，可貼網址</span
                            >
                            <v-text-field
                              v-model="resume.media"
                              density="compact"
                              variant="outlined"
                            ></v-text-field>
                          </v-label>
                        </v-col>

                        <!-- <v-col cols="12">
                                <v-label class="d-block">
                                  <p class="d-flex">講師作品集</p>

                                  <v-file-input
                                    multiple
                                    v-model="portfolioImg"
                                    ref="portfolioImgRef"
                                    label="File input"
                                    variant="outlined"
                                    placeholder="選擇相片上傳"
                                    @change="handlePortfolioImg"
                                    style="display: none"
                                  ></v-file-input>
                                </v-label>

                                <v-btn
                                  @click="fileInputClick('portfolio')"
                                  color="purple"
                                  class="my-5"
                                  >選擇相片上傳</v-btn
                                >

                                <v-row class="img-list">
                                  <v-col
                                    cols="4"
                                    v-for="(item, index) in 6"
                                    :key="index"
                                  >
                                    <div
                                      v-if="!portfolioImgList.length"
                                      class="item"
                                    ></div>
                                    <div
                                      v-else
                                      class="item"
                                      :style="{
                                        backgroundImage: `url('${portfolioImgList[index]}')`,
                                      }"
                                    ></div>
                                  </v-col>
                                </v-row>
                              </v-col> -->

                        <v-col cols="12">
                          <v-label class="d-block">
                            <p class="d-flex mb-5">
                              工藝教育者介紹<span class="mark">*</span>
                            </p>
                            <v-textarea
                              v-model="resume.introduction"
                              :rules="[
                                (value) =>
                                  (value && value.length >= 50) ||
                                  '請至少輸入 50 個字元，以確保內容完整性',
                              ]"
                              rows="5"
                              variant="outlined"
                              hint="文字長度不得低於 50 個字元，最多 150 個字元"
                              maxlength="150"
                              counter
                            ></v-textarea>
                          </v-label>
                        </v-col>
                      </v-row>
                    </v-form>
                  </v-card-text>

                  <v-card-actions class="justify-center">
                    <v-spacer></v-spacer>

                    <v-btn text="取消" @click="resumeDialog = false"></v-btn>

                    <v-btn
                      @click="insertResume()"
                      color="purple"
                      variant="flat"
                    >
                      新增
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </button>
            <h6 data-v-bbf03f1f="" class="mt-10 table-title">工藝教育者履歷</h6>
            <div class="main-table">
              <!-- <h6 data-v-bbf03f1f="" class="table-title">工藝教育者履歷</h6> -->
              <table>
                <thead>
                  <tr>
                    <th>姓名</th>
                    <th>工作性質</th>
                    <th>教學經驗</th>
                    <th>專長工藝技能</th>
                    <th>工藝相關證照</th>
                    <th>社群媒體</th>
                    <th style="width: 30%">老師介紹</th>
                    <th></th>
                    <!-- <th width="15%">繳款資訊</th> -->
                  </tr>
                </thead>
                <tbody v-if="resumeList.length">
                  <!-- <tr v-if="!register.list.length">
                <p class="hint-item">
                  目前沒有報名紀錄喔！點擊開始探索您的專屬課程！
                </p>
              </tr> -->
                  <tr
                    v-for="(item, index) in resumeList"
                    :key="index"
                    @click="assignTeacher(item, index)"
                  >
                    <td>{{ item.teacher_name }}</td>
                    <td>{{ item.work_type }}</td>
                    <td>{{ item.experience }}</td>
                    <td>{{ item.expertise }}</td>
                    <td>{{ item.license }}</td>
                    <td>{{ item.media }}</td>
                    <td>
                      <v-dialog width="600">
                        <template v-slot:activator="{ props }">
                          <v-btn
                            v-bind="props"
                            text="查看"
                            variant="tonal"
                            color="purple"
                            rounded="xl"
                          >
                          </v-btn>
                        </template>

                        <template v-slot:default="{ isActive }">
                          <v-card title="老師介紹" class="pa-3">
                            <v-card-text
                              style="letter-spacing: 1px; line-height: 1.5"
                            >
                              {{ item.introduction }}
                            </v-card-text>

                            <v-card-actions class="justify-end">
                              <v-spacer></v-spacer>

                              <v-btn
                                text="關閉"
                                @click="isActive.value = false"
                              ></v-btn>
                            </v-card-actions>
                          </v-card>
                        </template>
                      </v-dialog>
                    </td>
                    <td>
                      <input
                        v-model="teacherCheckbox[index]"
                        type="checkbox"
                        class="me-5"
                      />
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </v-card-text>

          <!-- <v-row align="center" justify="center" class="mt-10 mb-16">
            <v-col
              v-for="(item, index) in teachers.list"
              :key="item"
              cols="auto"
            >
              <v-card
                @click="assignTeacher(item, index)"
                class="mx-auto pa-3 teachers-card"
                width="330"
              >
                <v-card-item>
                  <div>
                    <div
                      class="d-flex justify-space-between align-center mb-4 pe-1"
                    >
                      <h4>{{ item.teacher_name }}</h4>
                      <input
                        v-model="teacherCheckbox[index]"
                        type="checkbox"
                        name=""
                        id=""
                      />
                    </div>
                    <ul class="pt-4">
                      <li>工作性質： {{ item.work_type }}</li>
                      <li>工藝技能：{{ item.expertise }}</li>
                      <li>工藝證照：{{ item.license }}</li>
                      <li>教學經驗：{{ item.experience }}</li>
                    </ul>
                  </div>
                </v-card-item>
              </v-card>
            </v-col>
          </v-row> -->

          <!-- <v-card-text>
            <v-form ref="resumeForm" lazy-validation @submit.prevent>
              <v-row>
                <v-col cols="12" sm="6">
                  <v-label class="d-flex align-center pb-3">
                    <p class="pb-5 pe-3">老師姓名<span class="mark">*</span></p>
                    <v-text-field
                      v-model="resume.teacher_name"
                      :rules="[requiredRule]"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>
                </v-col>

                <v-col cols="6"></v-col>

                <v-col cols="12" lg="3">
                  <v-label class="d-block">
                    <p class="pb-5 pe-3">工作性質<span class="mark">*</span></p>
                    <v-radio-group v-model="resume.work_type" inline>
                      <v-radio label="全職" value="全職"></v-radio>
                      <v-radio label="兼職" value="兼職" class="ps-3"></v-radio>
                    </v-radio-group>
                  </v-label>
                </v-col>

                <v-col cols="12" lg="9">
                  <v-label class="d-block">
                    <p class="pb-5 pe-3">教學經驗</p>
                    <v-radio-group v-model="resume.experience" inline>
                      <v-radio label="0-5 年" value="0-5 年"></v-radio>
                      <v-radio
                        label="5-10 年"
                        value="5-10 年"
                        class="ps-3"
                      ></v-radio>
                      <v-radio
                        label="10-20 年"
                        value="10-20 年"
                        class="ps-3"
                      ></v-radio>
                      <v-radio
                        label="20 年以上"
                        value="20 年以上"
                        class="ps-3"
                      ></v-radio>
                    </v-radio-group>
                  </v-label>
                </v-col>

                <v-col cols="12" md="6">
                  <v-label class="d-block">
                    <p class="pb-5 pe-3">
                      專長工藝技能<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="resume.expertise"
                      :rules="[requiredRule]"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block">
                    <p class="pb-5 pe-3">工藝相關證照</p>
                    <v-text-field
                      v-model="resume.license"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block">
                    <p class="d-flex">社群媒體</p>
                    <span class="d-block py-3 hint"
                      >工藝老師經營之網站或社群媒體，可貼網址</span
                    >
                    <v-text-field
                      v-model="resume.media"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>
                </v-col>

                <v-col cols="12" md="6">
                  <v-label class="d-block">
                    <p class="d-flex">講師作品集</p>

                    <v-file-input
                      multiple
                      v-model="portfolioImg"
                      ref="portfolioImgRef"
                      label="File input"
                      variant="outlined"
                      placeholder="選擇相片上傳"
                      @change="handlePortfolioImg"
                      style="display: none"
                    ></v-file-input>
                  </v-label>

                  <v-btn
                    @click="fileInputClick('portfolio')"
                    color="purple"
                    class="my-5"
                    >選擇相片上傳</v-btn
                  >

                  <v-row class="img-list">
                    <v-col cols="4" v-for="(item, index) in 6" :key="index">
                      <div v-if="!portfolioImgList.length" class="item"></div>
                      <div
                        v-else
                        class="item"
                        :style="{
                          backgroundImage: `url('${portfolioImgList[index]}')`,
                        }"
                      ></div>
                    </v-col>
                  </v-row>
                </v-col>

                <v-col cols="12">
                  <v-label class="d-block">
                    <p class="d-flex mb-5">老師自我介紹</p>
                    <v-textarea
                      v-model="resume.introduction"
                      rows="5"
                      variant="outlined"
                    ></v-textarea>
                  </v-label>
                </v-col>
              </v-row>
            </v-form>
          </v-card-text> -->
        </v-window-item>

        <v-window-item :value="3">
          <v-card-text class="mb-7">
            <v-form ref="courseForm" lazy-validation @submit.prevent>
              <v-row class="justify-space-evenly">
                <v-col cols="12" md="6">
                  <v-row>
                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="pb-5 pe-3">
                          課程名稱<span class="mark">*</span>
                        </p>
                        <v-text-field
                          v-model="course.name"
                          :rules="[requiredRule]"
                          density="compact"
                          variant="outlined"
                        ></v-text-field>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="pb-5 pe-3">
                          工藝類別<span class="mark">*</span>
                        </p>
                        <v-select
                          v-model="course.category"
                          placeholder="請選擇類別"
                          :items="[
                            '樹藝',
                            '漆藝',
                            '藍染',
                            '蠟雕',
                            '竹工藝籃',
                            '金工/飾品',
                            '蠟燭/香氛/調香',
                            '植栽/花藝',
                            '插畫/繪畫/寫字',
                            '皮件/皮革',
                            '木工/竹藝',
                            '陶藝/玻璃',
                            '編織/羊毛氈/縫紉',
                            '其他',
                          ]"
                          :rules="[requiredRule]"
                          density="compact"
                          variant="outlined"
                        ></v-select>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="pb-5 pe-3">上課地點</p>
                        <v-text-field
                          v-model="locationData.address"
                          label="自動帶入據點地址"
                          density="compact"
                          variant="outlined"
                          disabled
                        ></v-text-field>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="pb-5 pe-3">主辦單位</p>
                        <v-text-field
                          v-model="locationData.location_name"
                          label="自動帶入據點名稱"
                          density="compact"
                          variant="outlined"
                          disabled
                        ></v-text-field>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="d-flex">
                          課程時間<span class="mark">*</span>
                        </p>

                        <v-dialog
                          v-model="sessionsDialog"
                          persistent
                          width="800"
                        >
                          <template v-slot:activator="{ props }">
                            <v-btn class="my-5" color="purple" v-bind="props">
                              <v-icon icon="mdi-plus" class="me-1"></v-icon>
                              建立新場次
                            </v-btn>
                          </template>
                          <v-card class="sessions-card pb-3">
                            <!-- <v-card-title>
                          <span class="d-block ps-10 py-5">建立新場次</span>
                        </v-card-title> -->
                            <v-card-text class="pa-8">
                              <v-form
                                ref="eventForm"
                                lazy-validation
                                @submit.prevent
                              >
                                <v-container class="py-0">
                                  <v-row>
                                    <v-col cols="12">
                                      <p class="text-h6 font-weight-bold my-3">
                                        建立新場次
                                      </p>
                                    </v-col>
                                    <!-- <v-col cols="12" sm="6" class="date-item">
                                  <p class="mb-0 pe-3">
                                    起始日期<span class="mark">*</span>
                                  </p>
                                  <VueDatePicker
                                    v-model="date.start_date"
                                    :min-date="new Date()"
                                    :enable-time-picker="false"
                                    :format="store.datePickerFormat"
                                    locale="cn"
                                  ></VueDatePicker>
                                </v-col>

                                <v-col cols="12" sm="6" class="date-item">
                                  <p class="mb-0 pe-3">
                                    起始時間<span class="mark">*</span>
                                  </p>
                                  <VueDatePicker
                                    v-model="date.start_time"
                                    time-picker
                                  />
                                </v-col>

                                <v-col cols="12" sm="6" class="date-item">
                                  <p class="mb-0 pe-3">
                                    結束日期<span class="mark">*</span>
                                  </p>
                                  <VueDatePicker
                                    v-model="date.end_date"
                                    :min-date="new Date()"
                                    :enable-time-picker="false"
                                    :format="store.datePickerFormat"
                                    locale="cn"
                                  ></VueDatePicker>
                                </v-col>

                                <v-col cols="12" sm="6" class="date-item">
                                  <p class="mb-0 pe-3">
                                    結束時間<span class="mark">*</span>
                                  </p>
                                  <VueDatePicker
                                    v-model="date.end_time"
                                    time-picker
                                  />
                                </v-col> -->

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-5 pe-3">
                                          場次名稱<span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.event"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-5 pe-3">
                                          課程講師<span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.lecturer"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-5 pe-3">
                                          聯絡資訊<span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.contact"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-5 pe-3">課程教室</p>
                                        <v-text-field
                                          v-model="event.location"
                                          density="compact"
                                          variant="outlined"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-5 pe-3">
                                          課程名額<span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.number_limit"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          type="number"
                                          placeholder="請設定報名人數上限"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-5 pe-3">
                                          最低開課人數<span class="mark"
                                            >*</span
                                          >
                                        </p>
                                        <v-text-field
                                          density="compact"
                                          variant="outlined"
                                          type="number"
                                          placeholder="請輸入開課門檻人數"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-5 pe-3">
                                          收費方式<span class="mark">*</span>
                                        </p>

                                        <v-select
                                          v-model="event.fee_payment"
                                          :items="['現場收費', '匯款']"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          outlined
                                        ></v-select>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label
                                        v-if="isRemit"
                                        class="d-flex align-center py-2"
                                      >
                                        <p class="pb-5 pe-3">
                                          匯款資訊<span class="mark">*</span>
                                        </p>

                                        <div class="d-flex w-100">
                                          <v-text-field
                                            v-model="bankCode"
                                            label="銀行代碼"
                                            :rules="[requiredRule]"
                                            density="compact"
                                            variant="outlined"
                                            style="width: 30%"
                                            class="me-3"
                                          ></v-text-field>
                                          <v-text-field
                                            v-model="bankAccount"
                                            label="匯款帳號 (10-16 碼)"
                                            :rules="[requiredRule]"
                                            density="compact"
                                            variant="outlined"
                                            style="width: 70%"
                                          ></v-text-field>
                                        </div>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-5 pe-3">
                                          課程價格<span class="mark">*</span>
                                        </p>
                                        <v-text-field
                                          v-model="event.fee_method"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          type="number"
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="pb-3 pe-3">
                                          適合對象<span class="mark pb-4"
                                            >*</span
                                          >
                                        </p>
                                        <v-textarea
                                          rows="2"
                                          variant="outlined"
                                          placeholder="ex. 不拘、18-65 歲、大專院校工藝、美術、設計科系學生、從事木作相關之業者或個人工作室"
                                          :rules="[requiredRule]"
                                        ></v-textarea>

                                        <!-- <v-select
                                      v-model="event.people"
                                      :items="[
                                        '不拘',
                                        '7 歲以下',
                                        '7-18 歲',
                                        '18-65 歲',
                                        '65 歲以上',
                                      ]"
                                      :rules="[requiredRule]"
                                      density="compact"
                                      variant="outlined"
                                      outlined
                                    ></v-select> -->
                                      </v-label>
                                    </v-col>

                                    <v-col cols="12" class="py-0">
                                      <v-label class="d-flex align-center py-2">
                                        <p class="ps-8 pe-5">備註</p>
                                        <v-text-field
                                          v-model="event.remark"
                                          density="compact"
                                          variant="outlined"
                                          hide-details
                                        ></v-text-field>
                                      </v-label>
                                    </v-col>

                                    <v-divider class="my-10"></v-divider>

                                    <v-col cols="12" class="pt-0">
                                      <p class="text-h6 font-weight-bold mb-3">
                                        課程時間
                                      </p>
                                    </v-col>

                                    <v-col
                                      cols="12"
                                      class="py-0 position-relative"
                                    >
                                      <v-label class="d-flex align-center pt-2">
                                        <p class="pb-3 pe-3">
                                          課程類型<span class="mark pb-4"
                                            >*</span
                                          >
                                        </p>
                                        <v-select
                                          v-model="eventType"
                                          :items="[
                                            '一日課程（例：2023/10/1 週一上課）',
                                            '週期課程（例：2023/10/1～2023/10/30 每週一三上課）',
                                          ]"
                                          :rules="[requiredRule]"
                                          density="compact"
                                          variant="outlined"
                                          outlined
                                        ></v-select>
                                      </v-label>

                                      <!-- <small
                                    v-show="eventType !== ''"
                                    class="type-hint"
                                    >{{
                                      isOneDay
                                        ? "例：2023/10/2 週一上課"
                                        : "例：2023/10/1～2023/10/30 每週一三上課"
                                    }}</small
                                  > -->
                                    </v-col>

                                    <v-col
                                      v-if="!isOneDay"
                                      cols="12"
                                      class="d-flex py-0"
                                    >
                                      <p class="pt-1 pe-3">
                                        重複週期<span class="mark pb-4">*</span>
                                      </p>

                                      <ul class="week-list">
                                        <li
                                          v-for="(item, index) in weekList"
                                          :key="index"
                                          @click="toggleSelected(index)"
                                          :class="{
                                            active: selectedWeek[index],
                                          }"
                                          class="d-flex"
                                        >
                                          <button class="item">
                                            {{ item }}
                                          </button>

                                          <div
                                            v-if="selectedWeek[index]"
                                            class="d-flex w-100 ms-5"
                                          >
                                            <VueDatePicker
                                              v-model="
                                                sessionTime.start_week_time[
                                                  index
                                                ]
                                              "
                                              time-picker
                                            />
                                            <span
                                              class="d-flex align-center mx-2"
                                              >～</span
                                            >
                                            <VueDatePicker
                                              v-model="
                                                sessionTime.end_week_time[index]
                                              "
                                              time-picker
                                            />
                                          </div>
                                        </li>
                                      </ul>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-0 pe-3">
                                        起始日期<span class="mark">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.start_date"
                                        :min-date="new Date()"
                                        :enable-time-picker="false"
                                        :format="store.datePickerFormat"
                                        locale="cn"
                                      ></VueDatePicker>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-0 pe-3">
                                        起始時間<span class="mark">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.start_time"
                                        time-picker
                                      />
                                    </v-col>

                                    <v-col
                                      cols="12"
                                      sm="6"
                                      class="date-item position-relative"
                                    >
                                      <p class="mb-0 pe-3">
                                        結束日期<span class="mark">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.end_date"
                                        :min-date="new Date()"
                                        :enable-time-picker="false"
                                        :format="store.datePickerFormat"
                                        locale="cn"
                                        :disabled="isOneDay"
                                      ></VueDatePicker>
                                      <span
                                        v-if="dateReminder"
                                        class="date-reminder text-error"
                                        >選擇週期課程時，起始日期與結束日期不可為同一天</span
                                      >
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-0 pe-3">
                                        結束時間<span class="mark">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.end_time"
                                        time-picker
                                      />
                                    </v-col>

                                    <!-- <v-col
                                  v-if="!isOneDay"
                                  cols="12"
                                  class="time-item pt-5 pb-7"
                                >
                                  <p class="mb-0">
                                    課程時間<span class="mark">*</span>
                                  </p>
                                  <div class="d-flex w-100">
                                    <VueDatePicker
                                      v-model="sessionTime.start_week_time"
                                      time-picker
                                    />
                                    <span class="d-flex align-center mx-2"
                                      >～</span
                                    >
                                    <VueDatePicker
                                      v-model="sessionTime.end_week_time"
                                      time-picker
                                    />
                                  </div>
                                </v-col> -->

                                    <v-divider class="my-10"></v-divider>

                                    <v-col cols="12" class="pt-0">
                                      <p class="text-h6 font-weight-bold mb-3">
                                        報名時間
                                      </p>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-0 pe-3">
                                        報名日期<span class="mark pb-4">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.registration_start_date"
                                        :enable-time-picker="false"
                                        :format="store.datePickerFormat"
                                        locale="cn"
                                      ></VueDatePicker>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-0 pe-3">
                                        報名時間<span class="mark pb-4">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.registration_start_time"
                                        time-picker
                                      />
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-0 pe-3">
                                        報名截止<span class="mark pb-4">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.registration_end_date"
                                        :enable-time-picker="false"
                                        :format="store.datePickerFormat"
                                        locale="cn"
                                      ></VueDatePicker>
                                    </v-col>

                                    <v-col cols="12" sm="6" class="date-item">
                                      <p class="mb-0 pe-3">
                                        截止時間<span class="mark pb-4">*</span>
                                      </p>
                                      <VueDatePicker
                                        v-model="date.registration_end_time"
                                        time-picker
                                      />
                                    </v-col>
                                  </v-row>
                                </v-container>
                              </v-form>
                            </v-card-text>

                            <v-card-actions class="justify-center pt-10 pb-5">
                              <v-btn
                                color="gray"
                                variant="tonal"
                                class="me-3 px-10"
                                @click="sessionsDialog = false"
                              >
                                取消
                              </v-btn>
                              <v-btn
                                color="purple"
                                variant="flat"
                                @click="addEventData()"
                                class="px-10"
                              >
                                新增
                              </v-btn>
                            </v-card-actions>
                          </v-card>
                        </v-dialog>

                        <div v-if="eventData.list.length" class="main-table">
                          <h6 class="table-title">場次資訊</h6>
                          <table>
                            <thead>
                              <tr>
                                <th>名稱</th>
                                <th>日期</th>
                                <th width="20%">課程講師</th>
                                <th width="20%">收費方式</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr
                                v-for="(item, index) in eventData.list"
                                :key="index"
                              >
                                <td>{{ item.event }}</td>
                                <td>
                                  {{
                                    moment(`${item.start_time}`).format(
                                      "YYYY/MM/DD"
                                    )
                                  }}
                                  <br />
                                  ～
                                  <br />
                                  {{
                                    moment(`${item.end_time}`).format(
                                      "YYYY/MM/DD"
                                    )
                                  }}
                                </td>
                                <td>{{ item.lecturer }}</td>
                                <td>{{ item.fee_method }}</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <p class="d-flex">
                          課程簡介<span class="mark">*</span>
                        </p>
                        <small class="d-block text-gray my-2"
                          >內容不得少於 100
                          個字元，且不得含有工藝無關之資訊</small
                        >
                        <v-textarea
                          v-model="course.introduction"
                          rows="5"
                          variant="outlined"
                          :rules="[
                            (value) =>
                              (value && value.length >= 100) ||
                              '請至少輸入 100 個字元，以確保內容完整性',
                          ]"
                          counter
                        ></v-textarea>
                      </v-label>
                    </v-col>

                    <v-col cols="12">
                      <v-label class="d-block">
                        <div class="d-flex align-center">
                          <p class="d-flex me-3">
                            課程內容 (課綱) <span class="mark">*</span>
                          </p>

                          <v-dialog width="500">
                            <template v-slot:activator="{ props }">
                              <v-btn
                                v-bind="props"
                                variant="outlined"
                                color="purple"
                                >查看範例
                              </v-btn>
                            </template>

                            <template v-slot:default="{ isActive }">
                              <v-card>
                                <v-card-text>
                                  <div class="d-flex justify-end">
                                    <v-btn
                                      @click="isActive.value = false"
                                      icon="mdi-close"
                                      variant="text"
                                    ></v-btn>
                                  </div>
                                  <ul class="section-list pa-3">
                                    <li>章節 1 — 技法示範與研磨實作，上漆</li>
                                    <li>章節 2 — 研磨實作</li>
                                    <li>章節 3 — 推光、擦漆</li>
                                    <li>章節 4 — 作品總整理</li>
                                  </ul>
                                </v-card-text>
                              </v-card>
                            </template>
                          </v-dialog>
                        </div>

                        <!-- <v-row class="my-5">
                          <v-col cols="6">
                            <v-text-field
                              v-model="syllabusData.title"
                              density="compact"
                              variant="outlined"
                              hide-details
                              placeholder="章節標題"
                            ></v-text-field>
                          </v-col>

                          <v-col cols="6">
                            <v-text-field
                              v-model="syllabusData.content"
                              density="compact"
                              variant="outlined"
                              hide-details
                              placeholder="備註內容(非必填)"
                            ></v-text-field>
                          </v-col>
                        </v-row> -->

                        <div class="d-flex my-5">
                          <div class="w-100">
                            <v-text-field
                              v-model="section"
                              density="compact"
                              variant="outlined"
                              hide-details
                              placeholder="章節標題"
                            ></v-text-field>
                            <!-- <v-textarea
                              v-model="syllabusData.content"
                              density="compact"
                              variant="outlined"
                              hide-details
                              placeholder="章節內容"
                              rows="3"
                              counter
                            ></v-textarea> -->
                          </div>

                          <v-btn
                            color="purple"
                            icon="mdi-plus"
                            size="small"
                            class="ms-5"
                            @click="addSection()"
                          ></v-btn>
                        </div>

                        <ul class="section-list">
                          <li
                            v-for="(item, index) in sectionList"
                            :key="index"
                            class="py-2"
                          >
                            <div
                              class="d-flex align-center justify-space-between"
                            >
                              <p>章節 {{ index + 1 }} — {{ item }}</p>
                              <v-btn
                                color="error"
                                icon="mdi-close"
                                variant="text"
                                size="small"
                                @click="addSection()"
                              ></v-btn>
                            </div>
                          </li>
                        </ul>

                        <!-- <ul>
                          <li v-for="(item, index) in sectionList" :key="index">
                            章節 {{ index + 1 }} — {{ item }}
                          </li>
                        </ul> -->

                        <!-- <v-textarea
                          v-model="syllabusData.content"
                          density="compact"
                          variant="outlined"
                          hide-details
                          placeholder="備註內容(非必填)"
                          rows="2"
                          counter
                        ></v-textarea> -->
                      </v-label>
                    </v-col>

                    <!-- <v-col cols="12">
                      <v-label class="d-block">
                        <p class="d-flex">章節預覽：</p>
                      </v-label>
                    </v-col> -->

                    <v-col cols="12" class="me-auto">
                      <v-label class="d-block">
                        <p class="d-flex">
                          上傳課程封面<span class="mark">*</span>
                        </p>

                        <v-file-input
                          multiple
                          v-model="coverImg"
                          ref="coverImgRef"
                          label="File input"
                          variant="outlined"
                          placeholder="選擇相片上傳"
                          @change="handleCoverImg"
                          style="display: none"
                        ></v-file-input>
                      </v-label>

                      <v-btn
                        @click="fileInputClick('cover')"
                        color="purple"
                        class="my-5"
                        >選擇相片上傳</v-btn
                      >

                      <div class="step-01 image-preview">
                        <img
                          v-if="coverImg"
                          :src="coverImgUrl"
                          alt="上傳圖片預覽"
                        />
                      </div>

                      <!-- <v-row class="img-list">
                        <v-col cols="4" v-for="(item, index) in 6" :key="index">
                          <div
                            v-if="!portfolioImgList.length"
                            class="item"
                          ></div>
                          <div
                            v-else
                            class="item"
                            :style="{
                              backgroundImage: `url('${portfolioImgList[index]}')`,
                            }"
                          ></div>
                        </v-col>
                      </v-row> -->
                    </v-col>
                  </v-row>
                </v-col>

                <v-col cols="12" md="6">
                  <div class="notes-block">
                    <p class="mb-5">課程審核標準：</p>
                    <ul>
                      <li>
                        ◆
                        課程內容正確合宜，無錯誤與誇大不實、不含與課程無關的推銷廣告、內容無抄襲侵權、無涉及任何色情、血腥暴力、人身攻擊、歧視（包含性別、種族、性傾向等）。
                      </li>
                      <li>◆ 提供圖片需與課程內容相符。</li>
                      <li>◆ 教學內容符合邏輯。</li>
                    </ul>
                  </div>
                </v-col>
              </v-row>
            </v-form>
          </v-card-text>
        </v-window-item>

        <v-window-item :value="4">
          <v-card-text class="mb-7 finish-step">
            <p>
              請等待後台人員確認您的課程資訊 <br />
              待您收到開課完成的 Email <br />
              就可以前往
              <router-link to="/user/courses">【我的開課】</router-link>
              觀看及修改您的
            </p>
            <ul>
              <li>(1) 據點資訊</li>
              <li>(2) 工藝教育者履歷</li>
              <li>(3) 課程清單</li>
            </ul>
          </v-card-text>
        </v-window-item>
      </v-window>

      <v-divider></v-divider>

      <v-card-actions
        class="justify-center flex-column flex-sm-row mt-5 mt-sm-7"
      >
        <v-btn
          v-if="step > 1 && step !== 4"
          color="gray"
          variant="outlined"
          size="large"
          @click="step--"
          class="px-7 me-7"
        >
          上一步
        </v-btn>
        <v-spacer></v-spacer>

        <v-btn
          v-if="step < 3"
          color="purple"
          variant="flat"
          size="large"
          @click="checkField(step)"
          class="px-7"
        >
          下一步
        </v-btn>
        <!-- <div
            v-if="errorField"
            class="d-flex align-center text-error mt-3 position-absolute"
            style="bottom: 15px"
          >
            <v-icon icon="mdi-alert"></v-icon>
            <span class="ms-2"> 尚有欄位未填寫 </span>
          </div> -->
        <v-btn
          v-if="step === 3"
          color="purple"
          variant="flat"
          size="large"
          @click="create()"
          :loading="loading"
          class="px-7"
        >
          創建
        </v-btn>
        <div
          v-if="errorField"
          class="d-flex align-center text-error mt-3 position-absolute"
          style="bottom: 15px"
        >
          <v-icon icon="mdi-alert"></v-icon>
          <span class="ms-2"> 尚有欄位未填寫 </span>
        </div>
        <div
          v-if="errorEventField"
          class="d-flex align-center text-error mt-3 position-absolute"
          style="bottom: 15px"
        >
          <v-icon icon="mdi-alert"></v-icon>
          <span class="ms-2"> 尚未填寫課程時間 </span>
        </div>
        <v-btn
          v-if="step === 4"
          color="purple"
          variant="outlined"
          class="mb-5 mb-sm-0 me-sm-3"
        >
          <router-link to="/" class="px-7">回到首頁</router-link>
        </v-btn>
        <v-btn v-if="step === 4" color="purple" variant="flat">
          <router-link to="/user/courses" class="px-7"
            >前往開課專區</router-link
          >
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<style lang="scss">
.step-title {
  text-align: center;
  h5 {
    font-size: 1.75em;
    font-weight: 500;
    letter-spacing: 0.125em;
    @media (max-width: 600px) {
      font-size: 1em;
    }
  }
  p {
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0.0625em;
    color: #919191;
    white-space: normal;
    @media (max-width: 600px) {
      font-size: 0.7em;
      line-height: 1.5em;
    }
  }
}

.step-01 {
  &.image-preview {
    height: 17.8125em;
  }
}

.step-02 {
  &.image-preview {
    height: 14.6875em;
  }
}

.image-preview {
  img {
    height: 100%;
    object-fit: contain;
  }
}

.flex-grow-1 {
  display: none !important;
}

.img-list {
  .item {
    height: 10em;
    border-radius: 0.3125em;
    background-color: #ccc; // 預設灰底
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (max-width: 960px) {
      height: 20vw;
    }
  }
}

.sessions-card {
  border-radius: 1.875em 0.3125em 0.3125em 1.875em !important;

  .v-label {
    p {
      // width: 5.9375em;
      text-align: end;
      line-height: 1.375em;
      @media (max-width: 600px) {
        width: 7.6875em;
      }
    }
  }
}

// .date-item {
//   display: flex;
//   margin-bottom: 0.625em;
//   p {
//     width: 7.125em;
//     display: flex;
//     align-items: center;
//     justify-content: end;
//     white-space: nowrap;
//     line-height: 1.375em;
//     @media (max-width: 600px) {
//       width: 7.8125em;
//     }
//   }
// }

.main-table {
  margin: 3.125em 0;
  .table-title {
    background-color: var(--purple);
  }

  table {
    thead {
      border-bottom: 0.125em solid var(--purple);
      tr {
        &:first-child:hover {
          background-color: #fff;
        }
      }
    }
    tbody {
      tr {
        &:hover {
          background-color: #f3f3f3;
        }
      }
      td {
        cursor: pointer;
        border-bottom: 0.0625em solid var(--purple);
      }
    }
  }
}

// .main-table {
//   thead {
//     tr {
//       &:first-child:hover {
//         background-color: #fff;
//       }
//     }
//   }

//   tr {
//     &:hover {
//       background-color: #f3f3f3;
//     }
//   }
//   td {
//     cursor: pointer;
//   }
// }

.finish-step {
  line-height: 3.125em !important;
  font-size: 1.375em;
  text-align: center;
  letter-spacing: 0.0625em;

  @media (max-width: 600px) {
    padding: 0;
    line-height: 2em;
    font-size: 1em;
  }
}

.type-hint {
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0.0625em;
  left: 6.5625em;
  color: var(--gray);
}

// .week-list {
//   height: 70%;
//   align-items: center;
//   li {
//     margin: 0.9375em 0;
//     .item {
//       color: var(--purple);
//       padding: 0.625em;
//       border-radius: 6.25em;
//       border: 0.0625em solid var(--purple);
//       transition: all 0.3s;
//       &:hover {
//         color: #fff;
//         background-color: var(--purple);
//       }
//     }
//     &.active {
//       .item {
//         color: #fff;
//         background-color: var(--purple);
//       }
//     }
//   }
// }

.time-item {
  display: flex;
  align-items: center;
  p {
    width: 6.0625em;
    flex-wrap: nowrap;
    display: flex;
    white-space: nowrap;
  }
}

input[type="checkbox"] {
  // accent-color: var(--purple);
  transform: scale(1.5);
}

.school-form {
  max-width: 800px;
  margin: 50px auto 0;

  li {
    padding: 20px;
    border-bottom: 1px solid #eeeded;
    font-size: 1.2em;
    letter-spacing: 1px;
    cursor: pointer;

    &:last-child {
      border-bottom: none;
    }
  }

  .proposal-link {
    padding: 25px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.15em;
    text-shadow: 1px 1px 2px #ababab;
    border-radius: 5px;
    background-color: var(--blue);
    transition: all 0.3s;
    letter-spacing: 2px;

    &:hover {
      opacity: 0.8;
    }
  }

  // width: 21.875em;
  // margin: auto;

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

.teachers-card {
  cursor: pointer;
  letter-spacing: 1px;
  h4 {
    font-size: 1.25em;
  }

  ul {
    border-top: 1px solid #ccc;
    li {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.v-card .v-card-title {
  @media (max-width: 600px) {
    white-space: normal;
    line-height: 2em;
  }
}
</style>