<style scoped>
.bg-news {
  background-image: url("@images/bg_02.jpg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.title {
  color: #f29305;
  font-size: 2rem;
  font-weight: bold;
}
.subtitle {
  color: #5e5e5e;
  font-size: 1.2rem;
  font-weight: bold;
}
.news-area {
  background-color: #fff;
  border: 1px #000 solid;
  min-height: 600px;
}
hr {
  border: 1px #4b78b2 solid;
  opacity: 1;
}
.newsTitle {
  color: #4b78b2;
  font-size: 2rem;
  font-weight: bold;
}
.newsDate {
  font-size: 1rem;
  font-weight: bold;
}
.newsType {
  color: #fff;
  background-color: #4b78b2;
  font-size: 1rem;
  font-weight: bold;
}
.newsContent {
  font-size: 1rem;
  white-space: pre-wrap;
}
.separator {
  border-left: 2px solid #4b78b2;
  height: 1.5rem;
  display: inline-block;
  vertical-align: middle;
}
</style>
<template>
  <div class="bg-news">
    <div class="main-view px-4 pt-2">
      <div class="d-flex align-items-center mb-3">
        <button class="btn-goback me-2" @click="$router.back()">
          <i class="bi bi-chevron-left me-1"></i>{{ $t('global.go_back') }}
        </button>
        <nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
          <ol class="breadcrumb m-0">
            <li class="breadcrumb-item"><a href="#">{{ $t('global.homepage') }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $t('backend.news.latest_news') }}</li>
          </ol>
        </nav>
      </div>
    </div>
    
    <div class="container">
      <div class="text-center mb-4">
        <p class="title">News</p>
        <p class="subtitle">{{ $t('backend.news.latest_news') }}</p>
      </div>
      <div class="news-area rounded-3 mb-4 px-5">
        <div class="d-flex flex-wrap justify-content-between align-items-center py-2">
          <span class="newsTitle">{{ news.title }}</span>
          <div>
            <span class="newsDate">{{ news.post_date }}</span>
            <span class="separator mx-3"></span> 
            <span class="newsType rounded-pill px-3 py-1">{{ newsType[news.type] }}</span>
          </div>
        </div>
        <hr />
        <div class="py-3">
          <pre class="newsContent">{{ news.content }}</pre>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/global/axios";
export default {
  data() {
    return {
      id: this.$route.params.id ?? null,
      newsType: [this.$t('global.system'), this.$t('global.notification')],
      news: {},
    };
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/getNewsById/${vm.id}`)
        .then((res) => {
          vm.news = res.data.data;
        });
    },
  },
};
</script>