<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
import moment from "moment";
import Navbar from "@/components/NavbarSub.vue";

let searchInput = ref("");
let searchError = ref(false);
const courseAll = reactive({
  classes: [],
});
const courseData = reactive({
  classes: [],
});

// 取得課程清單
(async function getData() {
  try {
    const response = await axios.get("https://cmm.ai:8088/api/get_class_name");
    console.log("response.data.classes", response.data.classes);
    courseAll.classes = response.data.classes;
    courseData.classes = response.data.classes;
  } catch (error) {
    console.error(error);
  }
})();

// 課程搜尋
async function search() {
  searchError.value = false;
  let keyword = searchInput.value;
  if (keyword !== "") {
    try {
      const response = await axios.get(
        `https://cmm.ai:8088/api/search_class_like?keyword=${keyword}`
      );
      if (response.data.classes.length !== 0) {
        courseData.classes = response.data.classes;
      } else {
        searchError.value = true;
      }
    } catch (error) {
      console.error(error);
    }
  } else {
    courseData.classes = courseAll.classes;
  }
}
</script>

<template>
  <Navbar />
  <div class="banner">
    <img src="@/assets/img/img-01.jpg" alt="" />
    <h3>課程清單</h3>
  </div>

  <v-container class="my-16 pa-0">
    <div
      class="d-flex align-center ms-auto mb-16 search-btn"
      style="max-width: 300px"
    >
      <v-text-field
        label="課程搜尋"
        v-model="searchInput"
        variant="outlined"
        density="compact"
        hide-details
        @keyup.enter="search()"
      ></v-text-field>
      <div v-if="searchError" class="d-flex justify-center error">
        <v-icon color="primary" icon="mdi-alert" class="me-2"></v-icon>
        沒有符合搜尋條件的項目
      </div>
      <button @click="search()" class="btn">
        <img src="@/assets/img/icon/search.png" alt="" width="25" />
      </button>
    </div>
    <v-row no-gutters>
      <v-col
        v-for="item in courseData.classes"
        :key="item"
        cols="12"
        xl="3"
        lg="4"
        sm="6"
        class="mb-10"
      >
        <v-card class="mx-5 h-100">
          <!-- 傳遞課程 id -->
          <router-link
            :to="`/course-detail/${item.class_name_id}`"
            class="cover-img"
          >
            <v-img
              :src="`https://cmm.ai/ntcri/${item.cover_img}`"
              height="220px"
              cover
            ></v-img>
          </router-link>
          <v-card-title class="font-weight-medium">
            {{ item.name }}
          </v-card-title>

          <v-card-text>
            <ul>
              <li class="d-flex align-center">
                <img src="@/assets/img/icon/date_icon.png" alt="" />
                <p class="mb-0 ms-3">
                  {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }} -
                  {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
                </p>
              </li>
              <li class="d-flex align-center mt-2">
                <img src="@/assets/img/icon/location_icon.png" alt="" />
                <p class="mb-0 ms-3">
                  {{ item.location }}
                </p>
              </li>
            </ul>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss" scoped>
.banner {
  position: relative;
  img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: 0 80%;
    @media (max-width: 767px) {
      object-position: center;
    }
  }
  h3 {
    display: inline-block;
    padding: 30px 80px;
    font-size: 26px;
    font-weight: 500;
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    letter-spacing: 1px;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: var(--main-color);
    @media (max-width: 575px) {
      padding: 25px 50px;
      font-size: 20px;
    }
  }
}

.search-btn {
  position: relative;
  .btn {
    margin: 2px 10px 0;
    transition: all 0.3s;
    &:hover {
      opacity: 0.8;
    }
  }
  .error {
    position: absolute;
    bottom: -30px;
  }
}

.cover-img {
  display: block;
  overflow: hidden;
  .v-img {
    transition: all 0.5s;
    &:hover {
      transform: scale(1.2);
    }
  }
}
</style>
