<style scoped>
.bg-color {
  background-color: #fffbdd;
  height: 100%;
  overflow: auto;
}
table {
  min-width: 600px;
}
table thead,
tbody tr {
  border-bottom: 2px #bbbbbb solid;
}
table th,
td {
  border: 0;
  vertical-align: middle;
}
table th {
  background-color: transparent;
}
.div-box {
  background-color: #fff;
  border-radius: 1rem;
  border: 1px solid #bbbbbb;
}
.title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #0ea1b8;
  text-align: center;
}
.content {
  font-size: 1rem;
  font-weight: bold;
  text-align: right;
}
.btn {
  font-size: 1rem;
  font-weight: bold;
  border-radius: 0.5rem;
  transition: 0.3s;
  color: #fff;
  background-color: #12a5bc;
}
.btn:hover {
  filter: brightness(80%);
}
</style>
<template>
  <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">
            <router-link to="/activate/index/">{{ $t('sidebar.member_service_activation') }}</router-link>
          </li>
          <li class="breadcrumb-item">
            <a href="javascript:;" @click="$router.back()">
              {{ data.creator?.name }}
            </a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">{{ $t('global.record') }}</li>
        </ol>
      </nav>
    </div>
    <h1>{{ data.creator?.name }}</h1>
  </div>
  <div class="bg-color p-4 mt-2">
    <div class="div-box p-3">
      <div class="mb-3">
        <span class="title">{{ data.subsystem?.name }}</span>
      </div>
      <table class="table table-hover" id="table">
        <thead>
          <tr>
            <th class="col-2 text-center">{{ $t('global.serial_number') }}</th>
            <th class="col-2 text-center">{{ $t('global.action') }}</th>
            <th class="col-3 text-center">{{ $t('global.date') }}</th>
            <th class="col-3 text-center">{{ $t('global.editor') }}</th>
            <th class="col-2 text-center">{{ $t('global.operation') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record, index) in data.records" :key="record.id">
            <td class="text-center">{{ index + 1 }}</td>
            <td class="text-center">{{ type_state[record.type] }}</td>
            <td class="text-center">{{ record.created_at }}</td>
            <td class="text-center">{{ record.creator.name }}</td>
            <td class="text-center">
              <button
                type="button"
                class="btn mx-1"
                data-bs-toggle="modal"
                data-bs-target="#activateModal"
                @click="showData(index)"
              >
              {{ $t('global.view') }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div
    class="modal fade"
    id="activateModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="activateModalLabel"
    aria-hidden="true"
    data-bs-keyboard="false"
  >
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <p class="title">{{ $t('backend.activate.view_records') }}</p>
          <div class="content mt-2">
            <span class="mx-2">{{ $t('global.editor') }} {{ after.creator?.name }}</span>
            <span class="mx-2">{{ $t('global.edit_date') }} {{ after.created_at }}</span>
          </div>
          <div class="px-3 mt-2 text-center">
            <table class="table">
              <thead>
                <tr>
                  <th class="text-start col-4">{{ $t('global.item') }}</th>
                  <th class="text-end col-4">{{ $t('global.before_edit') }}</th>
                  <th class="text-end col-4">{{ $t('global.after_edit') }}</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th class="text-start">{{ $t('backend.activate.system_name') }}</th>
                  <td class="text-end">
                    {{ Object.keys(before).length !== 0 ? data.subsystem?.name : "--" }}
                  </td>
                  <td class="text-end">
                    {{ Object.keys(before).length === 0 ? data.subsystem?.name : "" }}
                  </td>
                </tr>
                <tr>
                  <th class="text-start">{{ $t('backend.activate.select_plan') }}</th>
                  <td class="text-end">
                    {{ Object.keys(before).length !== 0 ? before.plan_name : "--" }}
                  </td>
                  <td class="text-end">
                    {{ Object.keys(before).length === 0 ? after.plan_name : "" }}
                  </td>
                </tr>
                <!-- items -->
                <tr v-for="item in after.items" :key="item.id">
                  <th class="text-start">{{ item.item.item }}</th>
                  <td class="text-end">
                    {{
                      Object.keys(before).length !== 0
                        ? before.items.find((bi) => bi.item_id === item.item_id)?.amount
                        : "--"
                    }}
                  </td>
                  <td class="text-end">
                    {{ Object.keys(before).length === 0 ? item.amount : "" }}
                  </td>
                </tr>
                <tr>
                  <th class="text-start">{{ $t('backend.activate.activation_date') }}</th>
                  <td class="text-end">
                    {{ Object.keys(before).length !== 0 ? before.open_date : "--" }}
                  </td>
                  <td class="text-end">
                    {{ after.open_date != before.open_date ? after.open_date : "" }}
                  </td>
                </tr>
                <tr>
                  <th class="text-start">{{ $t('backend.plan.plan_duration') }}</th>
                  <td class="text-end">
                    {{ Object.keys(before).length !== 0 ? before.years + "年" : "--" }}
                  </td>
                  <td class="text-end">
                    {{ after.years != before.years ? after.years + "年" : "" }}
                  </td>
                </tr>
                <tr>
                  <th class="text-start">{{ $t('backend.activate.expiration_date') }}</th>
                  <td class="text-end">
                    {{ Object.keys(before).length !== 0 ? before.expiry_date : "--" }}
                  </td>
                  <td class="text-end">
                    {{ after.expiry_date != before.expiry_date ? after.expiry_date : "" }}
                  </td>
                </tr>
                <!-- addons -->
                <tr v-for="item in after.addons" :key="item.id">
                  <th class="text-start">{{ $t('global.add_on') }}{{ item.item.item }}</th>
                  <td class="text-end">
                    {{
                      Object.keys(before).length !== 0
                        ? before.addons.find((ba) => ba.item_id === item.item_id)
                            ?.amount ?? 0
                        : "--"
                    }}
                  </td>
                  <td class="text-end">
                    {{
                      before?.addons?.find((ba) => ba.item_id === item.item_id)?.amount !=
                      item.amount
                        ? item.amount
                        : ""
                    }}
                  </td>
                </tr>
              </tbody>
            </table>
            <button type="button" class="btn rounded-pill mx-2" data-bs-dismiss="modal">
              {{ $t('global.confirm') }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/global/axios";
import { sendFailedSwal } from "@/global/swal";
import { isAdmin } from "@/global/request";
export default {
  data() {
    return {
      id: this.$route.params.id ?? null,
      isAdmin: isAdmin(),
      type_state: [this.$t('global.activate'), this.$t('global.add_on'), this.$t('global.edit'), this.$t('global.renew'), this.$t('global.cancel'), this.$t('global.expiration')],
      data: {},
      dataTable: null,
      before: {},
      after: {},
    };
  },
  mounted() {
    const vm = this;
    vm.fetchData().then(() => {
      vm.$nextTick(() => {
        vm.dataTable = $("#table").DataTable({
          order: [[0, "desc"]],
          columnDefs: [
            {
              orderable: false,
              targets: "_all",
            },
          ],
        });
      });
    });
  },
  methods: {
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/getUserPlanRecord/${this.id}`)
        .then((res) => {
          vm.data = res.data.data;
        })
        .catch(sendFailedSwal);
    },
    showData: function (index) {
      const vm = this;
      vm.before = {};
      vm.after = {};
      if (index != 0) {
        vm.before = { ...vm.data.records[index - 1] };
      }
      vm.after = vm.data.records[index];
    },
  },
};
</script>
