<script setup>
import { ref, reactive } from "vue";
import moment from "moment";
import Navbar from "@/components/Navbar.vue";
import { useMainStore } from "@/stores/store";

const store = useMainStore();

const breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "工藝學群",
    disabled: false,
    href: "/ntcri/college-group/craft",
  },
  {
    title: "修護工藝",
    disabled: true,
  },
]);

const testData_1 = [
  {
    title: "臺灣工藝聯合醫院－草鞋墩分院 112 年 6-8 月工藝修復推廣課程",
    describe:
      "「臺灣工藝聯合醫院-草鞋墩分院」辦理工藝修護各類推廣課程，目標對象群擴及幼童、學生及社會人士等，課程種類包含「臺灣工藝聯合醫院-草鞋墩分院」5位工藝修護師共同授課的「工藝修護技法培訓課程」、個別工藝修護師辦理的「個別工藝修護技法課程」、「工藝修護體驗」等，民眾能依照自身興趣及學習需求，選擇自己適合且需要的工藝修護課程。",
    start_time: "2023/06/01",
    end_time: "2023/08/22",
    address: "國立台灣工藝研究發展中心",
    img: store.getImageUrl("college-group/img.jpg"),
  },
];

const testData_2 = [
  {
    title: "坦然面對殘缺　時光中靜待重生",
    describe:
      "日本「古伊萬里染錦花籠大盤」的修護故事 200 年歷史的日本「古伊萬里染錦花籠大盤」頗損已久，在時間的洪流中幾經流轉，終於經由臺灣工藝聯合醫院(草鞋墩分院)工藝修復師 #葉璨榮 及助理 #張晉榮 的巧手修護，再現風華。這件「古伊萬里染錦花籠大盤」在日本藏家手中，曾經由無痕科技修護...",
    start_time: "2023/06/15",
    address: "國立台灣工藝研究發展中心",
    img: store.getImageUrl("college-group/img.jpg"),
  },
  {
    title: "重修舊好，老物件復原術 / 工藝修復小知識",
    describe:
      "喜歡的瓷盤、陶杯破損時該怎麼復原呢？ 現代化學黏著劑講求快速卻不耐用，更有安全的隱憂，天然的生漆耐熱又抗酸鹼，是非常優質的黏合劑，生漆加上麵粉調合成的接著劑，可讓漆的黏性更加強韌且堅硬...",
    start_time: "2023/06/15",
    address: "國立台灣工藝研究發展中心",
    img: store.getImageUrl("college-group/img.jpg"),
  },
];
</script>

<template>
  <div class="college-bg-img">
    <Navbar />
    <v-container fluid class="college-content pb-16 px-sm-0">
      <div class="college-banner">
        <img src="@/assets/img/college-group/repair/banner.png" alt="" />
        <h1>修護工藝</h1>
      </div>
      <div class="main-block">
        <v-breadcrumbs
          :items="breadcrumbs"
          divider="/"
          class="mt-10 p-0"
        ></v-breadcrumbs>

        <v-row class="mt-16">
          <v-col cols="12" md="6">
            <h3 class="text-center mb-5">國家工藝檢測修護平臺</h3>
            <div class="video">
              <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/eIOkU2q9WHA"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
              ></iframe>
            </div>
          </v-col>
          <v-col cols="12" md="6">
            <h3 class="text-center mb-5">臺灣工藝聯合醫院－草鞋墩分院</h3>
            <div class="video">
              <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/Rb318IkMo80"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
              ></iframe>
            </div>
          </v-col>
        </v-row>

        <v-row class="mt-16 article-block">
          <v-col cols="12" sm="7" md="8">
            <h4 class="mb-5">首創工藝聯合醫院，診斷修復再現舊物新生命</h4>
            <p>
              工藝中心在愛物惜物、自然永續的綠工藝精神下，成立「臺灣工藝檢測修護聯盟」，串聯專業學術單位、團體或個人工作室等成為一個工藝的照護聯合網，就像一所工藝的聯合醫院，為博物館、常民工藝或是生活收藏等需求者，提供檢測、維護及修復的服務，猶如醫院的體檢、衛教保健到診斷治療，全臺分區各有據點，提供大眾就近在地的友善服務。
              「臺灣工藝聯合醫院－草鞋墩分院」就是照護聯合網絡的一個據點，由廖偉淇、蔣昆原、張璽元、葉璨榮、陳宜妙5位修復師進駐，服務項目有陶瓷、金屬、漆及複合媒材等修復，歡迎大家隨時來問診交流、學習工藝保養維護，親自體驗舊物新生的感動。
              <br />
              「國家工藝檢測修護平臺」開始受理申請，有檢測、修復及維護需求者，皆可透過「國家工藝檢測修護平臺」網站提出申請，或電話撥打0800-222-800洽詢。
            </p>
          </v-col>
          <v-col
            cols="12"
            sm="5"
            md="4"
            class="d-flex flex-column align-center align-md-end justify-space-around"
          >
            <section>
              <h4>檢測x修復x維護</h4>
              <h4>保存x循環x再生</h4>
            </section>
            <span class="btn mt-10 mt-sm-0">
              <v-btn block size="large"
                >點我前往 <br />
                「國家工藝檢測修護平臺」</v-btn
              >
            </span>
          </v-col>
        </v-row>

        <div
          class="d-flex flex-column flex-sm-row align-center justify-space-between title"
        >
          <h2>修護課程</h2>
          <div class="search">
            <span>
              <input
                v-model="searchInput"
                type="text"
                @keyup.enter="search()"
              />
              <button @click="search()">
                <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>
              沒有符合搜尋條件的項目
            </div>
          </div>
        </div>

        <ul class="course-list">
          <li v-for="(item, index) in testData_1" :key="index" class="mb-10">
            <v-card
              variant="outlined"
              class="d-flex flex-column align-center pa-0"
            >
              <h2 class="text-center ma-0 pa-3">{{ item.title }}</h2>

              <div class="d-flex flex-column flex-sm-row align-center content">
                <img src="@/assets/img/img-04.jpg" alt="" />
                <section
                  class="d-flex flex-column justify-space-between px-5 px-sm-10 py-5 py-md-0"
                >
                  <p>{{ item.describe }}</p>
                  <div class="mt-10">
                    <span class="d-flex align-center">
                      <v-icon
                        color="gray"
                        icon="mdi-calendar-range"
                        class="me-2"
                      ></v-icon>
                      <p>
                        {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }}
                        ～ {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
                      </p>
                    </span>
                    <span class="d-flex align-center mt-1">
                      <v-icon
                        color="gray"
                        icon="mdi-map-marker"
                        class="me-2"
                      ></v-icon>
                      <p>
                        {{ item.address }}
                      </p>
                    </span>
                  </div>
                </section>
              </div>
            </v-card>
          </li>
        </ul>

        <div class="d-flex justify-end">
          <button class="past-btn">觀看已過期課程</button>
        </div>

        <h2 class="my-10">工藝修護師</h2>

        <v-row class="master-list">
          <v-col cols="12" md="6" class="v-col-md-6 v-col-12 d-flex flex-column flex-md-row align-center justify-md-center">
            <img src="@/assets/img/college-group/repair/修護-12.png" alt="" />
            <section class="mt-5 mt-md-0 ms-md-5">
              <h3>廖偉淇</h3>
              <span class="d-block mt-3 mb-5">金工木印工作室</span>
              <ul>
                <li>主要修護媒材</li>
                <li>金屬：金/銀首飾、銀/銅茶具、餐具。</li>
                <li>陶瓷：花器、餐具、茶道具、香道具。</li>
                <li>主要修復技法：鋦瓷、漆繕、金工鍛造、脫腊鑄造。</li>
              </ul>
            </section>
          </v-col>
          <v-col cols="12" md="6" class="v-col-md-6 v-col-12 d-flex flex-column flex-md-row align-center justify-md-center">
            <img src="@/assets/img/college-group/repair/修護-13.png" alt="" />
            <section class="mt-5 mt-md-0 ms-md-5">
              <h3>陳高登</h3>
              <span class="d-block mt-3 mb-5">金工木印工作室</span>
              <ul>
                <li>主要修護媒材</li>
                <li>陶瓷器物</li>
              </ul>
            </section>
          </v-col>
        </v-row>

        <h2 class="mt-16 mb-10">修護故事</h2>

        <ul class="story-list">
          <li v-for="(item, index) in testData_2" :key="index" class="mb-5">
            <section class="d-flex">
              <p class="mx-3 my-5 date">
                {{ moment(`${item.start_time}`).format("YYYY-MM-DD") }}
              </p>
            </section>
            <v-card
              variant="outlined"
              class="d-flex flex-md-row flex-column align-center pa-5"
            >
              <v-row class="align-center">
                <v-col cols="12" sm="5" md="3">
                  <router-link :to="`/news/${item.news_id}`" class="cover-img">
                    <img src="@/assets/img/img-04.jpg" alt="" />
                  </router-link>
                </v-col>
                <v-col cols="12" sm="7" md="9">
                  <section class="d-flex flex-column py-5 py-md-0">
                    <h2 class="mb-8">{{ item.title }}</h2>
                    <p v-html="item.describe"></p>
                  </section>
                </v-col>
              </v-row>
            </v-card>
          </li>
        </ul>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
h3 {
  font-weight: 400;
}

.video {
  position: relative;
  padding-bottom: 56%;
  overflow: hidden;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

p {
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 28px;
}

.article-block {
  h4 {
    font-size: 26px;
    font-weight: 400;
    line-height: 40px;
  }

  .v-btn {
    height: 65px;
    color: #fff;
    font-weight: 300;
    border-radius: 100px;
    background-color: #569f33;
    @media (max-width: 960px) {
      font-size: 14px;
    }
    @media (max-width: 600px) {
      font-size: 16px;
    }
  }
}

.course-list {
  .v-card {
    border: none;
    border-radius: 20px;
    background-color: #e9f1f4;
    h2 {
      width: 100%;
      font-size: 24px;
      border-bottom: 3px solid #fff;
    }
    .content {
      padding: 20px;
      p:first-child {
        font-weight: 300;
        line-height: 28px;
        color: #606064;
      }
    }
  }
}

.course-list,
.story-list {
  img {
    width: 100%;
    max-width: 300px;
    height: 220px;
    object-fit: cover;
    @media (max-width: 600px) {
      max-width: 100%;
    }
  }
  .date {
    font-size: 20px;
    font-weight: 400;
  }
}

.master-list {
  img {
    width: 250px;
    height: 250px;
    object-fit: cover;
  }
  h3 {
    font-size: 20px;
    color: #000;
  }
  section {
    text-align: center;
    color: #606064;
    li {
      line-height: 28px;
    }
  }
}

.past-btn {
  padding: 15px 40px;
  color: #606064;
  border-radius: 100px;
  border: 2px solid #569f33;
}
</style>
