<script setup>
import { ref, reactive, watch } from "vue";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";

const { t } = useI18n();
const store = useMainStore();

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.craft_groups",
    disabled: true,
  },
  {
    title: "college_group_3",
    disabled: true,
  },
]);

let loading = ref(false);
let pageNum = ref(1); // 頁數(預設第一頁)
let pageAmount = ref(18); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數
let totalNum = ref(0); // 資料總筆數
let selectCategory = ref([]); // 選擇類別
let isFilter = ref(false); // 篩選狀態
let filterList = reactive([]); // 篩選條件
let isSearch = ref(false); // 搜尋狀態
let searchInput = ref(""); // 關鍵字
let searchError = ref(false); // 搜尋錯誤訊息

watch(searchInput, (val) => {
  if (val === "") {
    searchError.value = false;
    getClass();
  }
});

const courese = reactive({
  list: [],
});

async function getClass() {
  loading.value = true;
  let url = `${store.apiUrl}/api/get_online_courese?no_org=udemy&page_num=${pageNum.value}&page_amount=${pageAmount.value}`;

  // 篩選類別
  if (isFilter.value) {
    filterList.map((item) => {
      url += item;
    });
  }

  // 關鍵字搜尋
  if (isSearch.value) {
    url += `&key_word=${searchInput.value}`;
  }

  try {
    const response = await axios.get(url);
    courese.list = response.data.online_coures;
    console.log("response.data", response.data);
    totalNum.value = response.data.total_num;
    totalPages.value = store.getTotalPages(response.data.total_num, 18);
    loading.value = false;

    if (!response.data.online_coures.length) {
      searchError.value = true;
    } else {
      searchError.value = false;
    }
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
}

getClass();

const listLocation = ref(null);

watch(pageNum, () => {
  getClass();
  listLocation.value.scrollIntoView({ behavior: "smooth", block: "start" });
});

watch(selectCategory, (val) => {
  if (val.includes("全部")) {
    selectCategory.value = [];
    isFilter.value = false;
    pageNum.value = 1;
    getClass();
  } else {
    selectFilter("category", val);
  }
});

// 篩選課程
async function selectFilter(type, val) {
  isFilter.value = true;
  pageNum.value = 1; // 篩選時返回第一頁
  filterList.splice(0, filterList.length); // 清空陣列

  if (type === "category") {
    filterList.push(`&category=${val}`);
  }

  getClass();
}

async function handleSearch() {
  if (searchInput.value !== "") {
    isSearch.value = true;
  } else {
    isSearch.value = false;
  }
  getClass();
}
</script>

<template>
  <v-breadcrumbs :items="breadcrumbs" divider="/" class="mt-10 pa-0">
    <template v-slot:title="{ item }">
      {{ t(item.title) }}
    </template>
  </v-breadcrumbs>

  <div class="list">
    <section>
      <h3>{{ t("college_group_3") }}</h3>
      <p class="text-left">
        培育能承接文化生產者的內涵與工藝知識，並轉化成一般人能同理感受並更進一步在生活中學習應用的人才。
        <br />
        主要專業並非工藝而是更偏向社會傳播，或其他八大藝術專業或民俗文化專業。但能進一步了解文化生產者。
        <br />
        不管是傳統工藝的延伸，或是有形、無形文化資產的保護與創意化，都鼓勵跨領域的合作與創作，並在最後達到永續經營，成為國家升級的重要推動力量。以因應本土化、國際化、多元化的環境銳變與社會趨勢。
      </p>
    </section>

    <section>
      <h3>{{ t("variety_of_courses") }}</h3>
      <p class="text-left">
        法務知識、財務稅務、資金籌措、藝術行政、市場分析、產品開發、消費者管理、藝術藏家、
        品牌設計、市場通路、行銷策略、展覽企劃、文案撰寫、公關溝通、其他類及，策略課程
      </p>
    </section>

    <section>
      <h3>{{ t("teaching_method") }}</h3>
      <div class="d-flex flex-column flex-sm-row justify-center">
        <p>
          素養型 <br />
          （講述核心素養）
        </p>
        <p>
          知識型 <br />
          （講述基本能力）
        </p>
        <p>
          技術型 <br />
          （實作、討論）
        </p>
      </div>
    </section>
  </div>

  <div
    ref="listLocation"
    class="d-flex flex-column flex-sm-row align-center justify-space-between"
  >
    <h2 class="title">{{ t("all_courses") }}</h2>
    <div class="search">
      <span>
        <input
          v-model="searchInput"
          type="text"
          @keyup.enter="handleSearch()"
          :placeholder="t('keyword_search')"
        />
        <button @click="handleSearch()">
          <img
            src="@/assets/img/news/news-search-icon.png"
            alt="臺灣工藝學習平台"
          />
        </button>
      </span>
      <div
        v-if="searchError"
        class="d-flex justify-center align-center error me-4"
      >
        <v-icon color="primary" icon="mdi-alert" class="me-2"></v-icon>
        {{ t("no_found") }}
      </div>
    </div>
  </div>

  <v-row class="mt-5 mt-sm-0">
    <v-col cols="12" md="3" lg="2">
      <v-row class="filter-list mt-sm-2">
        <v-col cols="12" sm="6" md="12">
          <v-select
            v-model="selectCategory"
            :label="t('category')"
            :items="[
              '全部',
              '財務稅務',
              '市場分析',
              '行銷策略',
              '公關溝通',
              '法務知識',
              '產品開發',
              '品牌設計',
              '消費者管理',
              '策劃展覽',
              '藝術行政',
              '文案撰寫',
              '教學影音',
              '品牌企劃',
            ]"
            multiple
            hide-details
          ></v-select>
        </v-col>
        <!-- <v-col cols="12">
            <v-btn
              @click="selectFilter()"
              class="w-100"
              variant="flat"
              color="brown"
              rounded="xl"
            >
              搜尋
            </v-btn>
          </v-col>
          <v-col cols="12">
            <v-btn class="w-100" variant="outlined" color="brown" rounded="xl">
              清除重填
            </v-btn>
          </v-col> -->
      </v-row>
    </v-col>
    <v-col cols="12" md="9" lg="10">
      <v-row class="cross-courese mt-1 mt-sm-0">
        <v-col
          cols="12"
          md="6"
          lg="4"
          v-for="(item, index) in courese.list"
          :key="index"
          class="pa-5"
        >
          <div class="main-card">
            <a :href="item.video_url" target="_blank">
              <section class="card-title">
                <h3>{{ item.title }}</h3>
              </section>
            </a>

            <a :href="item.video_url" target="_blank">
              <div class="card-info">
                <ul>
                  <li class="d-flex align-center">
                    <p class="mb-0 ms-3">分類： {{ item.category }}</p>
                  </li>
                  <li class="d-flex align-center">
                    <p class="mb-0 ms-3">來源： {{ item.content }}</p>
                  </li>
                </ul>
              </div>
            </a>
          </div>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

  <v-pagination
    v-if="courese.list.length"
    v-model="pageNum"
    :length="totalPages"
    rounded="circle"
    class="mt-16"
  ></v-pagination>

  <span v-if="courese.list.length" class="text-gray total-item"
    >{{ t("total_count") }}：{{ totalNum }}</span
  >

  <!-- <div class="mt-16">
    <h2 class="title">工藝中心開課</h2>
  </div>

  <p class="cooming-soon">「籌備中 cooming soon」</p> -->

  <h2 class="title pb-10">{{ t("craft_plus") }}</h2>

  <div class="craftplus-item mb-6"></div>

  <v-row class="pb-10 craftplus-block">
    <v-col cols="2">
      <ul class="category-list">
        <!-- <li v-for="(item, index) in categoryList" :key="index" class="mx-3">
          <router-link :to="item.path">
            {{ item.title }}
          </router-link>
        </li> -->
        <li class="mb-8">
          <img src="@/assets/img/craftplus-logo.png" alt="" />
        </li>
        <li>
          <a href="">合作需求</a>
        </li>
        <li>
          <a href="">活動企劃</a>
        </li>
        <li>
          <a href="">FAQ</a>
        </li>
      </ul>
    </v-col>

    <v-col cols="10" class="work-list">
      <v-row>
        <v-col cols="4">
          <div class="item">
            <img src="@/assets/img/project/ProjectImage1.jpg" alt="" />
            <h3>作品名稱</h3>
            <span class="icon-list">
              <button>
                <v-icon icon="mdi-email-arrow-right"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-heart-outline"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-bookmark-outline"></v-icon>
              </button>
            </span>
          </div>
        </v-col>

        <v-col cols="4">
          <div class="item">
            <img src="@/assets/img/project/ProjectImage2.jpg" alt="" />
            <h3>作品名稱</h3>
            <span class="icon-list">
              <button>
                <v-icon icon="mdi-email-arrow-right"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-heart-outline"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-bookmark-outline"></v-icon>
              </button>
            </span>
          </div>
        </v-col>

        <v-col cols="4">
          <div class="item">
            <img src="@/assets/img/project/ProjectImage3.jpg" alt="" />
            <h3>作品名稱</h3>
            <span class="icon-list">
              <button>
                <v-icon icon="mdi-email-arrow-right"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-heart-outline"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-bookmark-outline"></v-icon>
              </button>
            </span>
          </div>
        </v-col>

        <v-col cols="4">
          <div class="item">
            <img src="@/assets/img/project/ProjectImage7.jpg" alt="" />
            <h3>作品名稱</h3>
            <span class="icon-list">
              <button>
                <v-icon icon="mdi-email-arrow-right"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-heart-outline"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-bookmark-outline"></v-icon>
              </button>
            </span>
          </div>
        </v-col>

        <v-col cols="4">
          <div class="item">
            <img src="@/assets/img/project/ProjectImage5.jpg" alt="" />
            <h3>作品名稱</h3>
            <span class="icon-list">
              <button>
                <v-icon icon="mdi-email-arrow-right"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-heart-outline"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-bookmark-outline"></v-icon>
              </button>
            </span>
          </div>
        </v-col>

        <v-col cols="4">
          <div class="item">
            <img src="@/assets/img/project/ProjectImage6.jpg" alt="" />
            <h3>作品名稱</h3>
            <span class="icon-list">
              <button>
                <v-icon icon="mdi-email-arrow-right"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-heart-outline"></v-icon>
              </button>

              <button>
                <v-icon icon="mdi-bookmark-outline"></v-icon>
              </button>
            </span>
          </div>
        </v-col>
      </v-row>
    </v-col>
  </v-row>

  <!-- <div class="craftplus-item mt-16"></div> -->

  <!-- <a
    href="https://craftplus.ksi.com.tw/"
    target="_blank"
    class="craftplus-item"
  >
  </a> -->
</template>

<style lang="scss" scoped>
.v-input {
  @media (max-width: 600px) {
    max-width: 15.625em;
    margin: auto;
    margin-top: -1.25em;
  }
}

.cross-courese {
  .main-card {
    .card-title {
      height: 40%;

      h3 {
        font-size: 1.125em;
        font-weight: 500;
      }
    }

    .card-info {
      padding: 0;
      height: 60%;

      ul {
        justify-content: center;

        li:first-child {
          margin-bottom: 0.3125em;
        }

        p {
          font-size: 0.875em;
        }
      }
    }
  }
}

.list {
  max-width: 53.125em;
  margin: 6.25em auto 3.125em;
  @media (max-width: 600px) {
    margin: 3.125em auto 0;
  }
  section {
    margin-bottom: 3.125em;
    text-align: center;

    &:last-child {
      margin-bottom: 0;
    }

    h3 {
      margin-left: -1.25em;
      margin-bottom: 1.5em;
      list-style: disc;
      font-size: 1.75em;
      font-weight: 500;
      @media (max-width: 600px) {
        font-size: 1.375em;
      }
      &::before {
        content: "\2022"; /* Unicode 編碼 */
        font-size: 1.2em;
        color: #bca2b5;
        position: relative;
        top: 0.1875em;
      }
    }
    p {
      line-height: 1.75em;
      letter-spacing: 0.0625em;
      @media (max-width: 600px) {
        font-size: 0.875em;
      }
    }
  }
}

.craftplus-item {
  display: block;
  height: 380px;
  // 透明度 0.6 的黑色半透明遮罩
  background-color: rgba(0, 0, 0, 0.2);
  // 設置背景混和模式為相乘模式
  background-blend-mode: multiply;
  background-image: url("@/assets/img/college-group/cross.webp");
  background-size: cover;
  background-position: center center;
  border-radius: 10px;
  transition: all 0.3s;

  &:hover {
    background-color: transparent;
  }
}

.tag-btn {
  // @media (max-width: 960px) {
  //   margin: auto !important;
  //   max-width: 18.75em;
  //   flex-direction: column;
  // }

  .item {
    color: #009688;
    border: 0.0625em solid #009688;

    &:hover {
      color: #fff;
      border-color: #009688;
      background-color: #009688;
    }
  }
}

.craftplus-block {
  .work-list {
    img {
      height: 280px;
      width: 100%;
      object-fit: cover;
      border-radius: 20px;
    }

    .item {
      position: relative;

      h3 {
        position: absolute;
        color: #fff;
        bottom: 8%;
        left: 5%;
        font-size: 1.25em;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-shadow: 1px 1px 3px #333;
      }

      .icon-list {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 5%;
        right: 5%;
        button {
          margin-bottom: 10px;
          font-size: 1.3em;
        }
        .v-icon {
          transition: all 0.3s;
          text-shadow: 1px 1px 3px #818181;
          color: #fff;
          &:hover {
            opacity: 0.6;
          }
        }
      }
    }
  }
}
</style>
