<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
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 = [
  {
    title: "種子教師研習",
    start_time: "2023/06/15",
    end_time: "2023/06/20",
    address: "地方工藝館 工藝教室",
    introduction: "為推動工藝融入學校教育，促進工藝美學校園扎根，透過手作體驗課程，培育學校教師成為種子教師，並回到教學現場發展工藝體驗課程，傳遞工藝所能帶來的生活連結與美好體驗，誘發學生「動手做工藝」的學習興趣，開啟工藝與教育融合共好的無限可能性！ 以「綠工藝」核心理念～自然、循環、平衡、寬容、生命力，將工藝體驗課程引介進入教育系統，透過辦理工藝手作課程，培育校園工藝種子人才，發展手作體驗課程，讓工藝融入教學，傳遞工藝所能帶來的生活連結與美好體驗，達到臺灣工藝價值的社會實踐。",
    img: store.getImageUrl("college-group/img.jpg"),
  },
  {
    title: "種子教師研習",
    start_time: "2023/06/15",
    end_time: "2023/06/20",
    address: "地方工藝館 工藝教室",
     introduction: "為推動工藝融入學校教育，促進工藝美學校園扎根，透過手作體驗課程，培育學校教師成為種子教師，並回到教學現場發展工藝體驗課程，傳遞工藝所能帶來的生活連結與美好體驗，誘發學生「動手做工藝」的學習興趣，開啟工藝與教育融合共好的無限可能性！ 以「綠工藝」核心理念～自然、循環、平衡、寬容、生命力，將工藝體驗課程引介進入教育系統，透過辦理工藝手作課程，培育校園工藝種子人才，發展手作體驗課程，讓工藝融入教學，傳遞工藝所能帶來的生活連結與美好體驗，達到臺灣工藝價值的社會實踐。",
    img: store.getImageUrl("college-group/img.jpg"),
  },
  {
    title: "種子教師研習",
    start_time: "2023/06/15",
    end_time: "2023/06/20",
    address: "地方工藝館 工藝教室",
     introduction: "為推動工藝融入學校教育，促進工藝美學校園扎根，透過手作體驗課程，培育學校教師成為種子教師，並回到教學現場發展工藝體驗課程，傳遞工藝所能帶來的生活連結與美好體驗，誘發學生「動手做工藝」的學習興趣，開啟工藝與教育融合共好的無限可能性！ 以「綠工藝」核心理念～自然、循環、平衡、寬容、生命力，將工藝體驗課程引介進入教育系統，透過辦理工藝手作課程，培育校園工藝種子人才，發展手作體驗課程，讓工藝融入教學，傳遞工藝所能帶來的生活連結與美好體驗，達到臺灣工藝價值的社會實踐。",
    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/cross/banner.png" alt="" />
        <h1>跨域工藝</h1>
      </div>
      <div class="main-block">
        <v-breadcrumbs
          :items="breadcrumbs"
          divider="/"
          class="mt-10 pa-0"
        ></v-breadcrumbs>

        <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>

        <v-row>
          <v-col
            sm="6"
            md="4"
            cols="12"
            v-for="(item, index) in testData"
            :key="index"
            class="pa-5"
          >
            <div class="main-card">
              <section class="card-title">
                <h3>{{ item.title }}</h3>
              </section>
              <div class="card-info">
                <img :src="item.img" alt="" class="cover-img" />
                <ul>
                  <li class="d-flex align-center">
                    <img src="@/assets/img/icon/date_icon.png" alt="" />
                    <p class="mb-0 ms-3">
                      {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }} -
                      {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
                    </p>
                  </li>
                  <li class="d-flex align-center mt-3">
                    <img src="@/assets/img/icon/location_icon.png" alt="" />
                    <p class="mb-0 ms-3">
                      {{ item.address }}
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </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>

        <v-row>
          <v-col
            sm="6"
            md="4"
            cols="12"
            v-for="(item, index) in testData"
            :key="index"
            class="pa-5"
          >
            <div class="main-card">
              <section class="card-title">
                <h3>{{ item.title }}</h3>
              </section>
              <div class="card-info">
                <img :src="item.img" alt="" class="cover-img" />
                <ul>
                  <li class="d-flex align-center">
                    <img src="@/assets/img/icon/date_icon.png" alt="" />
                    <p class="mb-0 ms-3">
                      {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }} -
                      {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
                    </p>
                  </li>
                  <li class="d-flex align-center mt-3">
                    <img src="@/assets/img/icon/location_icon.png" alt="" />
                    <p class="mb-0 ms-3">
                      {{ item.address }}
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </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>

        <v-row>
          <v-col
            sm="6"
            md="4"
            cols="12"
            v-for="(item, index) in testData"
            :key="index"
            class="pa-5"
          >
            <div class="main-card">
              <section class="card-title">
                <h3>{{ item.title }}</h3>
              </section>
              <div class="card-info">
                <img :src="item.img" alt="" class="cover-img" />
                <ul>
                  <li class="d-flex align-center">
                    <img src="@/assets/img/icon/date_icon.png" alt="" />
                    <p class="mb-0 ms-3">
                      {{ moment(`${item.start_time}`).format("YYYY/MM/DD") }} -
                      {{ moment(`${item.end_time}`).format("YYYY/MM/DD") }}
                    </p>
                  </li>
                  <li class="d-flex align-center mt-3">
                    <img src="@/assets/img/icon/location_icon.png" alt="" />
                    <p class="mb-0 ms-3">
                      {{ item.address }}
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </v-col>
        </v-row>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 0;
  width: 90%;

  @media (max-width: 600px) {
    width: 85%;
  }
  .main-block {
    padding: 100px 80px;
    margin-top: -30%;
    background-color: #fff;

    @media (max-width: 960px) {
      padding: 100px 50px;
    }

    @media (max-width: 600px) {
      padding: 100px 20px;
    }

    h2 {
      font-size: 30px;
      font-weight: 500;
      line-height: 32px;
      margin-left: 10px;

      @media (max-width: 960px) {
        font-size: 24px;
      }

      @media (max-width: 600px) {
        margin-left: 0;
        margin-bottom: 50px;
      }
    }
    .title {
      margin: 80px 0;
      @media (max-width: 600px) {
        margin: 50px 0;
      }
    }
    .v-breadcrumbs {
      position: relative;
      z-index: 100;
      justify-content: flex-start;
      @media (max-width: 600px) {
        justify-content: center;
      }
    }
  }
}
</style>
