<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";
import moment from "moment";
import CourseCard from "@/components/CourseCard.vue";

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

onMounted(() => {
  store.getFavoriteClass();
});

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "navbar.craft_groups",
    disabled: true,
  },
  {
    title: "college_group_5",
    disabled: true,
  },
]);

const faqList = [
  {
    q: "問：社區關懷據點（或其他弱勢族群）想導入工藝手作陪伴，應如何做？",
    a: "答：原有執行之其他課程，經評估可部分以工藝手作取代，確認日期及時段，可洽 049-2334141 分機 237 楊小姐，媒合就地或鄰近工藝師前往教學。",
  },
  {
    q: "問：職能治療師若想加入「臺灣綠工藝希望工程」工藝手作陪伴，應如何參與？",
    a: "答：請與 049-2334141 分機 237 楊小姐聯繫，將會媒合就地或鄰近有教學需求之單位或團體。",
  },
  {
    q: "問：工藝手作陪伴有什麼好處？",
    a: "答：工藝手作活動可以達到認知上的訓練，最主要是因為工藝可提供豐富的感官刺激，透過創作的想像力、創意，以及作品自我表達能力的滿足感，在認知上的訓練就非常有效果。在運用手部動作過程中，可刺激活化腦部功能，延緩失智失能。在社交人際互動過程中，在製作工藝品中，成員間互相協助幫忙，形成良好互動，甚至是在完成作品與其他的好朋友互相分享。",
  },
  {
    q: "問：想要投入弱勢族群教學的工藝師，有限定其工藝種類嗎？",
    a: "答：無限制工藝種類，但工藝師規劃手作時以安全性高、操作不複雜為考量。",
  },
  {
    q: "問：工藝師應規劃幾堂的課程較為適合？",
    a: "答：以每週執行一次，每次 2 小時，持續 6 至 8 週為宜，若對於未曾執行過工藝手作之族群，可先安排體驗式課程，再漸進式導入，惟仍依各單位需求彈性調整。",
  },
  {
    q: "問：工藝師若想加入「臺灣綠工藝希望工程」工藝手作陪伴，應如何參與？",
    a: "答：請與 049-2334141 分機 237 楊小姐聯繫，請規劃並提供適合的課程，將會媒合就地或鄰近有教學需求之單位或團體。",
  },
];

// 活動現場
let activityPageNum = ref(1); // 頁數(預設第一頁)
let activityPageAmount = ref(12); // 每頁顯示筆數
let activityTotalPages = ref(1); // 總頁數

// 媒體報導
let mediaPageNum = ref(1); // 頁數(預設第一頁)
let mediaPageAmount = ref(12); // 每頁顯示筆數
let mediaTotalPages = ref(1); // 總頁數

let loading = ref(false);
const activityList = ref(null);
const mediaList = ref(null);

watch(activityPageNum, () => {
  getClasses();
  activityList.value.scrollIntoView({ behavior: "smooth", block: "start" });
});

watch(mediaPageNum, () => {
  getTgcReport();
  mediaList.value.scrollIntoView({ behavior: "smooth", block: "start" });
});

const tgcImg = reactive({
  classes: [],
});

// 獲取活動現場資料
async function getClasses() {
  loading.value = true;
  let url = `${store.apiUrl}/api/get_tgc_img?page_num=${activityPageNum.value}&page_amount=${activityPageAmount.value}`;

  try {
    const response = await axios.get(url);
    tgcImg.classes = response.data.tgc_pic;
    activityTotalPages.value = store.getTotalPages(response.data.total_num, 12);
    console.log(response);
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
}

getClasses();

const tgcReport = reactive({
  classes: [],
});

// 獲取媒體報導資料
async function getTgcReport() {
  loading.value = true;
  let url = `${store.apiUrl}/api/get_tgc_report?page_num=${mediaPageNum.value}&page_amount=${mediaPageAmount.value}`;

  try {
    const response = await axios.get(url);
    tgcReport.classes = response.data.tgc_report;
    mediaTotalPages.value = store.getTotalPages(response.data.total_num, 12);

    console.log("report", response);
  } catch (error) {
    loading.value = false;
    console.error(error);
  }
}

getTgcReport();

// 媒體報導
let coursePageNum = ref(1); // 頁數(預設第一頁)
let coursePageAmount = ref(6); // 每頁顯示筆數
let courseTotalPages = ref(1); // 總頁數
let courseLoading = ref(false);
let courseList = ref(null);

const courseData = reactive({
  classes: [],
});

// 切換分頁時回到列表上方
watch(coursePageNum, () => {
  getClass();
  courseList.value.scrollIntoView({ behavior: "smooth", block: "start" });
});

// group_sort 希望工程
async function getClass() {
  courseLoading.value = true;

  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_class_name?group_id=9&is_check=1&page_num=${coursePageNum.value}&page_amount=${coursePageAmount.value}`
    );
    courseTotalPages.value = store.getTotalPages(response.data.total_num, 6);
    courseData.classes = response.data.classes;
    courseLoading.value = false;
    console.log("getClass 希望工程", courseData.classes);
  } catch (error) {
    courseLoading.value = false;
    console.error(error);
  }
}

getClass();
</script>

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

  <div class="title">
    <h2>{{ t("about_craft_for_all") }}</h2>
  </div>

  <v-row>
    <v-col cols="12" md="6">
      <p class="mb-5">
        以工藝為媒介，實踐社會價值功能。臺灣工藝學習平台啟動「臺灣綠工藝希望工程」，本於自然、循環、平衡、寬容、生命力等綠工藝精神，融合人文關懷，深化工藝與社會的互動連結，為所有人帶來「希望‧療癒‧陪伴」的力量。
      </p>
      <p>
        「臺灣綠工藝希望工程」是公民互助精神的體現，以「One Community, One
        Craft（OCOC）」一社群一工藝理念，凝聚社會力量，以工藝師、職能治療師提供核心支持服務，以社區、NGO團體、相關民間組織及政府單位為平台，在社福體系中的醫療機構、長照機構與社區照顧關懷據點等，向社會上包含樂齡長者、兒童、婦女、身心障礙者等所有人，傳達工藝手作的溫暖。以工藝投入社會服務，引領身心靈向上提升，也形成一股陪伴的安定力量，促進社會關係的融合與共好。
      </p>
    </v-col>
    <v-col cols="12" md="6">
      <div class="about-img">
        <img
          class="img-fluid"
          src="@/assets/img/college-group/life/生活工藝素材-24.png"
          alt="臺灣工藝學習平台"
        />
      </div>
    </v-col>
  </v-row>

  <div class="title" ref="activityList">
    <h2>{{ t("event") }}</h2>
  </div>

  <v-row>
    <v-col
      sm="6"
      md="4"
      cols="12"
      class="pa-5"
      v-for="(item, index) in tgcImg.classes"
      :key="index"
    >
      <div class="main-card">
        <div class="card-info">
          <div class="overflow-hidden">
            <v-img
              class="mx-auto cover-img"
              :lazy-src="item.pic_url"
              :src="item.pic_url"
              height="16.875em"
              cover
              alt="臺灣工藝學習平台"
            >
              <template v-slot:placeholder>
                <div class="d-flex align-center justify-center fill-height">
                  <v-progress-circular
                    color="grey-lighten-4"
                    indeterminate
                  ></v-progress-circular>
                </div>
              </template>
            </v-img>
          </div>

          <div class="card-title">
            <h3>{{ item.pic_name }}</h3>
          </div>
        </div>
      </div>

      <!-- <div class="main-card">
        <div class="card-info">
          <img :src="item.pic_url" alt="臺灣工藝學習平台" class="cover-img" />
        </div>
        <section class="card-title">
          <h3>{{ item.pic_name }}</h3>
        </section>
      </div> -->
    </v-col>
  </v-row>

  <v-pagination
    v-model="activityPageNum"
    :length="activityTotalPages"
    rounded="circle"
    class="mt-16"
  ></v-pagination>

  <div class="title" ref="mediaList">
    <h2>{{ t("media_coverage") }}</h2>
  </div>

  <ul class="tgc-report">
    <li
      class="d-flex align-center justify-space-between"
      v-for="(item, index) in tgcReport.classes"
      :key="index"
    >
      <div class="info">
        <a :href="item.url" target="_blank">
          <p class="report-title font-weight-normal">
            {{ item.title }}
          </p>
        </a>
      </div>
      <div class="date time-block">
        <span> {{ moment(`${item.create_time}`).format("YYYY-MM-DD") }}</span>
      </div>
    </li>
  </ul>
  <v-pagination
    v-model="mediaPageNum"
    :length="mediaTotalPages"
    rounded="circle"
    class="mt-16"
  ></v-pagination>

  <div>
    <h2 class="title">{{ t("faq") }}</h2>
  </div>

  <v-expansion-panels>
    <v-expansion-panel v-for="item in faqList" :key="item">
      <v-expansion-panel-title>{{ item.q }}</v-expansion-panel-title>
      <v-expansion-panel-text v-html="item.a"> </v-expansion-panel-text>
    </v-expansion-panel>
  </v-expansion-panels>

  <div ref="courseList">
    <h2 class="title">{{ t("craft_for_all") }}</h2>
  </div>

  <div class="d-flex justify-center mb-10" v-if="courseLoading">
    <v-progress-circular
      color="grey-lighten-4"
      indeterminate
    ></v-progress-circular>
  </div>

  <v-row v-else>
    <v-col
      sm="6"
      lg="4"
      cols="12"
      v-for="(item, index) in courseData.classes"
      :key="index"
      class="pa-5"
    >
      <CourseCard :data="item" />
    </v-col>
  </v-row>

  <v-pagination
    v-model="coursePageNum"
    :length="courseTotalPages"
    rounded="circle"
    class="mt-16"
  ></v-pagination>
</template>

<style lang="scss" scoped>
.about-img {
  width: 80%;
  height: auto;
  margin: auto;
}

.card-info {
  height: 100%;
  padding-bottom: 0;
  .card-title {
    margin: auto;
    border-bottom: none;
    cursor: pointer;
    h3 {
      font-weight: 500;
    }
  }
}

p {
  font-weight: 400;
  letter-spacing: 0.0625em;
  line-height: 1.875em;
}

.tgc-report {
  li {
    padding: 1.875em 0;
    border-bottom: 0.0625em solid #c9c9c9;
    .info {
      a {
        transition: all 0.3s;
        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
  .report-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    @media (max-width: 960px) {
      white-space: normal;
    }
  }
}
.time-block {
  padding: 0 0 0 1.25em;
  span {
    width: 5.625em;
    display: block;
  }
}
.v-expansion-panel-title,
.v-expansion-panel-text {
  font-size: 1em;
  line-height: 1.875em;
  letter-spacing: 0.0625em;
}
.v-expansion-panel-text {
  padding: 0.9375em 1.25em;
  font-size: 1em;
}
</style>
