<script setup>
import { reactive } 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: "college_group_6",
    href: "/college-group/life",
    disabled: false,
  },
  {
    title: "旅物 SHOP",
    disabled: true,
  },
]);

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

(async () => {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?group_sort=旅物SHOP`
    );
    article.list = response.data.articles;
    console.log("旅物 SHOP", article.list);
  } catch (error) {
    console.error(error);
  }
})();

const shopImgs = [
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-01.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-02.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-03.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-04.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-05.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-06.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-07.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-08.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-09.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-10.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-11.webp"),
  },
  {
    img: store.getImageUrl("college-group/life/shop/旅物shop-12.webp"),
  },
];

// const youthImgs = [
//   {
//     img: store.getImageUrl("college-group/life/shop/苗栗陶青年創意協會.jpg"),
//     title: "苗栗陶青年創意協會",
//   },
//   {
//     img: store.getImageUrl("college-group/life/shop/初窯工坊.jpg"),
//     title: "初窯工坊 – 郭琦、逄家妤",
//   },
//   {
//     img: store.getImageUrl("college-group/life/shop/光山行.jpg"),
//     title: "光山行 – 賴信佑",
//   },
//   {
//     img: store.getImageUrl("college-group/life/shop/木島TimbormOsA.jpg"),
//     title: "木島TïmbormOsA – 張嘉哲、吳欣容",
//   },
//   {
//     img: store.getImageUrl("college-group/life/shop/手民石匠.jpg"),
//     title: "手民石匠 – 蔡安婷、林育賢",
//   },
// ];
</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">旅物 SHOP</h2>

  <div class="px-md-8 shop-block">
    <v-slide-group center-active show-arrows>
      <v-slide-group-item v-for="item in shopImgs" :key="item">
        <div class="ma-3">
          <v-img
            :src="item.img"
            height="12.5em"
            cover
            alt="臺灣工藝學習平台"
          ></v-img>
        </div>
      </v-slide-group-item>
    </v-slide-group>

    <v-row class="justify-space-around mt-10 mb-16 px-0 px-md-16 px-lg-8">
      <v-col cols="12">
        <p>
          《旅物 •
          SHOP》位於自然生態豐富的臺灣工藝文化園區，明亮穿透的空間設計，連結窗外工藝植物園，到室內的生活工藝選物，這是一間由土地孕育而生的工藝選品店，從採擷、手作，到用物於生活，是材料與手、物與物、人與物、人與人彼此流動交會，共度美好日常的店頭。包含崇尚自然循環，創造生活風格的臺灣在地「臺灣綠工藝」品牌、扶植青年創業的「青年孵化器」、工藝中心開發的周邊商品「品工藝」以及在地咖啡品牌「一日咖啡」等四個子品牌，推廣「自然、循環、平衡、寬容、生命力」的綠工藝精神，更是鼓勵青年實驗開店、青年工藝教育者的孵化平臺。
        </p>
      </v-col>
      <v-col cols="12" md="6" lg="5">
        <img
          src="@/assets/img/college-group/life/shop/旅物shop位置圖.jpg"
          alt="臺灣工藝學習平台"
        />
      </v-col>
      <v-col cols="12" md="6" lg="7" class="d-flex flex-column">
        <p>
          整體空間展示以自然的木質方框格子為單元，像是繁殖體一樣，無限增生和自由組合，是一個演繹當代工藝和培育工藝人才的繁殖場。旅人來到這裡認識工藝植物園的漆樹、墨水樹、胭脂樹和福木，透過《旅物
          •
          SHOP》體驗到漆樹與漆藝、由墨水樹、胭脂樹到染織，甚至是自然撿拾到生態工藝的等各種工藝思、行、用的過程，不只是一個購物空間，更是一個五感的體驗場域，同時整合OMO線上線下銷售模式，將「旅物」自然、文化、創意的美好攜出，融入日常生活。
        </p>

        <ul class="mt-auto">
          <li>營業時間：週二至週日 09:00-20:00</li>
          <li>週一休（逢國定假日及連續假期照常開館）</li>
          <li>
            地點：臺灣工藝學習平台
            生活工藝館一樓（南投縣草屯鎮中正路573號）
          </li>
        </ul>

        <a
          href="https://luwushop.ntcri.gov.tw/home/zh-tw"
          class="link-btn mt-10"
          target="_blank"
        >
          前往「旅物 SHOP」官網
        </a>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" v-for="(item, index) in article.list" :key="index">
        <section class="list-item">
          <h3 class="block-title mb-7">{{ item.title }}</h3>
          <img
            v-if="item.cover_img !== ''"
            :src="`${store.imgUrl}/${item.cover_img}`"
            alt="臺灣工藝學習平台"
            class="mb-7"
          />
          <div class="content">
            <div v-html="item.content"></div>
            <span
              v-if="item.title === '臺灣綠工藝 Taiwan Green Craft'"
              class="d-flex"
            >
              <a
                href="https://tcc.ntcri.gov.tw/home/zh-tw/object"
                class="link-btn ms-auto mt-10"
                target="_blank"
              >
                品牌選物主題網站
              </a>
            </span>
          </div>
        </section>
      </v-col>
    </v-row>

    <!-- <section class="block">
      <h3 class="block-title">臺灣綠工藝 Taiwan Green Craft</h3>
      <img
        src="@/assets/img/college-group/life/shop/旅物shop-03.webp"
        alt="臺灣工藝學習平台"
        class="mb-7"
      />
      <div class="content d-flex flex-column">
        <p>
          每一個生活細節裡，工藝總是不缺席，工藝中心透過「臺灣綠工藝 Taiwan
          Green
          Craft」品牌集結臺灣原創工藝，藉由品牌選品推薦為大眾發掘臺灣在地製造的工藝好物。
          <br />
          品牌創立契機源自於工藝中心對於工藝本質之延伸。工藝為滿足人之所需而生，亦承載著技藝與文化而生，以人為軸心，用技術、創意養成擴張，環繞「自然、循環、平衡、寬容、生命力」精神，建構「臺灣綠工藝
          Taiwan Green Craft」品牌。
        </p>
        <p class="mt-10">
          「臺灣綠工藝 Taiwan Green
          Craft」以工藝本質出發，天然的素材，生命週期過後易於回收與再利用；善用材料特性進行製作，發掘材料使用上更多可能性，對整體運用寬容以對，與萬物達成平衡；產品美學與實用兼備，既好看也順手，以創造力與實踐精神延續工藝生命，賦予能量。透過整體品牌概念，連結工藝的製作端與市場的消費端，創作者站在需求角度以技術創造工藝價值，消費者藉臺灣綠工藝作品富足生活，讓工藝美學融入生活也支持在地工藝產業，串聯臺灣工藝產業鏈。在日常中擁抱工藝，享受美好，讓好感工藝成為生活中最講究的細節。
        </p>
        <a
          href="https://tcc.ntcri.gov.tw/home/zh-tw/object"
          class="link-btn ms-auto mt-10"
          target="_blank"
        >
          品牌選物主題網站
        </a>
      </div>
    </section>

    <section class="block">
      <h3 class="block-title">青年孵化器</h3>
      <p class="ma-5 ma-sm-10">
        青年孵化器，青年工藝創業實驗區 <br />
        鼓勵青年實驗開店投入工藝文化產業經營，讓投身於創作的青年工藝教育者，亦有機會找出新方法來重新定義產品、服務及市場，提升未來青年投入工藝文化產業意願，減緩工藝產業人力流失與斷鏈危機。
      </p>
      <v-row class="youth-imgs">
        <v-col
          cols="12"
          sm="6"
          md="4"
          v-for="(item, index) in youthImgs"
          :key="index"
        >
          <img :src="item.img" alt="臺灣工藝學習平台" />
          <h4>{{ item.title }}</h4>
        </v-col>
      </v-row>
    </section>

    <section class="block">
      <h3 class="block-title">品工藝 Museum Shop of NTCRI</h3>
      <img
        src="@/assets/img/college-group/life/shop/品工藝.jpg"
        alt="臺灣工藝學習平台"
        class="mb-7"
      />
      <div class="content">
        <p>
          「品工藝」展售工藝中心限量的周邊商品（Museum
          Shop），工藝中心近年逐步推動自行開發工藝衍生性商品，結合展覽、典藏及各式活動開發設計工藝品推動加值運用，《旅物
          •
          SHOP》現場展示包括「寺廟就是一座工藝博物館特展」開發的漁夫帽、好運皂、毛巾、口罩，以及月桃編織袋、藍染茶具組提袋、薯榔植物染圍巾、工藝文化館造型積木等，共同推升工藝品的實用性、美觀性及市場性。
        </p>
      </div>
    </section>

    <section class="block">
      <h3 class="block-title">一日咖啡 A Day Coffee</h3>
      <img
        src="@/assets/img/college-group/life/shop/一日咖啡.jpg"
        alt="臺灣工藝學習平台"
        class="mb-7"
      />
      <div class="content">
        <p>
          從採擷開始，到工藝物件的產製，進而將工藝落實於生活，體認到用即是美的過程，《旅物．SHOP》由一般民眾最熟悉的日常動作「飲」再思生活工藝物件，邀集「一日咖啡」進駐。
        </p>
        <p class="mt-10">
          「一日咖啡」由國際咖啡品鑑師Q-Grader領軍的南投在地「日晨咖啡烘焙」及傳承70年的「什一堂烘焙坊」第三代共同合作經營，提供旅人休憩享用，也為展陳空間增添嗅覺、味覺體驗。
        </p>
      </div>
    </section> -->
  </div>
</template>

<style lang="scss">
.shop-block {
  p,
  li {
    line-height: 1.875em;
    letter-spacing: 0.0625em;
  }
  .list-item {
    margin: 3em 0;
    .content {
      padding: 1.5em;
      border-radius: 1.25em;
      border: 0.125em solid var(--purple);
      h5 {
        margin-top: 20px;
        img {
          margin-top: 20px;
        }
      }
      table {
        td {
          padding: 10px;
          img {
            width: 100%;
            height: 200px;
            object-fit: cover;
          }
        }
      }
    }

    .youth-imgs {
      img {
        width: 100%;
        height: 13.75em;
        object-fit: cover;
        @media (max-width: 1280px) {
          height: 15vw;
        }
        @media (max-width: 960px) {
          height: 25vw;
        }
        @media (max-width: 600px) {
          height: 50vw;
        }
      }
      h4 {
        margin-top: 1.25em;
        line-height: 1.5em;
      }
    }
    .block-title,
    .youth-imgs h4 {
      font-weight: 500;
      text-align: center;
      letter-spacing: 0.0625em;
    }
    .block-title {
      padding: 1.25em;
      font-size: 1.25em;
      line-height: 1.75em;
      color: #fff;
      background: var(--purple);
    }
  }
}
</style>
