<template>
  <div
    v-if="store.login"
    class="fixed-grid has-12-cols"
  >
    <div class="grid is-gap-0">
      <div class="cell is-col-span-3">
        <div
          class="card h-full p-4 has-background-grey-100"
          :style="{
            borderTopRightRadius: 0,
            borderBottomRightRadius: 0,
          }"
        >
          <div class="mb-8 is-flex is-flex-direction-column is-align-items-center">
            <Avatarbox
              v-bind="{
                image: undefined,
                text: store.login.fullname.substring(0, 1).toUpperCase(),
                type: 'primary',
                size: 12,
              }"
            />
            <p class="mt-3 fsb-16">{{ store.login.fullname }}</p>
            <p class="fs-14 has-text-grey">{{ store.login.username }}</p>
          </div>
          <div>
            <aside class="menu">
              <ul class="menu-list is-flex is-flex-direction-column is-gap-1">
                <li
                  v-for="(v, i) in tabs"
                  :key="i"
                  style="list-style: none"
                >
                  <a
                    :class="['button is-text', v.code === tab && 'has-background-primary has-text-white']"
                    style="text-decoration: none"
                    @click="changeTab(v)"
                  >
                    {{ isVietnamese ? v.vi : v.en }}
                  </a>
                </li>
              </ul>
            </aside>
          </div>
        </div>
      </div>
      <div class="cell is-col-span-9">
        <div
          class="card h-full p-4 has-background-grey-100"
          :style="{
            borderTopLeftRadius: 0,
            borderBottomLeftRadius: 0,
            borderLeft: 'none',
          }"
        >
          <UserInfo v-if="tab === 'info'" />
          <ChangePass v-else-if="tab === 'password'" />
          <Logout v-else-if="tab === 'logout'" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import Logout from "~/components/user/Logout";
import UserInfo from "~/components/user/UserInfo";
import ChangePass from "~/components/user/ChangePass";

const store = useStore();
const isVietnamese = computed(() => store.lang === "vi");
const tabs = [
  { code: "info", vi: "Hồ sơ cá nhân", en: "Personal Information" },
  { code: "password", vi: "Đổi mật khẩu", en: "Change Password" },
  { code: "logout", vi: "Đăng xuất", en: "Logout" },
];
const tab = ref("info");
function changeTab(v) {
  tab.value = v.code;
}
</script>
