<style scoped>
.flex-v-center {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}
.col-form-label {
  font-weight: bold;
  font-size: 1.1rem;
  padding-top: 0;
  padding-bottom: 0;
}
.title {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 0.5;
}
.title::before {
  display: flex;
  align-items: baseline;
  content: "\2022";
  margin-right: 8px;
  color: #0ea1b8;
  font-size: 3rem;
}
.btn-save {
  background-color: #0071b3;
}
@media only screen and (max-width: 991px) {
  .mobile-mb {
    margin-bottom: 10px;
  }
}
.newsPhoto-img {
  width: 10rem;
  height: 5rem;
  border-radius: 0.5rem;
  object-fit: cover;
}
</style>
<template>
  <div class="container-fluid">
    <div class="row gy-sm-3 mb-2">
      <label for="newsDate" class="col-md-2 col-form-label flex-v-center">{{ $t('backend.news.publish_time') }}：</label>
      <div class="col-md-10 mobile-mb flex-v-center">
        <input
          type="date"
          class="form-control"
          name="newsDate"
          id="newsDate"
          v-model="news.post_date"
          :min="now"
          :disabled="disabled"
          required
        />
      </div>
      <label class="col-md-2 col-form-label flex-v-center">{{ $t('backend.news.publisher') }}：</label>
      <div class="col-md-10 mobile-mb flex-v-center">
        {{ news.creator?.name }}
      </div>
      <label for="newsType" class="col-md-2 col-form-label flex-v-center">{{ $t('backend.news.category') }}：</label>
      <div class="col-md-10 mobile-mb flex-v-center">
        <select class="form-select" id="newsType" name="newsType" v-model="news.type" :disabled="disabled" required>
          <option disabled selected value>{{ $t('backend.news.select_category') }}</option>
          <option value="0">{{ $t('global.system') }}</option>
          <option value="1">{{ $t('global.notification') }}</option>
        </select>
      </div>
      <label for="newsTitle" class="col-md-2 col-form-label flex-v-center">{{ $t('backend.news.title') }}：</label>
      <div class="col-md-10 mobile-mb flex-v-center">
        <input
          type="text"
          v-model="news.title"
          name="newsTitle"
          id="newsTitle"
          class="form-control"
          :disabled="disabled"
        />
      </div>
      <label for="newsContent" class="col-md-2 col-form-label">{{ $t('backend.news.content') }}：</label>
      <div class="col-md-10 mobile-mb flex-v-center">
        <textarea
          class="form-control"
          name="newsContent"
          id="newsContent"
          v-model="news.content"
          cols="30"
          rows="10"
          :disabled="disabled"
        ></textarea>
      </div>

      <label class="col-md-2 col-form-label flex-v-center">{{ $t('backend.news.image') }}：</label>
        <div class="col-md-10 mobile-mb flex-v-center">
          <img :src="news.photo" class="newsPhoto-img" v-if="news.photo" />
        </div>
    </div>
  </div>
  <div class="modal-footer pb-0">
    <template v-if="!disabled">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('global.cancel') }}</button>
      <button type="button" class="btn btn-primary btn-save" @click="saveData">{{ $t('global.save') }}</button>
    </template>
    <template v-else>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ $t('global.confirm') }}</button>
    </template>
  </div>
</template>
<script>
import { api } from "@/global/axios";
import { sendSuccessSwal, sendFailedSwal } from "@/global/swal";
import { isAuthenticated } from "@/global/request";
export default {
  props: ["id", "type"],
  data() {
    return {
      now: new Date().toISOString().slice(0, 10),
      news: {},
      isAuthenticated: isAuthenticated(),
      disabled: this.type == "@show",
    };
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api.get(`/api/news/${vm.id}`).then((res) => {
        vm.news = res.data.data;
        if (vm.news.photo) {
          vm.news.photo = `/storage/${vm.news.photo}`;
        }
      });
    },
    saveData: function () {
      api
        .put(`/api/news/${this.id}`, this.news)
        .then(() => {
          sendSuccessSwal(() => window.location.reload());
        })
        .catch(sendFailedSwal);
    },
  },
};
</script>