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

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

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

(async () => {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_group_classes_and_articles?group_id=3`
    );

    campus.list = response.data.articles.filter(
      (e) => e.group_sort === "校園扎根"
    );

    console.log("campus.list", campus.list);
  } catch (error) {
    console.error(error);
  }
})();

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "college_group_6",
    href: "/college-group/life",
    disabled: false,
  },
  {
    title: "校園扎根",
    disabled: true,
  },
]);
</script>

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

  <h2 class="title">校園扎根</h2>

  <v-row class="px-md-8 campus-content">
    <v-col cols="12">
      <h4>
        老師 x 工藝教育者 x 學生 <br />
        講述 x 手作 <br />
        價值 x 實踐 <br />
        扎根 x 擴散
      </h4>
      <p class="mt-10">
        工藝校園扎根計畫以工藝融入學校教育，媒合教師與工藝教育者，跨域合作開發具創造力、觀察力、美學素養、批判思考以及手作體驗的工藝教材教案，實踐工藝之於學習、生活的價值。符合教育部12年國教課綱的「核心素養」，以及STEAM教育的五大精神「跨領域、動手做、生活應用、解決問題及五感學習」，以「做中學，學中做」培育新世代的工藝人才。
      </p>
    </v-col>

    <v-col
      cols="12"
      sm="6"
      md="4"
      v-for="item in campus.list"
      :key="item"
      class="py-5 info"
    >
      <a :href="$router.resolve(`/article-detail/${item.article_id}`).href">
        <img
          :src="`${store.imgUrl}/${item.cover_img}`"
          alt="臺灣工藝學習平台"
        />
      </a>
      <section class="mt-4">
        <h3>{{ item.title }}</h3>
      </section>
    </v-col>
  </v-row>
</template>

<style lang="scss" scoped>
.info {
  img {
    height: 15.625em;
    width: 100%;
    object-fit: cover;
  }
}
</style>
