<script setup>
import { ref, reactive } from "vue";
import axios from "axios";
import moment from "moment";
import Navbar from "@/components/Navbar.vue";

const newsAll = reactive({
  list: [],
});
const newsData = reactive({
  list: [],
});
let searchInput = ref("");
let searchError = ref(false);

// 取得資料
(async function getData() {
  try {
    const response = await axios.get("https://cmm.ai:8088/api/get_news");
    console.log("response", response.data.news);
    newsAll.list = response.data.news;
    newsData.list = response.data.news;
  } catch (error) {
    console.error(error);
  }
})();

// 搜尋
async function search() {
  searchError.value = false;
  let keyword = searchInput.value;
  console.log("keyword", keyword);
  if (keyword !== "") {
    try {
      const response = await axios.get(
        `https://cmm.ai:8088/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 breadcrumbs = reactive([
  {
    title: "首頁",
    disabled: false,
    href: "/",
  },
  {
    title: "最新消息",
    disabled: true,
    href: "/news",
  },
]);

const categoryList = reactive([
  {
    title: "總覽",
  },
  {
    title: "一日學徒",
  },
  {
    title: "工藝行旅",
  },
  {
    title: "希望工程",
  },
  {
    title: "展覽資訊",
  },
  {
    title: "補助計畫",
  },
  {
    title: "策展補助",
  },
]);
</script>

<template>
  <Navbar />
  <div class="position-relative">
    <img src="@/assets/img/news/news-01.png" alt="" class="material-img" />
    <v-container>
      <img src="@/assets/img/news/news-banner.png" alt="" />

      <div class="content py-10 mt-16">
        <div class="bg-img">
          <img src="@/assets/img/news/news-02.png" alt="" />
        </div>

        <v-breadcrumbs
          :items="breadcrumbs"
          divider="/"
          class="my-5"
        ></v-breadcrumbs>

        <div class="category-btn">
          <v-btn
            v-for="(item, index) in categoryList"
            :key="index"
            rounded="xl"
            color="brown"
            :class="{ 'me-5': index !== categoryList.length - 1 }"
            class="mb-5"
          >
            {{ item.title }}
          </v-btn>
        </div>

        <div class="search mt-5 mb-10 me-16">
          <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>
        <ul>
          <li v-for="(item, index) in newsData.list" :key="index" class="mb-10">
            <section class="d-flex">
              <p class="category mb-5">
                <span></span>
                {{ item.category }}
              </p>
              <p class="ms-5">
                {{ moment(`${item.create_time}`).format("YYYY-MM-DD") }}
              </p>
            </section>
            <v-card
              variant="outlined"
              class="d-flex flex-md-row flex-column align-center pa-5"
            >
              <v-row class="align-center">
                <v-col cols="4">
                  <router-link :to="`/news/${item.news_id}`" class="cover-img">
                    <img src="@/assets/img/img-04.jpg" alt="" />
                  </router-link>
                </v-col>
                <v-col cols="8">
                  <section
                    class="d-flex flex-column px-5 px-sm-10 py-5 py-md-0"
                  >
                    <h2>{{ item.title }}</h2>
                    <p v-html="item.content"></p>
                  </section>
                </v-col>
              </v-row>
            </v-card>
          </li>
        </ul>
      </div>
    </v-container>
    <img src="@/assets/img/news/news-01.png" alt="" class="material-img" />
  </div>
</template>

<style lang="scss" scoped>
.material-img {
  position: absolute;

  &:first-child {
    top: -15vw;
  }

  &:last-child {
    bottom: 0;
    z-index: -5;
    transform: scaleX(-1);

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

.category-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .v-btn {
    width: 130px;
  }
}

.content {
  position: relative;
  margin-bottom: 200px;

  @media (max-width: 960px) {
    margin-bottom: 100px;
  }

  .bg-img {
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: -110px;

    @media (max-width: 960px) {
      bottom: -30px;
    }

    img {
      min-width: 105%;
    }
  }

  ul {
    padding: 0 80px;

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

    li {
      letter-spacing: 1px;

      .v-card {
        background-color: #fff;

        section {
          h2 {
            margin-bottom: 20px;
            font-size: 26px;
            font-weight: 500;
            line-height: 36px;
          }

          p {
            // 超過三行則省略
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            line-break: after-white-space;
            line-height: 22px;
          }
        }

        .cover-img {
          display: block;
          overflow: hidden;
          img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: all 0.5s;
            &:hover {
              transform: scale(1.1);
            }

            @media (max-width: 960px) {
              width: 100%;
              height: 300px;
            }

            @media (max-width: 600px) {
              min-width: auto;
              height: 200px;
            }
          }
        }
        // img {
        //   width: 100%;
        //   height: 200px;
        //   object-fit: cover;
        //   transition: all 0.5s;
        //   &:hover {
        //     transform: scale(1.1);
        //   }

        //   @media (max-width: 960px) {
        //     width: 100%;
        //     height: 300px;
        //   }

        //   @media (max-width: 600px) {
        //     min-width: auto;
        //     height: 200px;
        //   }
        // }
      }

      .category {
        display: flex;
        align-items: center;

        span {
          display: block;
          width: 8px;
          height: 8px;
          margin-right: 10px;
          border-radius: 10px;
          background-color: #000;
        }
      }
    }
  }
}
</style>
