<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import "@vuepic/vue-datepicker/dist/main.css";
import axios from "axios";
import Navbar from "@/components/Navbar.vue";

const { t } = useI18n();
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 = "enter_basic_info";
      stepDescription.value = "before_create_course";
      break;
    case 2:
      stepTitle.value = "assign_instructor";
      stepDescription.value = "craft_resume_intro";
      break;
    case 3:
      stepTitle.value = "plan_course_content";
      stepDescription.value = "course_creation_bridge";
      break;
    case 4:
      stepTitle.value = "congratulations_course_proposal";
      stepDescription.value = "";
      break;
  }
  return { stepTitle: stepTitle.value, stepDescription: stepDescription.value };
});

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.create_course",
    disabled: false,
    href: "/setup-courses",
  },
  {
    title: "proposal",
    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();
// });

// 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"),
//     // });
//   });
// };

let location = reactive({
  location_name: "",
  Lng: "",
  Lat: "",
  address: "",
  school_introduction: "",
  email: "",
  phone: "",
  access_token: token,
  teachers_list: [], // 指派工藝教育者
  is_pass_proposal: 0, // 是否通過提案
  principal_user_email: "", // 負責人 email
});

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

let locationId = ref("");

// 新增履歷
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 course = reactive({
  name: "", // 課程名稱
  location_id: "", // 據點編號
  category: "", // 工藝類別
  introduction: "", // 課程簡介
  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 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: "", // 匯款帳號(銀行代碼+帳號)
  files: [], // 課程檔案(.ppt)
  access_token: token,
});

// 新增據點
function insertSchool() {
  location.teachers_list = JSON.stringify(resumeList.value);
  console.log("提案據點", location);

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

  return axios.post(`${store.apiUrl}/api/insert_school`, formData);
}

let proposal = reactive({
  class_name: "", // 課程名稱
  school_id: "", // 據點 ID
  category: "", // 工藝類別
  introduction: "", // 課程簡介
  organizer: "", // 主辦單位
  cover_img_file: "", // 封面圖片
  fee_method: "", // 課程價位
  number_limit: "", // 課程名額
  number_minimum: "", // 最低開課人數
  people: "", // 適合對象
  // files: [], // 課程簡報(檔案)
});

let proposalFiles = ref([]); // 課程簡報
let proposalLoading = ref(false);

// 新增提案
function insertProposal(id) {
  proposalLoading.value = true;
  console.log("提案課程", proposal);

  proposal.school_id = id;

  // 封面圖片
  if (coverImg.value !== "") {
    proposal.cover_img_file = coverImg.value;
  }

  // 課程檔案
  if (proposalFiles.value.length) {
    proposal["files"] = proposalFiles.value;
  }

  console.log("proposal", proposal);

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

    // formData.append(key, proposal[key]);
  }

  return axios.post(`${store.apiUrl}/api/insert_proposal`, formData);
}

function insertClassName(id) {
  course.location_id = id;

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

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

  return axios.post(`${store.apiUrl}/api/insert_class_name`, formData);
}

function insertEvent(id) {
  if (id) {
    event.name_id = id;
  }

  console.log("insertEvent", event);

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

  return axios.post(`${store.apiUrl}/api/insert_event`, formData);
}

async function create() {
  loading.value = true;

  insertSchool()
    .then((schoolResponse) => {
      console.log("新增據點", schoolResponse);

      if (schoolResponse.data.code === 200) {
        locationId.value = schoolResponse.data.location_id;
        console.log("locationId.value", locationId.value);

        return insertProposal(schoolResponse.data.location_id); // 課程提案
      }
      return Promise.reject("新增據點失敗");
    })
    .then((proposalResponse) => {
      setTimeout(() => {
        proposalLoading.value = false;
        step.value++;
      }, 1500);
      console.log("課程提案", proposalResponse);
    })
    .catch((error) => {
      console.log("error", error);
    });

  // insertSchool()
  //   .then((schoolResponse) => {
  //     console.log("新增據點", schoolResponse);

  //     if (schoolResponse.data.code === 200) {
  //       locationId.value = schoolResponse.data.location_id;
  //       console.log("locationId.value", locationId.value);

  //       return insertClassName(schoolResponse.data.location_id); // 新增課程
  //     }
  //     return Promise.reject("新增據點失敗");
  //   })
  //   .then((classResponse) => {
  //     console.log("新增課程", classResponse);
  //     return insertEvent(classResponse.data.new_class_name_id); // 新增場次
  //   })
  //   .then((eventResult) => {
  //     console.log("新增場次", eventResult);
  //     loading.value = false;
  //   })
  //   .then(() => {
  //     step.value++;
  //   })
  //   .catch((error) => {
  //     console.log("error", error);
  //   });
}

// 上傳圖片 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
  }
};

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

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

let schoolId = ref("");

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

    schoolSelect.list = response.data.schools;
    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(
      `${store.apiUrl}/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);
  }
}

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

let errorField = ref(false);

function checkField(num) {
  console.log("checkField", num);
  // step.value++;
  if (num === 1) {
    console.log("location", location);
    schoolForm.value.validate();
    for (const key in location) {
      // 判斷是否有空值
      if (
        key !== "Lat" &&
        key !== "Lng" &&
        key !== "is_pass_proposal" &&
        key !== "principal_user_email"
      ) {
        if (!location[key]) {
          console.log("!location[key]", key);
          errorField.value = true;

          setTimeout(() => {
            errorField.value = false;
          }, 3000);
          return;
        } else {
          errorField.value = false;
        }
      }
    }
  } else if (num === 2) {
    // resumeForm.value.validate();

    if (!resumeList.value.length) {
      errorField.value = true;

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

      return;
    }
  }

  step.value++;
}

let teacherName = ref("");
let teacherList = ref([]);
let isLoading = ref(false);

let result = reactive({
  show: false,
  color: "",
  text: "",
});

function closeResult() {
  setTimeout(() => {
    result.show = false;
  }, 2000);
}

function handleResponse(show, color, text) {
  result.show = show;
  result.color = color;
  result.text = text;

  closeResult();
}

// async function assignTeacher() {
//   console.log(teacherName.value);

//   if (teacherName.value === "") {
//     resumeForm.value.validate();
//     return;
//   }

//   isLoading.value = true;

//   // 判斷 list 內是否已有相同 email
//   const found = teacherList.value.some((item) => {
//     return item === teacherName.value;
//   });

//   if (found) {
//     console.log("重複輸入");
//     isLoading.value = false;
//     handleResponse(true, "error", "此 Email 已指派");
//     return;
//   } else {
//     try {
//       const response = await axios.post(
//         `${store.apiUrl}/api/check_is_user?email=${teacherName.value}`
//       );

//       if (response.data.msg === "success") {
//         handleResponse(true, "success", response.data.result);
//         teacherList.value.push(teacherName.value);
//         teacherName.value = null;
//       } else if (response.data.msg === "error") {
//         handleResponse(true, "error", response.data.result);
//       }

//       isLoading.value = false;

//       console.log("response", response);
//       console.log("response.data.msg", response.data.msg);
//     } catch (error) {
//       console.error(error);
//     }
//   }
// }

function removeTeacher(index) {
  console.log("index", index);
  resumeList.value.splice(index, 1);
  // teacherList.value.splice(index, 1);
}
</script>

<template>
  <Navbar />

  <v-container class="mb-16 pb-16 proposal-container">
    <v-breadcrumbs :items="breadcrumbs" divider="/" class="py-10">
      <template v-slot:title="{ item }">
        {{ t(item.title) }}
      </template>
    </v-breadcrumbs>

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

      <v-window v-model="step">
        <v-window-item :value="1">
          <v-card-text>
            <v-form ref="schoolForm" lazy-validation @submit.prevent>
              <!-- <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-center">
                <v-col cols="12" md="6">
                  <v-label class="d-block mb-5">
                    <p class="d-flex mb-5">
                      {{ t("form.location_name") }}<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="location.location_name"
                      :rules="[requiredRule]"
                      title="工坊名稱"
                      :placeholder="t('form.provide_name')"
                      density="compact"
                      variant="outlined"
                      counter
                      maxlength="60"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block mb-5">
                    <p class="d-flex mb-5">
                      {{ t("form.location_address")
                      }}<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="location.address"
                      :rules="[requiredRule]"
                      :title="t('form.location_address')"
                      density="compact"
                      variant="outlined"
                      :placeholder="t('form.safe_accessible_location')"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block mb-5">
                    <p class="d-flex mb-5">
                      {{ t("form.location_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-label class="d-block mb-5">
                    <p class="d-flex mb-5">
                      負責人 Email<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="location.principal_user_email"
                      :rules="[requiredRule]"
                      title="負責人 Email"
                      density="compact"
                      variant="outlined"
                      placeholder="請輸入負責人 Email"
                    ></v-text-field>
                  </v-label> -->

                  <v-label class="d-block mb-5">
                    <div class="d-flex">
                      <p class="d-flex mb-5">
                        {{ t("form.location_phone") }}
                        <span class="mark">*</span>
                      </p>
                      <span class="d-block ms-3 hint">
                        {{ t("form.display_on_course_intro") }}
                      </span>
                    </div>

                    <v-text-field
                      v-model="location.phone"
                      :rules="[requiredRule]"
                      density="compact"
                      variant="outlined"
                      :placeholder="t('form.enter_telephone_number')"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block">
                    <p class="d-flex mb-5">
                      {{ t("form.location_introduction") }}
                      <span class="mark">*</span>
                    </p>
                    <v-textarea
                      v-model="location.school_introduction"
                      :rules="[
                        (value) =>
                          (value && value.length >= 50) ||
                          '請至少輸入 50 個字元，以確保內容完整性',
                      ]"
                      rows="5"
                      variant="outlined"
                      placeholder="請輸入工坊簡介"
                      hint="文字長度不得低於 50 個字元，最多 150 個字元"
                      maxlength="150"
                      counter
                    ></v-textarea>
                  </v-label>
                </v-col>

                <v-col cols="12" md="6"> </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="mb-16 resume-content">
            <!-- <button class="resume-btn">
                    <p class="d-flex flex-column align-center">
                      <v-icon icon="mdi-plus"></v-icon>
                      新增工藝教育者
                    </p>
                  </button> -->

            <button class="resume-btn">
              <p class="d-flex flex-column align-center">
                <v-icon icon="mdi-plus" size="x-large"></v-icon>
                {{ t("create_course_instructor") }}
              </p>

              <v-dialog v-model="resumeDialog" activator="parent" width="700">
                <v-card class="pa-5">
                  <v-card-title>{{ t("instructor_resume") }}</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">
                              {{ t("form.instructor_name")
                              }}<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">
                              {{ t("form.job_nature")
                              }}<span class="mark">*</span>
                            </p>
                            <v-radio-group v-model="resume.work_type" inline>
                              <v-radio
                                :label="t('form.full_time')"
                                value="全職"
                              ></v-radio>
                              <v-radio
                                :label="t('form.part_time')"
                                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">
                              {{ t("form.teaching_experience") }}
                            </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 pb-3">
                            <p class="pb-5 pe-3">
                              {{ t("form.craft_skills")
                              }}<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 pb-3">
                            <p class="pb-5 pe-3">
                              {{ t("form.related_certifications")
                              }}<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">{{ t("form.social_media") }}</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="t('form.choose_image')"
                                    @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">
                              {{ t("form.instructor_intro")
                              }}<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="t('form.cancel')"
                      @click="resumeDialog = false"
                    ></v-btn>

                    <v-btn
                      @click="insertResume()"
                      color="purple"
                      variant="flat"
                    >
                      {{ t("form.create") }}
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </button>
            <h6 data-v-bbf03f1f="" class="mt-10 table-title">
              {{ t("instructor_resume") }}
            </h6>
            <div class="main-table">
              <table>
                <thead>
                  <tr>
                    <th>{{ t("form.name") }}</th>
                    <th>{{ t("form.job_nature") }}</th>
                    <th>{{ t("form.teaching_experience") }}</th>
                    <th>{{ t("form.craft_skills") }}</th>
                    <th>{{ t("form.related_certifications") }}</th>
                    <th>{{ t("form.social_media") }}</th>
                    <th style="width: 30%">
                      {{ t("form.instructor_intro") }}
                    </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">
                    <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="t('form.check')"
                            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="t('form.close')"
                                @click="isActive.value = false"
                              ></v-btn>
                            </v-card-actions>
                          </v-card>
                        </template>
                      </v-dialog>
                      <!-- {{ item.introduction }} -->
                    </td>
                    <td>
                      <v-btn
                        @click="removeTeacher(index)"
                        icon="mdi-close"
                        color="red"
                        variant="text"
                      ></v-btn>
                      <!-- <v-icon icon="mdi-close" color="red"></v-icon> -->
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>

            <!-- <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 pb-3">
                    <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 pb-3">
                    <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="t('form.choose_image')"
                      @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="7">
                  <v-label class="d-block mb-5">
                    <p class="pb-5 pe-3">
                      {{ t("form.course_name") }}<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="proposal.class_name"
                      :rules="[requiredRule]"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>

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

                  <v-label class="d-block mb-5">
                    <p class="pb-5 pe-3">{{ t("form.course_location") }}</p>
                    <v-text-field
                      v-model="location.address"
                      :label="t('form.auto_fill_location_address')"
                      density="compact"
                      variant="outlined"
                      disabled
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block mb-5">
                    <p class="pb-5 pe-3">{{ t("form.organizer") }}</p>
                    <v-text-field
                      v-model="location.location_name"
                      :label="t('form.auto_fill_location_name')"
                      density="compact"
                      variant="outlined"
                      disabled
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block mb-5">
                    <p class="d-flex">
                      {{ t("form.course_intro") }}<span class="mark">*</span>
                    </p>
                    <small class="my-2 hint">{{
                      t("form.content_requirements")
                    }}</small>
                    <v-textarea
                      v-model="proposal.introduction"
                      rows="5"
                      variant="outlined"
                      :rules="[
                        (value) =>
                          (value && value.length >= 50) ||
                          '請至少輸入 50 個字元，以確保內容完整性',
                      ]"
                    ></v-textarea>
                  </v-label>

                  <!-- <v-label class="d-block mb-5">
                    <p class="pb-5 pe-3">課程時長<span class="mark">*</span></p>
                    <v-text-field
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label> -->

                  <v-label class="d-block mb-5">
                    <p class="pb-5 pe-3">
                      {{ t("form.course_price") }}<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="proposal.fee_method"
                      type="number"
                      density="compact"
                      variant="outlined"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block mb-5">
                    <p class="pb-5 pe-3">
                      {{ t("form.course_quota") }}<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="proposal.number_limit"
                      density="compact"
                      variant="outlined"
                      placeholder="請輸入報名人數上限"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block mb-5">
                    <p class="pb-5 pe-3">
                      {{ t("form.minimum_enrollment")
                      }}<span class="mark">*</span>
                    </p>
                    <v-text-field
                      v-model="proposal.number_minimum"
                      density="compact"
                      variant="outlined"
                      :placeholder="t('form.enter_minimum_enrollment')"
                    ></v-text-field>
                  </v-label>

                  <v-label class="d-block mb-5">
                    <p class="pb-5 pe-3">
                      {{ t("form.target_audience") }}<span class="mark">*</span>
                    </p>
                    <v-textarea
                      v-model="proposal.people"
                      rows="2"
                      variant="outlined"
                      :placeholder="t('form.target_placeholder')"
                      :rules="[requiredRule]"
                    ></v-textarea>
                  </v-label>

                  <!-- <v-label class="d-block mb-5">
                    <p class="d-flex">上傳課程簡報 (ex. 講義、簡介)</p>
                    <small class="my-3 hint" style="letter-spacing: 1px"
                      >檔案格式：.ppt｜.pptx｜.pdf</small
                    >
                    <v-file-input
                      v-model="proposalFiles"
                      accept=".ppt, .pptx, .pdf"
                      label="上傳檔案"
                      variant="outlined"
                      prepend-icon="mdi-cloud-upload"
                      class="upload-input"
                    ></v-file-input>
                  </v-label> -->

                  <v-label class="d-block">
                    <p class="d-flex">
                      {{ t("form.upload_course_cover_image")
                      }}<span class="mark">*</span>
                    </p>

                    <v-file-input
                      multiple
                      v-model="coverImg"
                      ref="coverImgRef"
                      label="File input"
                      variant="outlined"
                      :placeholder="t('form.choose_image')"
                      @change="handleCoverImg"
                      style="display: none"
                    ></v-file-input>
                  </v-label>

                  <v-btn
                    @click="fileInputClick('cover')"
                    color="purple"
                    class="my-5"
                  >
                    {{ t("form.choose_image") }}
                  </v-btn>

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

                <v-col cols="12" md="5">
                  <div class="notes-block">
                    <p class="mb-5">{{ t("course_review_criteria") }}：</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">
            請等待後台人員確認您的提案資訊
          </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"
          @click="step--"
          class="px-7 me-2"
        >
          {{ t("back") }}
        </v-btn>
        <v-spacer></v-spacer>

        <v-btn
          v-if="step < 3"
          color="purple"
          variant="flat"
          @click="checkField(step)"
          class="px-7 ms-2"
        >
          {{ t("next") }}
        </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"
          @click="create()"
          :loading="proposalLoading"
          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">{{
            t("return_to_home")
          }}</router-link>
        </v-btn>
        <v-btn v-if="step === 4" color="purple" variant="flat">
          <router-link to="/user/courses" class="px-7">{{
            t("go_to_course_area")
          }}</router-link>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<style lang="scss">
.proposal-container {
  .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;
        display: flex;
        text-align: end;
        line-height: 1.375em;
        @media (max-width: 600px) {
          width: 7.6875em;
        }
      }
    }
  }

  .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;
    }
  }

  .school-list {
    width: 21.875em;
    margin: auto;

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

  // .notes-block {
  //   padding: 30px;
  //   font-size: 1.15em;
  //   color: #9b9b9b;
  //   background-color: #f9f9f9;
  //   border-radius: 5px;
  //   p,
  //   li {
  //     letter-spacing: 0.05em;
  //   }
  //   li {
  //     margin-bottom: 10px;
  //     line-height: 1.8em;
  //     &:last-child {
  //       margin-bottom: 0;
  //     }
  //   }
  // }

  .upload-input {
    .v-label {
      opacity: 0.5 !important;
    }
  }

  .assign-list {
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    li {
      padding: 10px 0;
      border-top: 1px solid #ddd;
      &:first-child {
        border: none;
      }
    }
  }

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

  // .resume-btn {
  //   width: 120px;
  //   height: 120px;
  //   border-radius: 100px;
  //   background-color: #f6f6f6;
  // }
}
</style>
