<script setup>
import { ref, reactive, watch, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";
import Navbar from "@/components/Navbar.vue";
import PDFViewer from "@/components/PDFViewer.vue";
import craftsPdfList from "@/utils/useCraftsPdf";
import ArticleCard from "@/components/ArticleCard.vue";
import CraftsArticle from "@/components/CraftsArticle.vue";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const store = useMainStore();
const routeHash = route.hash; // 網址參數(錨點)
const bookName = route.params.id; // 網址參數(pdf書名)

if (routeHash) {
  setTimeout(() => {
    const targetElement = document.querySelector(routeHash);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: "smooth" });
    }
  }, 500);
}

onMounted(() => {
  if (bookName) {
    setTimeout(() => {
      let book = read.list.filter((item) => item.article_id == bookName);
      updatePDF(book[0].files);
    }, 1000);
  }
});

let searchInput = ref("");
let searchError = ref(false);
let currentPage = ref(1); // 當前頁數(預設第一頁)
let itemsPerPage = ref(5); // 每頁顯示筆數
let totalPages = ref(1); // 總頁數
const newsAll = reactive({
  list: [],
});
const newsData = reactive({
  list: [],
});

(async function getData() {
  try {
    const response = await axios.get(`${store.apiUrl}/api/get_news`);
    console.log("response", response.data.news);
    newsAll.list = response.data.news;
    newsData.list = response.data.news;
    totalPages.value = store.getTotalPages(response.data.news.length, 5); // 計算頁數
  } catch (error) {
    console.error(error);
  }
})();

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

(async function getArticle() {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?group_sort=論文補助`
    );
    thesis.list = response.data.articles;
    console.log("response", response.data.articles);
  } catch (error) {
    console.error(error);
  }
})();

// 搜尋
async function search() {
  searchError.value = false;
  let keyword = searchInput.value;
  if (keyword !== "") {
    try {
      const response = await axios.get(
        `${store.apiUrl}/api/search_news_like?keyword=${keyword}`
      );
      if (response.data.news.length !== 0) {
        newsData.list = response.data.news;
      } else {
        searchError.value = true;
      }
    } catch (error) {
      console.error(error);
    }
  } else {
    newsData.list = newsAll.list;
  }
}

const searchLocation = ref(null);

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

// 分頁顯示
const paginatedList = computed(() => {
  const startIndex = (currentPage.value - 1) * itemsPerPage.value;
  const endIndex = startIndex + itemsPerPage.value;
  return newsData.list.slice(startIndex, endIndex);
});

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

const tagList = reactive([
  {
    title: "crafts.title_1",
    url: "#articleList",
  },
  {
    title: "crafts.title_2",
    url: "#readList",
  },
  {
    title: "crafts.title_3",
    url: "#bookList",
  },
  {
    title: "crafts.title_4",
    url: "#journal",
  },
  {
    title: "crafts.title_5",
    url: "#thesisGrant",
  },
]);

let fileName = ref(""); // PDFViewer Props
const readRef = ref(null);
const viewerRef = ref(null);

function updatePDF(name) {
  // 更新 pdf 後移除網址參數
  router.replace({ path: "/crafts" });
  fileName.value = name;
  if (!store.isMobile) {
    setTimeout(() => {
      viewerRef.value.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 300);
  }
}

function isAnchorLink(url) {
  // 檢查 URL 是否為錨點
  return url.startsWith("#");
}

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

// 線上閱讀
(async () => {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?group_sort=線上閱讀`
    );
    read.list = response.data.articles;
    console.log("線上閱讀", read.list);
  } catch (error) {
    console.error(error);
  }
})();

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

// 工藝書單
(async () => {
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?group_sort=工藝書單`
    );
    book.list = response.data.articles;
    console.log("工藝書單", response.data.articles);
  } catch (error) {
    console.error(error);
  }
})();

// 正則表達式移除 style 屬性
const filteredContent = (content) => {
  const regex = /style="text-align: center;"/g;
  return content.replace(regex, "");
};

function handlePdfUrl(pdf) {
  let json = pdf.replace(/'/g, '"');
  let file = JSON.parse(json);
  let url = file.file1;
  return url;
}
</script>

<template>
  <Navbar />
  <div class="bg-img">
    <v-container class="position-relative">
      <div class="article-content">
        <v-breadcrumbs :items="breadcrumbs" divider="/" class="my-5">
          <template v-slot:title="{ item }">
            {{ t(item.title) }}
          </template>
        </v-breadcrumbs>

        <v-row class="px-sm-10 pb-3 tag-btn">
          <v-col
            v-for="(item, index) in tagList"
            :key="index"
            :cols="index + 1 === tagList.length ? '12' : '6'"
            md=""
          >
            <a
              v-if="isAnchorLink(item.url)"
              :href="item.url"
              @click.stop
              class="py-3 py-sm-6 item"
            >
              <!-- 錨點 -->
              <h3>{{ t(`${item.title}`) }}</h3>
            </a>
            <a v-else :href="item.url" target="_blank" class="py-3 py-lg-6">
              <!-- 網址 -->
              <h3>{{ t(`${item.title}`) }}</h3>
            </a>
          </v-col>
        </v-row>

        <h2 id="articleList" class="mb-16 pb-5">{{ t("crafts.title_1") }}</h2>

        <!-- <div class="search pt-5 my-10 me-sm-16" ref="searchLocation">
          <span>
            <input
              v-model="searchInput"
              type="text"
              @keyup.enter="search()"
              placeholder="關鍵字搜尋"
            />
            <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>
            {{ t("no_found") }}
          </div>
        </div> -->

        <CraftsArticle />

        <h2 ref="readRef" id="readList">{{ t("crafts.title_2") }}</h2>

        <v-row class="justify-center align-start mt-16 read-list">
          <v-col
            cols="12"
            sm="6"
            md="4"
            v-for="(item, index) in read.list"
            :key="index"
            class="d-flex flex-row flex-sm-column align-center px-sm-10"
          >
            <a
              v-if="store.isMobile"
              :href="handlePdfUrl(item.files)"
              target="_blank"
            >
              <v-img
                class="mx-auto cover-img"
                :lazy-src="`${store.imgUrl}/${item.cover_img}`"
                :src="`${store.imgUrl}/${item.cover_img}`"
                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>
              <!-- <img :src="item.img" alt="臺灣工藝學習平台" /> -->
            </a>

            <!-- <img
              v-else
              :src="item.img"
              alt="臺灣工藝學習平台"
              @click="updatePDF(item.fileName)"
            /> -->

            <v-img
              v-else
              class="mx-auto cover-img"
              :lazy-src="`${store.imgUrl}/${item.cover_img}`"
              :src="`${store.imgUrl}/${item.cover_img}`"
              @click="updatePDF(item.files)"
              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>

            <!-- <a :href="item.url" target="_blank">
              <img :src="item.img" alt="臺灣工藝學習平台" />
            </a> -->
            <section>
              <h3 v-html="item.title"></h3>
              <!-- <p>{{ item.depiction }}</p> -->
            </section>
          </v-col>
        </v-row>

        <div ref="viewerRef">
          <PDFViewer :file="fileName" />
        </div>

        <h2 id="bookList" class="mb-16">{{ t("crafts.title_3") }}</h2>

        <!-- <div class="search pt-5 my-10 me-sm-16" ref="searchLocation ">
          <span>
            <input
              v-model="searchInput"
              type="text"
              @keyup.enter="search()"
              placeholder="關鍵字搜尋"
            />
            <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>
            {{ t("no_found") }}
          </div>
        </div> -->

        <v-row class="justify-center book-list">
          <v-col
            cols="12"
            sm="10"
            md="6"
            v-for="(item, index) in book.list"
            :key="index"
            class="position-relative mt-10 mb-16 pb-16"
          >
            <a
              :href="$router.resolve(`/article-detail/${item.article_id}`).href"
            >
              <div class="overflow-hidden">
                <v-img
                  class="mx-auto cover-img"
                  :lazy-src="`${store.imgUrl}/${item.cover_img}`"
                  cover
                  :src="`${store.imgUrl}/${item.cover_img}`"
                  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>
            </a>

            <!-- <a :href="item.url" target="_blank">
              <img :src="item.img" alt="臺灣工藝學習平台" />
            </a> -->
            <section class="info">
              <p v-html="filteredContent(item.content)"></p>
              <span>{{ JSON.parse(item.tags)[0] }}</span>
            </section>
          </v-col>
        </v-row>

        <!-- <v-pagination
          v-model="currentPage"
          class="my-4"
          :length="totalPages"
        ></v-pagination> -->

        <h2 id="journal">{{ t("crafts.title_4") }}</h2>

        <div class="journal-content">
          <p>
            臺灣工藝學刊(Journal of
            Craftology｜Taiwan)是由中華民國文化部所屬臺灣工藝學習平台所出版之學術性半年刊，創立於2021年。
            <br />
            <br />
            本刊企圖以工藝為問題意識核心，致力於工藝學跨領域思維整合之研究論文，內容涵蓋當代工藝多元價值論述，藝術與人文、社會及科學之跨領域發展整合、產生對話與交集，提供工藝研究交流平台，經由公開徵求工藝相關領域之研究論文稿件，旨在促進臺灣工藝文化主體與工藝產業發展的學術研究質量，建構國內工藝學知識體系，以提升國內工藝學術研究水準。
          </p>

          <div class="list">
            <span class="title">
              <p>學刊主題</p>
              <p>發刊</p>
            </span>

            <ul>
              <li>
                <p>臺灣工藝學刊－第 1 期</p>
                <p>2022.11</p>
              </li>
              <li>
                <p>臺灣工藝學刊－創刊特別號</p>
                <p>2021.12</p>
              </li>
            </ul>
          </div>

          <div class="pdf-list">
            <div class="side-title">
              <h5>研究論文</h5>
              <h5>實務報告</h5>
            </div>
            <ul>
              <li v-for="(item, index) in craftsPdfList" :key="index">
                <h3>{{ item.title }}</h3>
                <h4>{{ item.en_title }}</h4>
                <p>{{ item.author }}　{{ item.en_author }}</p>
                <p>
                  關鍵字：{{ item.keywords }} <br />
                  keywords：{{ item.en_keywords }}
                </p>
                <a
                  :href="`${store.imgUrl}/pdf/crafts/${item.fileName}.pdf`"
                  download
                >
                  <span>
                    <v-icon
                      icon="mdi-download"
                      color="gray"
                      class="me-2 pt-1"
                    ></v-icon>
                    全文下載
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>

        <h2 id="thesisGrant">{{ t("crafts.title_5") }}</h2>

        <ul class="mt-10">
          <li
            v-for="(item, index) in thesis.list"
            :key="index"
            class="post-item pa-5"
            rounded="xl"
          >
            <ArticleCard :data="item" type="article" />
          </li>
        </ul>
      </div>
    </v-container>
  </div>
</template>

<style lang="scss" scoped>
.article-content {
  margin-bottom: 9.375em;
}

h2 {
  padding-top: 6.25em;
  font-size: 1.875em;
  font-weight: 500;
  text-align: center;
}

.bg-img {
  background-image: url("@/assets/img/crafts/background.png");
  background-size: cover;
  background-position: top;
  @media (max-width: 960px) {
    background-size: contain;
    background-repeat: repeat;
  }
}

.read-list,
.book-list {
  p {
    margin-bottom: 0.625em;
  }
  h3,
  p {
    font-weight: 500;
    text-align: center;
    line-height: 1.875em;
  }
}

.read-list {
  .v-img {
    width: 100%;
    // height: 100%;
    max-height: 25em;
    object-fit: cover;
    cursor: pointer;

    @media (max-width: 600px) {
      width: 50%;
    }
  }

  @media (max-width: 600px) {
    section {
      width: 50%;
      padding: 0 0.625em;
      font-size: 0.875em;
    }
  }

  p {
    width: 18.125em;

    @media (max-width: 600px) {
      width: auto;
    }
  }
}

.book-list {
  margin-bottom: 6.25em;
  .info {
    width: 26.875em;
    padding: 0.625em 1.25em;
    position: absolute;
    right: -2.5em;
    bottom: -3.75em;
    z-index: 1;
    background: rgba(255, 255, 255, 0.8);
    border: 0.125em solid #c8cbcc;

    @media (max-width: 1280px) {
      width: 25em;
    }

    @media (max-width: 600px) {
      width: 20.625em;
      right: -0.1875em;
      bottom: -5em;
    }

    p {
      width: 18.75em;
      margin-bottom: 0;
      text-align: start;
    }
    span {
      display: block;
      margin-top: auto;
      position: absolute;
      bottom: 0.9375em;
      right: 0.9375em;
    }
  }
}

.pdf-list {
  display: flex;
  margin: 6.25em 0;
  .side-title {
    padding: 4.375em 0 4.375em 0.625em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.3125em;
    background-color: var(--purple);
    h5 {
      padding: 1.25em 0.625em;
      position: relative;
      font-size: 1.625em;
      font-weight: 400;
      writing-mode: vertical-rl; // 垂直
      color: var(--purple);
      letter-spacing: 0.125em;
      background-color: #fff;

      @media (max-width: 600px) {
        font-size: 1.25em;
      }

      &::after,
      &::before {
        content: "";
        display: block;
        height: 0.9375em;
        width: 105%;
        background: #fff;
        position: absolute;
      }

      &::after {
        top: -0.4em;
        right: -0.2em;
        transform: rotate(-15deg);

        @media (max-width: 1200px) {
          top: -0.5em;
          right: -0.1875em;
        }
      }
      &::before {
        bottom: -0.4em;
        right: -0.2em;
        transform: rotate(15deg);

        @media (max-width: 1200px) {
          bottom: -0.5em;
          right: -0.1875em;
        }
      }
    }
  }
  ul {
    background-color: #fff;
    padding: 3.125em 3.125em 0 3.125em;

    @media (max-width: 600px) {
      padding: 1.5em 1.5em 0 1.5em;
    }

    li {
      margin-bottom: 1.5em;
      padding-bottom: 1.5em;
      border-bottom: 0.0625em dashed #ccc;

      &:last-child {
        margin-bottom: 0;
        // padding-bottom: 0;
      }
      h3 {
        font-size: 1.375em;
        line-height: 1.875em;
        @media (max-width: 600px) {
          font-size: 1.125em;
        }
      }
      h4 {
        margin: 0.9375em 0;
        font-size: 1.125em;
        line-height: 1.625em;
        color: var(--gray);
        @media (max-width: 600px) {
          font-size: 1em;
        }
      }
      h3,
      h4 {
        font-weight: 500;
      }
      h3,
      h4,
      p {
        letter-spacing: 0.0625em;
      }
      p {
        font-size: 0.875em;
        color: var(--gray);
      }
      a {
        display: inline-block;
        padding: 0.3125em 0.625em;
        margin-top: 1.25em;
        font-size: 0.875em;
        border-radius: 0.3125em;
        border: 0.125em solid var(--gray);
        transition: all 0.3s;

        &:hover {
          opacity: 0.7;
        }

        span {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}

.journal-content {
  margin-top: 5em;
  p {
    line-height: 1.75em;
  }
  .list {
    letter-spacing: 0.0625em;
    .title {
      margin-top: 6.25em;
      padding-bottom: 1.25em;
      font-size: 1.25em;
      border-bottom: 0.125em solid var(--purple);
    }

    .title,
    ul li {
      display: flex;
      justify-content: space-between;
    }

    ul {
      margin-top: 1.25em;
      li {
        margin-top: 0.625em;
        padding-bottom: 0.625em;
        border-bottom: 0.125em dashed #dddddd;
        // &:first-child {
        //   border-bottom: 0.125em dashed #ccc;
        // }
        p {
          font-weight: 400;
        }
      }
    }
  }
}
</style>
