<style scoped>
.bg-color {
  background-color: #fffbdd;
  height: 100%;
  overflow: auto;
}
table {
  min-width: 600px;
}
table tbody tr {
  border: 2px #bbbbbb solid;
}
table th,
td {
  border: 0;
  vertical-align: middle;
}
table th {
  background-color: transparent;
}
.td-botder-right {
  border-right: 2px solid #bbbbbb;
}
.td-botder-left {
  border-left: 2px solid #bbbbbb;
}
.inside-border-color {
  border-color: #0c4e82 !important;
  background-color: #fff;
  font-size: 0.8rem;
}
.inside-border-color {
  border-color: #0c4e82 !important;
  background-color: #fff;
  font-size: 0.8rem;
}
.btn-detail {
  color: #fff;
  background-color: #ff9100;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 0.5rem;
  transition: 0.3s;
}
.btn-detail:hover {
  background-color: #c77100;
}
</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 active" aria-current="page">{{ $t('sidebar.member_service_activation') }}</li>
        </ol>
      </nav>
    </div>
    <h1>{{ $t('sidebar.member_service_activation') }}</h1>
  </div>
  <div class="bg-color p-4 mt-2">
    <div class="input-group w-50 mb-3">
      <input
        type="search"
        class="form-control border border-2 border-end-0 inside-border-color"
        placeholder="Search..."
        v-model="keyword"
      />
      <button
        class="btn btn-light border border-2 border-start-0 inside-border-color"
        type="button"
      >
        <i class="bi bi-search"></i>
      </button>
    </div>
    <table class="table table-hover" id="table">
      <thead>
        <tr>
          <th class="text-center">{{ $t('global.serial_number') }}</th>
          <th>{{ $t('global.name') }}</th>
          <th>{{ $t('global.email') }}</th>
          <th class="text-center">{{ $t('global.system') }}</th>
          <th class="text-center">{{ $t('global.plan') }}</th>
          <th class="text-center">{{ $t('global.status') }}</th>
          <th class="text-center">{{ $t('backend.activate.activation_date') }}</th>
          <th class="text-center">{{ $t('backend.activate.expiration_date') }}</th>
          <th class="text-center">{{ $t('global.action') }}</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(data, dataIndex) in filteredSubSystems.slice(pageStart, pageEnd)" :key="data.id">
          <tr>
            <td class="text-center" :rowspan="data.sub_systems.length || 1">{{ dataIndex + 1 }}</td>
            <td :rowspan="data.sub_systems.length || 1">{{ data.user_name }}</td>
            <td class="td-border-right" :rowspan="data.sub_systems.length || 1">{{ data.user_email }}</td>

            <td class="text-center">{{ data.sub_systems.length ? data.sub_systems[0].sub_system_name : '--' }}</td>
            <td class="text-center">{{ data.sub_systems.length ? data.sub_systems[0].plan_name ?? "--" : '--' }}</td>
            <td class="text-center">{{ data.sub_systems.length ? plan_state[data.sub_systems[0].state] ?? "--" : '--' }}</td>
            <td class="text-center">{{ data.sub_systems.length ? data.sub_systems[0].open_date ?? "--" : '--' }}</td>
            <td class="text-center">{{ data.sub_systems.length ? data.sub_systems[0].expiry_date ?? "--" : '--' }}</td>
            <td class="text-center td-border-left" :rowspan="data.sub_systems.length || 1">
              <router-link :to="`/activate/main/${data.id}`" class="btn btn-detail">{{ $t('global.view') }}</router-link>
            </td>
          </tr>
          <tr v-for="sub_system in data.sub_systems.slice(1)" :key="sub_system.id">
            <td class="text-center">{{ sub_system.sub_system_name }}</td>
            <td class="text-center">{{ sub_system.plan_name ?? "--" }}</td>
            <td class="text-center">{{ plan_state[sub_system.state] ?? "--" }}</td>
            <td class="text-center">{{ sub_system.open_date ?? "--" }}</td>
            <td class="text-center">{{ sub_system.expiry_date ?? "--" }}</td>
          </tr>
        </template>
      </tbody>
    </table>

    <div class='pagination justify-content-between pb-3'>
      <div class="fw-bold">
        共 {{ filteredData.length }} 筆
      </div>
      <div class="d-flex align-items-center">
        <button class='left me-3 fw-bold' title="上一頁" @click="setPage(currentPage-1)">上一頁</button>
        <p class="m-0"  style="font-weight: bold;" title="簡易頁碼">
          {{ currentPage + ' / ' + totalPage }}
        </p>
        <button class='right ms-3 fw-bold' title="下一頁" @click="setPage(currentPage+1)">下一頁</button>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/global/axios";
import { sendFailedSwal } from "@/global/swal";
import { isAdmin, systemRole } from "@/global/request";
export default {
  data() {
    return {
      isAdmin: isAdmin(),
      systemRole: systemRole(),
      plan_state: [this.$t('global.cancel'), this.$t('global.active'), this.$t('global.expired')],
      datas: [],
      dataTable: null,

      page: 0,
      keyword: "",
      perpage: 5,
      currentPage: 1,
    };
  },
  computed: {
    filteredData() {
      let filterList = this.datas;
      if (this.keyword.trim().length !== 0) {
        filterList = filterList.filter((item) => {
          if (item.user_name.includes(this.keyword.trim()) || item.user_email.includes(this.keyword.trim())) {
            return true;
          }
        });
      }
      return filterList;
    },
    filteredSubSystems() {
      return this.filteredData
        .map((item) => {
          const validSubSystems = item.sub_systems.filter(
            (subSystem) => this.systemRole[subSystem.sub_system_id]
          );

          return validSubSystems.length
            ? { ...item, sub_systems: validSubSystems }
            : null;
        })
        .filter((item) => item !== null);
    },
    pageStart() {
      return (this.currentPage - 1) * this.perpage
    },
    pageEnd() {
      return this.currentPage * this.perpage
    },
    totalPage() {
      return Math.max(1, Math.ceil(this.filteredData.length / this.perpage));
    },
  },
  mounted() {
    const vm = this;
    vm.fetchData();
  },
  methods: {
    setPage(page) {
      if(page <= 0 || page > this.totalPage) {
        return;
      }
      this.currentPage = page;
    },
    fetchData: async function () {
      const vm = this;
      await api
        .get(`/api/getAllUserSubSystemWithPlan`)
        .then((res) => {
          vm.datas = res.data.data;
        })
        .catch(sendFailedSwal);
    },
  },
};
</script>
