<style scoped>
.bg-news {
  background-image: url("@images/bg_02.jpg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}
.mt {
  margin-top: 100px;
}
.news-area {
  min-height: 600px;
}
.card {
  border: 1px #000 solid;
}
.card .newsDate {
  color: #000;
  font-size: 1rem;
  font-weight: bold;
}
.card .newsDate .big {
  font-size: 1.8rem;
}
.card .newsTitle {
  color: #4b78b2;
  font-size: 1.2rem;
  font-weight: bold;
}
.card .newsType {
  color: #fff;
  background-color: #4b78b2;
  font-size: 1rem;
  font-weight: bold;
}
.card .card-text {
  color: #000;
  font-size: 1rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card .border-left {
  border-left: 1px #4b78b2 solid;
}
.title {
  color: #f29305;
  font-size: 2rem;
  font-weight: bold;
}
.subtitle {
  color: #5e5e5e;
  font-size: 1.2rem;
  font-weight: bold;
}
.page {
  color: #000;
  font-size: 1rem;
  font-weight: bold;
}
.pageleft, .pageright {
  background-color: #f29305;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  transition: 0.2s;
}
.pageleft:hover, .pageright:hover {
  background-color: #c27502;
}
.pageleft span, .pageright span {
  line-height: 2rem;
}
.btn-option {
  color: #5e5e5e;
  background-color: #fff;
  font-size: 1rem;
  font-weight: bold;
  border: 1px #5e5e5e solid;
  transition: 0.3s;
}
.btn-option.active,
.btn-option:hover {
  color: #fff;
  background-color: #4b78b2;
  border: 1px solid transparent;
}
</style>
<template>
  <div class="bg-news">
    <div class="container mt">
      <div class="text-center mb-4">
        <p class="title">News</p>
        <p class="subtitle">最新消息</p>
        <div class="mt-4">
          <button
            class="btn-option rounded-pill px-4 py-1 mx-2"
            :class="{ 'active': optionType == '全部' }"
            @click="optionType = '全部'"
          >
            全部
          </button>
          <button
            class="btn-option rounded-pill px-4 py-1 mx-2"
            :class="{ 'active': optionType == '系統' }"
            @click="optionType = '系統'"
          >
            系統
          </button>
          <button
            class="btn-option rounded-pill px-4 py-1 mx-2"
            :class="{ 'active': optionType == '通知' }"
            @click="optionType = '通知'"
          >
            通知
          </button>
        </div>
      </div>
      <div class="news-area row flex-column">
        <div class="col-12" v-for="news in filtered.slice(pageStart, pageEnd)" :key="news.id">
          <div class="card mb-3 rounded-3">
            <div class="row g-0">
              <div class="col-4 col-sm-3 col-lg-2 d-flex align-items-center justify-content-center">
                <p class="newsDate">
                  <span class="big">{{ formatDate(news.post_date).slice(0,3) }}</span>
                  {{ formatDate(news.post_date).slice(3) }}
                </p>
              </div>
              <div class="col-8 col-sm-9 col-lg-10 border-left my-2">
                <div class="card-body text-start">
                  <router-link :to="`/news/show/${news.id}`">
                    <span class="newsTitle">{{ news.title }}</span>
                  </router-link>
                  <p class="card-text">
                    {{ news.content }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex justify-content-center align-items-center mb-5">
        <button class='pageleft me-4' title="上一頁" @click="setPage(currentPage-1)"><span>&laquo;</span></button>
        <p class="page m-0">
          {{ currentPage + ' / ' + totalPage }}
        </p>
        <button class='pageright ms-4' title="下一頁" @click="setPage(currentPage+1)"><span>&raquo;</span></button>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/global/axios";
export default {
  data() {
    return {
      newsType: ["系統", "通知"],
      newsData: [],
      optionType: "全部",
      perpage: 5,
      currentPage: 1,
    };
  },
  computed: {
    filteredNews() {
      const now = new Date().toISOString().slice(0, 10);
      return this.newsData.filter((s) => s.post_date <= now) || null;
    },
    pageStart() {
      return (this.currentPage - 1) * this.perpage
    },
    pageEnd() {
      return this.currentPage * this.perpage
    },
    totalPage() {
      return Math.max(1, Math.ceil(this.filtered.length / this.perpage));
    },
    filtered() {
      if(this.optionType != "全部") {
        this.currentPage = 1;
        return this.filteredNews.filter(data => this.newsType[data.type] == this.optionType);
      }
      return this.filteredNews;
    }
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/getNewsList`)
        .then((res) => {
          vm.newsData = res.data.data;
        });
    },
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString('en-GB', {
        day: '2-digit',
        month: 'short',
        year: 'numeric'
      });
    },
    setPage(page) {
      if(page <= 0 || page > this.totalPage) {
        return
      }
      this.currentPage = page
    },
  },
};
</script>