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

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

const data = reactive([
  {
    name: "2014 年工藝成就獎得主－施至輝",
    title: "重要傳統藝術－粧佛保存者",
    img: store.getImageUrl("college-group/generation/01.png"),
  },
  {
    name: "在日昇之處的人間國寶－陳利友妹",
    title: "十字繡工藝",
    img: store.getImageUrl("college-group/generation/02.png"),
  },
  {
    name: "賽德克工藝文化體驗　人間國寶－張鳳英",
    title: "賦予編織新風貌",
    img: store.getImageUrl("college-group/generation/03.png"),
  },
  {
    name: "羅美玉－入選2020年「臺灣工藝之家」",
    title: "",
    img: store.getImageUrl("college-group/generation/04.png"),
  },
  {
    name: "2021 年國家工藝成就獎得主－陳三火",
    title: "",
    img: store.getImageUrl("college-group/generation/05.png"),
  },
  {
    name: "2020 年國家工藝成就獎得主－陳啟村",
    title: "",
    img: store.getImageUrl("college-group/generation/06.png"),
  },
  {
    name: "2017 國家工藝成就獎得主－張憲平",
    title: "竹編工藝　藤編工藝",
    img: store.getImageUrl("college-group/generation/07.png"),
  },
  {
    name: "2010 國家工藝成就獎得主－蘇世雄",
    title: "陶瓷工藝",
    img: store.getImageUrl("college-group/generation/08.png"),
  },
]);

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.craft_groups",
    disabled: true,
  },
  {
    title: "世代工藝",
    disabled: true,
  },
]);
</script>

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

  <h2 class="title">人間國寶</h2>

  <v-row>
    <v-col md="6" cols="12" v-for="(item, index) in data" :key="index">
      <img :src="item.img" alt="臺灣工藝學習平台" />
      <h3>{{ item.name }}</h3>
      <h4 v-if="item.title !== ''" class="mt-2">{{ item.title }}</h4>
    </v-col>
  </v-row>

  <div class="title d-flex align-end">
    <h2 class="mb-0">瀕危工藝－影音</h2>
    <small class="ms-5">預計上架中</small>
  </div>
</template>

<style lang="scss" scoped>
.v-row {
  padding-bottom: 1.875em;
}

h3,
h4 {
  font-weight: 400;
  text-align: center;
}

small {
  font-size: 1.125em;
  letter-spacing: 0.0625em;
  @media (max-width: 960px) {
    font-size: 1em;
    padding-bottom: 0.3125em;
  }
}
</style>
