<script setup>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMainStore } from "@/stores/store";
import { useI18n } from "vue-i18n";
import axios from "axios";
import moment from "moment";
import Navbar from "@/components/Navbar.vue";

const { t } = useI18n();
const store = useMainStore();
const route = useRoute();
const router = useRouter();
const courseId = route.params.id; // 網址參數

console.log("courseId", courseId);

const breadcrumbs = reactive([
  {
    title: "home.title",
    disabled: false,
    href: "/",
  },
  {
    title: "college_group_1",
    disabled: false,
    href: "/college-group/future",
  },
  {
    title: "research_plan",
    disabled: true,
  },
]);

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

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

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

// 線上閱讀
(async () => {
  console.log("courseId", courseId);
  try {
    const response = await axios.get(
      `${store.apiUrl}/api/get_article?category=研究計畫&article_id=${courseId}`
    );
    articlesAll.list = response.data.articles;
    articles.list = response.data.articles[0];
    if (articles.list.buy_way !== "undefined") {
      buyWay.list = JSON.parse(articles.list.buy_way);
    }
    console.log("線上閱讀", articles);
    console.log("buyWay.list", buyWay.list);
  } catch (error) {
    console.error(error);
  }
})();

function handlerBuyImg(title) {
  console.log("title", title);
  let img;

  if (title === "博客來") {
    img = store.getImageUrl("college-group/future/proposal/購買連結-1.png");
  } else if (title === "金石堂") {
    img = store.getImageUrl("college-group/future/proposal/購買連結-2.png");
  } else if (title === "誠品線上") {
    img = store.getImageUrl("college-group/future/proposal/購買連結-3.png");
  } else if (title === "國家書店") {
    img = store.getImageUrl("college-group/future/proposal/購買連結-4.png");
  }

  return img;
}

function setPDFUrl(pdf) {
  if (pdf) {
    let json = pdf.replace(/'/g, '"');
    let file = JSON.parse(json);
    let url = file.file1;
    console.log("setPDFUrl url", url);

    return url;
  }
}
</script>

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

    <v-row class="my-16 proposal-container">
      <v-col cols="12" sm="8" md="9">
        <section>
          <h2 class="proposal-title" v-html="articles.list.title"></h2>

          <div class="content">
            <p v-html="articles.list.content"></p>

            <div v-if="articles.list.files !== '{}'" class="read-btn">
              <!-- <router-link :to="`/crafts/${articles.list.id}`"
                >點擊閱讀書籍</router-link
              > -->
              <a :href="setPDFUrl(articles.list.files)" target="_blank"
                >點擊閱讀書籍</a
              >
            </div>
          </div>
        </section>
      </v-col>
      <v-col cols="12" sm="4" md="3" class="d-flex flex-column align-center">
        <img
          class="cover-img"
          src="@/assets/img/college-group/future/素材-10.png"
          alt="臺灣工藝學習平台"
        />
        <span class="caption my-5">本書資訊</span>
        <ul>
          <li>著作：{{ articles.list.writer }}</li>
          <li>出版社：{{ articles.list.publish }}</li>
          <li>
            出版日期：{{
              moment(`${articles.list.publish_date}`).format("YYYY/MM/DD")
            }}
          </li>
          <li>語言：{{ articles.list.language }}</li>
          <li class="store-list">
            <p>購買：</p>
            <ul>
              <li v-for="(item, index) in buyWay.list" :key="index">
                <a :href="item.url" target="_blank">
                  <img
                    :src="handlerBuyImg(item.title)"
                    alt="臺灣工藝學習平台"
                  />
                </a>
                <!-- <a href="">
                  <img
                    src="@/assets/img/college-group/future/proposal/購買連結-2.png"
                    alt="臺灣工藝學習平台"
                  />
                </a> -->
              </li>
            </ul>
          </li>
        </ul>
      </v-col>
    </v-row>
  </v-container>
</template>

<style lang="scss">
.proposal-container {
  @media (max-width: 600px) {
    flex-direction: column-reverse;
  }

  .proposal-title {
    padding: 2.5em 0.625em;
    margin-bottom: 2.5em;
    text-align: center;
    font-size: 1.5em;
    letter-spacing: 0.125em;
    line-height: 2.25em;
    border-left: 0.9375em solid var(--blue);
    @media (max-width: 600px) {
      font-size: 1.25em;
    }
  }

  ul {
    width: 100%;
    line-height: 1.5em;
    li {
      margin-bottom: 0.3125em;
      line-height: 1.75em;
      letter-spacing: 0.0625em;
      a {
        display: block;
        margin-bottom: -0.625em;
      }
    }
  }

  .cover-img {
    width: 100%;
    height: 21.875em;
    object-fit: contain;
  }

  .caption {
    display: block;
    width: 100%;
    padding: 0.75em 1.875em;
    color: #fff;
    letter-spacing: 0.0625em;
    background-color: var(--blue);
    border-radius: 0.625em;
    text-shadow: 0.0625em 0.0625em 0.1875em #939393;
  }

  .store-list {
    display: flex;
    p {
      width: 4.0625em;
      white-space: nowrap;
    }
    img {
      width: 12.5em;
    }
  }

  .content {
    padding: 3.125em;
    border: 0.0625em solid var(--blue);
    border-radius: 0.625em;

    h2 {
      font-size: 1.25em;
    }

    p {
      letter-spacing: 0.0625em;
    }

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

    .read-btn {
      display: flex;
      justify-content: end;
      margin-top: 3.125em;

      a {
        padding: 0.9375em 2.5em;
        font-size: 1.125em;
        letter-spacing: 0.125em;
        text-shadow: 0.0625em 0.0625em 0.1875em #939393;
        background-color: #a7c2cd;
        color: white;
        cursor: pointer;
        border-radius: 6.25em;
        transition: all 0.3s;
        &:hover {
          background-color: #99b1bb;
        }
        @media (max-width: 600px) {
          font-size: 1em;
        }
      }
    }
  }
}
</style>
