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

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

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

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

    travel.list = response.data.articles.filter(
      (e) => e.group_sort === "工藝行旅"
    );
  } 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 trave-content">
    <v-col cols="12" class="mb-5">
      <h4>工藝文化深度旅遊，品味在地、標記生活</h4>
      <p>
        打造以工藝為核心的文化深度旅遊路徑，結合工藝體驗、自然風土、地方美食、在地物產、
        <br />
        建築等觀光資源，旅人緩步慢行，暫離喧囂、以手作沉澱自我，發現生命中的寧靜與感動。
        <br />
        現在一起出發，感受工藝行旅的魅力和樂趣！
      </p>
    </v-col>

    <v-col
      cols="12"
      sm="6"
      md="4"
      v-for="item in travel.list"
      :key="item"
      class="py-5 info"
    >
      <a :href="$router.resolve(`/article-detail/${item.article_id}`).href">
        <v-img
          :lazy-src="`${store.imgUrl}/${item.cover_img}`"
          :src="`${store.imgUrl}/${item.cover_img}`"
          cover
          alt="臺灣工藝學習平台"
        >
          <template v-slot:placeholder>
            <div class="d-flex align-center justify-center fill-height">
              <v-progress-circular
                color="grey-lighten-4"
                indeterminate
              ></v-progress-circular>
            </div>
          </template>
        </v-img>
        <!-- <img :src="`${store.imgUrl}/${item.cover_img}`" alt="臺灣工藝學習平台" /> -->
        <section>
          <h3>{{ item.title }}</h3>
          <p>{{ item.depiction }}</p>
        </section>
      </a>
    </v-col>
  </v-row>
</template>

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