<template>
  <div class="columns mx-0" v-if="login">
    <div class="column is-3">
      <div class="leftbox">
        <Avatarbox
          class="ml-4"
          v-bind="{
            image: undefined,
            text: login.fullname.substring(0, 1).toUpperCase(),
            type: 'primary',
            size: 'three',
          }"
        />
        <div>
          <p class="ml-4 mt-3 fsb-16">
            <span>{{ login.fullname }}</span>
          </p>
          <p class="ml-4 mt-1 fs-14 has-text-grey">
            <span>{{ login.username }}</span>
          </p>
          <p class="border-bottom mt-2"></p>
          <aside class="menu" style="padding-top: 22px">
            <ul class="menu-list">
              <li v-for="(v, i) in tabs" style="list-style: none;">
                <a
                  :class="`${v.code === tab ? 'has-background-primary has-text-white' : 'has-text-dark'} fsb-17 mt-4`"
                  @click="changeTab(v)"
                  :key="i"
                >
                  {{ isVietnamese ? v.vi : v.en }}
                </a>
              </li>
            </ul>
          </aside>
        </div>
      </div>
    </div>
    <div class="column">
      <UserInfo v-if="tab === 'info'"></UserInfo>
      <ChangePass v-else-if="tab === 'password'"></ChangePass>
      <Logout v-else-if="tab === 'logout'"></Logout>
    </div>
  </div>
</template>
<script setup>
import Logout from "@/components/user/Logout";
import UserInfo from "@/components/user/UserInfo";
import ChangePass from "@/components/user/ChangePass";
import { useStore } from "@/stores/index";
const store = useStore();
const lang = computed(() => store.lang);
const isVietnamese = computed(() => lang.value === "vi");
var login = store.login;
var 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" },
];
var tab = ref("info");
function changeTab(v) {
  tab.value = v.code;
}
</script>
<style>
.leftbox {
  border-radius: 15px;
  background: rgb(245, 245, 246);
  padding: 20px;
}
</style>
