<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 = [
  {
    title: "工藝跨域研創補助計畫【徵件至9月28日止】",
    start_time: "2023/06/15",
    end_time: "2023/09/28",
    address: "國立台灣工藝研究發展中心",
    img: store.getImageUrl("college-group/img.jpg"),
  },
  {
    title: "積極性藝文紓困補助方案",
    start_time: "2023/06/15",
    end_time: "2023/09/28",
    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/未來工藝 橫幅.png" alt="" />
        <h1>未來工藝</h1>
      </div>
      <div class="main-block">
        <v-breadcrumbs
          :items="breadcrumbs"
          divider="/"
          class="mt-10 p-0"
        ></v-breadcrumbs>

        <div class="title">
          <h2>研發補助</h2>
        </div>

        <ul>
          <li v-for="(item, index) in testData" :key="index" class="mb-10">
            <v-card
              variant="outlined"
              class="d-flex flex-md-row flex-column align-center pa-5"
            >
              <v-row class="align-center">
                <v-col sm="4" cols="12">
                  <img src="@/assets/img/img-04.jpg" alt="" />
                </v-col>
                <v-col sm="8" cols="12">
                  <section
                    class="d-flex flex-column px-5 px-sm-10 py-5 py-md-0"
                  >
                    <h2 class="ms-0 mb-16">{{ item.title }}</h2>
                    <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-3">
                      <v-icon
                        color="gray"
                        icon="mdi-map-marker"
                        class="me-2"
                      ></v-icon>
                      <p>
                        {{ item.address }}
                      </p>
                    </span>
                  </section>
                </v-col>
              </v-row>
            </v-card>
          </li>
        </ul>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
.main-block {
  img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }

  span {
    line-height: 24px;
  }
}
</style>
