ntcri/src/views/User/Courses.vue

<script setup>
import { ref, reactive, watch } from "vue";
import { useMainStore } from "@/stores/store";
import { Loader } from "@googlemaps/js-api-loader";
import { VDataTable } from "vuetify/labs/VDataTable";
import axios from "axios";
import moment from "moment";

const store = useMainStore();

let token = store.token;
let loading = ref(false);
let courses = reactive({
  list: [],
});
let classes = reactive({
  list: [],
});

// 取得開課紀錄
async function getClass() {
  console.log("getClass");
  loading.value = true;
  let token = store.token;

  try {
    let response = await axios.get(
      `https://cmm.ai:8088/api/get_class_name?access_token=${token}`
    );
    classes.list = response.data.classes;
    // let coursesData = response.data.classes[0];
    // classNameId.value = coursesData.class_name_id;

    // 存入課程資料
    // for (const key in coursesData) {
    //   if (course.hasOwnProperty(key) && coursesData[key] !== undefined) {
    //     course[key] = coursesData[key];
    //   }

    //   if (coursesData["cover_img"] !== "") {
    //     coverImgUrl.value = `https://ntcri.org/${coursesData["cover_img"]}`;
    //   }
    // }

    // console.log('course',course);

    loading.value = false;
    console.log("開課資料", classes.list);
  } catch (error) {
    console.error(error);
  }
}

getClass();

// 彈跳視窗狀態
let schoolDialog = ref(false); // 據點
let courseDialog = ref(false); // 課程
let enrolledDialog = reactive([]); // 報名清單
let sessionsDialog = ref(false); // 場次

watch(schoolDialog, () => {
  initMap();
});

// 據點參數
let location = reactive({
  location_name: "",
  Lng: "",
  Lat: "",
  address: "",
  introduction: "",
  email: "",
  phone: "",
  access_token: token,
});

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

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

// 查詢 Google 地圖
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"),
    });
  });
};

// 更新按鈕狀態
function updateButtonStatus(name) {
  if (name === "location") {
    locationBtnLoading.value = false;
    locationBtnText.value = "儲存成功！";
    setTimeout(() => {
      // schoolDialog.value = false; // 關閉彈跳視窗
      locationBtnText.value = "儲存修改";
    }, 3000);
  } else if (name === "course") {
    courseBtnLoading.value = false;
    courseBtnText.value = "儲存成功！";
    setTimeout(() => {
      // courseDialog.value = false; // 關閉彈跳視窗
      courseBtnText.value = "儲存修改";
    }, 3000);
  }
}

let schoolData = reactive({});
let locationId = ref(null);

// 取得據點
async function getSchool(id) {
  console.log("getSchool id", id);
  locationId.value = id;

  try {
    const response = await axios.get(
      // `https://cmm.ai:8088/api/get_school?location_id=${id}&access_token=${token}` // 暫時不帶 token
      `https://cmm.ai:8088/api/get_school?location_id=${id}`
    );
    schoolData = response.data.schools[0];
    console.log("據點", schoolData);
    for (const key in schoolData) {
      if (location.hasOwnProperty(key) && schoolData[key] !== undefined) {
        location[key] = schoolData[key];
      }
      if (key === "school_introduction") {
        location["introduction"] = schoolData["school_introduction"];
      }
    }

    // 設定地圖
    getCoordinates();
  } catch (error) {
    console.error(error);
  }
}

// 儲存按鈕狀態
let locationBtnLoading = ref(false);
let locationBtnText = ref("儲存修改");

// 更新據點
async function saveLocation() {
  locationBtnLoading.value = true;
  let data = reactive({
    location_id: locationId.value,
    location_name: "",
    Lng: "",
    Lat: "",
    address: "",
    introduction: "",
    email: "",
    phone: "",
  });

  for (const key in location) {
    if (data.hasOwnProperty(key) && location[key] !== undefined) {
      data[key] = location[key];
    }
  }

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

  try {
    await axios.post("https://cmm.ai:8088/api/update_school", formData);
    setTimeout(() => {
      updateButtonStatus("location");
    }, 500);
  } catch (error) {
    console.error(error);
  }
}

// 課程參數
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, // 審核結果
  address: "", // 上課地點
  access_token: token,
});

let classNameId = ref(null);
let courseLoading = ref(false);
let coverImgLoading = ref(false);

// 取得課程
async function getCourse(id) {
  classNameId.value = id;
  console.log("取得課程", id);
  courseLoading.value = true;

  let token = store.token;

  try {
    let response = await axios.get(
      `https://cmm.ai:8088/api/get_class_name?class_name_id=${id}&access_token=${token}`
    );

    // console.log('課程資料',response);
    courses.list = response.data.classes;
    console.log("課程資料", courses.list);
    let coursesData = response.data.classes[0];
    console.log("coursesData", coursesData);
    // classNameId.value = coursesData.class_name_id;

    // 存入課程資料
    for (const key in coursesData) {
      if (course.hasOwnProperty(key) && coursesData[key] !== undefined) {
        course[key] = coursesData[key];
      }

      if (coursesData["cover_img"] !== "") {
        coverImgLoading.value = true;
        coverImgUrl.value = `https://ntcri.org/${coursesData["cover_img"]}`;

        setTimeout(() => {
          coverImgLoading.value = false;
        }, 1500);
      }
    }

    console.log("最終 course", course);

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

// 儲存按鈕狀態
let courseBtnLoading = ref(false);
let courseBtnText = ref("儲存修改");

// 更新課程
async function saveCourse() {
  courseBtnLoading.value = true;
  delete course.access_token;

  course["class_name_id"] = classNameId.value;
  if (coverImg.value) {
    course["cover_img_file"] = coverImg.value;
  }

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

  try {
    await axios.post("https://cmm.ai:8088/api/update_class_name", formData);

    setTimeout(() => {
      updateButtonStatus("course");
    }, 500);
  } catch (error) {
    console.error(error);
  }
}

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

const fileInputClick = (ref) => {
  if (ref === "cover") {
    if (coverImgRef.value) {
      coverImgRef.value[0].click();
    }
  }
};

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

const handleCoverImg = (event) => {
  const file = event.target.files[0];
  if (file) {
    coverImg.value = file;
    coverImgUrl.value = URL.createObjectURL(file); // 設定圖片預覽 URL
  }
};

// 取得場次
async function getEvent(id) {
  console.log("getEvent id", id);

  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_event?class_name_id=${id}`
    );
    // event_id
    console.log("場次資料", response);
    let eventId = response.data.classes[0].event_id;
    getEnrolledData(eventId);
  } catch (error) {
    console.error(error);
  }
}

let enrolledLoading = ref(false);
let registrations = reactive({
  list: [],
});

// 取得報名清單
async function getEnrolledData(eventId) {
  enrolledLoading.value = true;
  console.log("getEnrolledData eventId", eventId);
  try {
    const response = await axios.get(
      `https://cmm.ai:8088/api/get_registration_class?event_id=${eventId}`
    );
    console.log("取得報名", response);
    registrations.list = response.data.registrations;
    console.log("報名清單", registrations.list);

    registrations.list.map((item) => {
      if (item.payment_status) {
        item.payment_status = true;
      } else {
        item.payment_status = false;
      }
    });

    setTimeout(() => {
      enrolledLoading.value = false;
    }, 1000);
  } catch (error) {
    console.error(error);
  }
}

// 場次
let eventData = reactive({
  list: [],
});

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

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

let itemsPerPage = ref(5); // 每頁顯示筆數(查看出缺席)
let headers = reactive([
  {
    title: "姓名",
    align: "start",
    key: "real_name",
  },
  { title: "電話", key: "phone" },
  { title: "信箱", key: "email" },
  { title: "出席", key: "enrolled" },
  { title: "付款狀態", key: "payment" },
]);
</script>

<template>
  <v-card class="h-100 user-courses">
    <div class="title">
      <h4>我的開課</h4>
    </div>

    <div class="d-flex justify-center my-10" v-if="loading">
      <v-progress-circular
        color="grey-lighten-4"
        indeterminate
      ></v-progress-circular>
    </div>

    <div v-else class="main-table mt-3">
      <h6 class="table-title">開課紀錄</h6>
      <router-link
        v-if="!classes.list.length"
        to="/setup-courses"
        class="hint-item mb-7"
        >點此進入開課專區</router-link
      >
      <table v-else>
        <thead>
          <tr>
            <th></th>
            <th>名稱</th>
            <th>開課日期</th>
            <th width="20%">狀態</th>
            <th>出／缺席</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in classes.list" :key="index">
            <td>
              <v-chip v-if="!item.is_check"> 未審核 </v-chip>
              <v-chip
                v-else
                variant="outlined"
                color="green"
                text-color="white"
              >
                已審核
              </v-chip>
            </td>
            <td>{{ item.name }}</td>
            <td>
              {{ moment(`${item.update_time}`).format("YYYY/MM/DD") }}
            </td>
            <td>
              開放報名
              <!-- {{ item.state }} -->
            </td>
            <td>
              <v-dialog v-model="enrolledDialog[index]" width="1000px">
                <template v-slot:activator="{ props }">
                  <v-btn
                    @click="getEvent(item.class_name_id)"
                    v-bind="props"
                    color="blue"
                    variant="flat"
                    rounded="xl"
                    class="me-3"
                  >
                    <p class="text-white">查看</p>
                  </v-btn>
                </template>

                <v-card class="pa-5">
                  <v-card-text>
                    <div class="d-flex justify-center" v-if="enrolledLoading">
                      <v-progress-circular
                        color="grey-lighten-4"
                        indeterminate
                      ></v-progress-circular>
                    </div>
                    <v-data-table
                      v-else
                      v-model:items-per-page="itemsPerPage"
                      :headers="headers"
                      :items="registrations.list"
                      item-value="name"
                      class="elevation-1 courses-table"
                    >
                      <template v-slot:item.enrolled="{ item }">
                        <v-checkbox hide-details></v-checkbox>
                      </template>
                      <template v-slot:item.payment="{ item }">
                        <!-- <v-select
                          :items="['已付款', '未付款']"
                          density="compact"
                          variant="outlined"
                          hide-details
                          class="my-3"
                        ></v-select> -->
                        <div class="d-flex align-center my-2">
                          <v-checkbox
                            v-model="item.selectable.payment_status"
                            color="purple"
                            hide-details
                            label="已付款"
                          ></v-checkbox>
                          <v-text-field
                            density="compact"
                            variant="outlined"
                            hide-details
                            label="帳號末五碼"
                            class="account-item"
                            :disabled="!item.selectable.payment_status"
                          ></v-text-field>
                        </div>
                      </template>
                    </v-data-table>
                  </v-card-text>
                  <v-card-actions class="d-flex justify-center mt-3">
                    <v-btn
                      color="purple"
                      variant="outlined"
                      class="me-3"
                      @click="enrolledDialog[index] = false"
                      >關閉</v-btn
                    >
                    <v-btn variant="flat" color="purple" class="px-6"
                      >儲存修改</v-btn
                    >
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </td>
            <td>
              <v-menu>
                <template v-slot:activator="{ props }">
                  <v-btn color="blue" v-bind="props" variant="outlined">
                    <p>編輯</p>
                  </v-btn>

                  <v-btn color="blue" variant="outlined" class="ms-3">
                    <a
                      :href="
                        $router.resolve(`/course-detail/${item.class_name_id}`)
                          .href
                      "
                      class="text-blue"
                      target="_blank"
                      >前往課程</a
                    >
                    <!-- <router-link :to="class_name_id" class="text-white">前往課程</router-link> -->
                  </v-btn>
                </template>
                <v-list>
                  <v-list-item>
                    <v-list-item-title>
                      <v-btn
                        variant="text"
                        @click="getSchool(item.location_id)"
                      >
                        據點

                        <v-dialog
                          v-model="schoolDialog"
                          activator="parent"
                          width="auto"
                        >
                          <v-card class="pa-5">
                            <v-card-title class="ps-5 pb-5"
                              >編輯據點</v-card-title
                            >
                            <v-card-text>
                              <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="location.location_name"
                                  :rules="[requiredRule]"
                                  placeholder="可以是您的工作室或品牌名稱／教學單位／您的姓名"
                                  density="compact"
                                  variant="outlined"
                                  counter
                                  maxlength="60"
                                ></v-text-field>
                              </v-label>

                              <v-label class="d-flex align-center pb-3 w-100">
                                <p class="pb-5 pe-3">
                                  據點地址<span class="mark">*</span>
                                </p>
                                <v-text-field
                                  v-model="location.address"
                                  :rules="[requiredRule]"
                                  density="compact"
                                  variant="outlined"
                                  placeholder="需在安全且便於學徒到達之地點開課"
                                ></v-text-field>
                                <v-btn
                                  @click="getCoordinates"
                                  color="purple"
                                  variant="flat"
                                  class="ms-3 mb-6 px-8"
                                >
                                  查詢
                                </v-btn>
                              </v-label>

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

                                <v-row class="mt-3">
                                  <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">
                                    <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-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-row class="mt-3">
                                <v-col cols="12" md="12">
                                  <v-label class="d-block">
                                    <p class="d-flex">
                                      公開電話<span class="mark">*</span>
                                    </p>
                                    <span class="d-block pt-1 pb-3 hint"
                                      >會顯示於課程介紹中，想了解課程資訊者聯繫用途</span
                                    >
                                    <v-text-field
                                      v-model="location.phone"
                                      :rules="[requiredRule]"
                                      density="compact"
                                      variant="outlined"
                                    ></v-text-field>
                                  </v-label>
                                </v-col>
                                <v-col cols="12" md="12">
                                  <v-label class="d-block">
                                    <p class="d-flex mb-5">
                                      據點簡介<span class="mark">*</span>
                                    </p>
                                    <v-textarea
                                      v-model="location.introduction"
                                      rows="5"
                                      variant="outlined"
                                    ></v-textarea>
                                  </v-label>
                                </v-col>
                              </v-row>
                            </v-card-text>
                            <v-card-actions class="d-flex justify-center">
                              <v-btn
                                variant="outlined"
                                color="purple"
                                @click="schoolDialog = false"
                                class="me-2 px-3"
                                >關閉</v-btn
                              >
                              <v-btn
                                variant="flat"
                                color="purple"
                                class="px-6"
                                :loading="locationBtnLoading"
                                @click="saveLocation()"
                                >{{ locationBtnText }}</v-btn
                              >
                            </v-card-actions>
                          </v-card>
                        </v-dialog>
                      </v-btn>
                    </v-list-item-title>
                  </v-list-item>
                  <v-list-item>
                    <v-list-item-title>
                      <!-- {{ item.title }} -->

                      <v-btn
                        @click="getCourse(item.class_name_id)"
                        variant="text"
                      >
                        課程

                        <v-dialog
                          v-model="courseDialog"
                          activator="parent"
                          width="600"
                        >
                          <v-card class="pa-5">
                            <v-card-title class="ps-5 pb-8"
                              >編輯課程</v-card-title
                            >
                            <v-card-text class="mb-7">
                              <v-row class="justify-space-evenly">
                                <v-col cols="12" class="py-0">
                                  <v-label class="d-block pb-3">
                                    <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" md="6">
                                  <v-label class="d-block pb-3">
                                    <p class="pb-5 pe-3">
                                      課程價格<span class="mark">*</span>
                                    </p>
                                    <v-text-field
                                      :rules="[requiredRule]"
                                      density="compact"
                                      variant="outlined"
                                    ></v-text-field>
                                  </v-label>
                                </v-col> -->

                                <v-col cols="12" class="py-0">
                                  <v-label class="d-block pb-3">
                                    <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" md="6">
                                  <v-label class="d-block pb-3">
                                    <p class="pb-5 pe-3">
                                      適合報名對象(年紀)<span class="mark"
                                        >*</span
                                      >
                                    </p>

                                    <v-select
                                      v-model="age"
                                      :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-block pb-3">
                                    <p class="pb-5 pe-3">上課地點</p>
                                    <v-text-field
                                      v-model="course.address"
                                      density="compact"
                                      variant="outlined"
                                    ></v-text-field>
                                  </v-label>
                                </v-col>

                                <v-col cols="12" class="py-0">
                                  <v-label class="d-block pb-3">
                                    <p class="pb-5 pe-3">主辦單位</p>
                                    <v-text-field
                                      v-model="course.organizer"
                                      density="compact"
                                      variant="outlined"
                                    ></v-text-field>
                                  </v-label>
                                </v-col>

                                <v-col cols="12" class="py-0">
                                  <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"
                                    ></v-textarea>
                                  </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"
                                      id="coverImgRef"
                                      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">
                                    <div
                                      class="d-flex justify-center"
                                      v-if="coverImgLoading"
                                    >
                                      <v-progress-circular
                                        color="grey-lighten-4"
                                        indeterminate
                                      ></v-progress-circular>
                                    </div>

                                    <img
                                      v-if="
                                        coverImgUrl !== '' && !coverImgLoading
                                      "
                                      :src="coverImgUrl"
                                      alt="上傳圖片預覽"
                                    />
                                  </div>
                                </v-col>
                              </v-row>
                            </v-card-text>
                            <v-card-actions class="d-flex justify-center">
                              <v-btn
                                variant="outlined"
                                color="purple"
                                @click="courseDialog = false"
                                class="me-2 px-3"
                                >關閉</v-btn
                              >
                              <v-btn
                                variant="flat"
                                color="purple"
                                class="px-6"
                                :loading="courseBtnLoading"
                                @click="saveCourse()"
                                >{{ courseBtnText }}</v-btn
                              >
                            </v-card-actions>
                          </v-card>
                        </v-dialog>
                      </v-btn>
                    </v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-menu>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </v-card>
</template>

<style lang="scss">
.user-courses {
  p,
  a {
    font-size: 16px;
    line-height: 30px;
  }

  .v-table {
    padding: 20px;
  }

  .main-info {
    margin: 30px;
    padding: 50px;
    position: relative;
    border: 2px solid var(--blue);
    border-radius: 20px;

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

    h5 {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 1px;
      span {
        display: block;
        margin: 5px 0 15px;
        font-size: 36px;
      }
    }

    p {
      text-align: center;
      line-height: 22px;
      @media (max-width: 490px) {
        font-size: 14px;
      }
    }

    .icon {
      width: 50px;
      position: absolute;
      right: -50px;
    }

    .record-item {
      margin-top: 20px;
      position: relative;
      p {
        width: 100%;
        position: absolute;
        z-index: 100;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size: 30px;
      }
      strong {
        display: inline-block;
        margin: 25px 0;
        font-size: 56px;
        font-weight: 500;
        @media (max-width: 600px) {
          font-size: 50px;
        }
      }
      small {
        font-size: 20px;
      }
      img {
        max-width: 260px;
        @media (max-width: 600px) {
          max-width: 220px;
        }
      }
    }
  }

  .table-title {
    background-color: var(--blue);
  }

  table {
    thead {
      border-bottom: 2px solid var(--blue);
    }
    tbody {
      td {
        border-bottom: 1px solid var(--blue);
      }
    }
    .finish-icon {
      padding: 8px;
      border: 2px solid var(--blue);
      border-radius: 100px;
      .v-icon {
        color: var(--blue);
      }
    }
  }
}

.courses-table {
  .v-data-table-footer {
    padding: 15px 0;
  }
  .account-item {
    .v-field__input {
      padding: 0 20px;
    }
    .v-label {
      color: var(--gray);
    }
  }
}
</style>