<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";

const props = defineProps({ userId: Number });
const store = useStore();
const { $getdata } = useNuxtApp();

const record = ref();
const isVietnamese = store.lang === "vi";

onMounted(async () => {
  record.value = await $getdata("user", {
    first: true,
    params: {
      filter: { id: props.userId || store.login.id },
      values: "id,username,fullname,type,type__name,create_time",
    },
  });
});
</script>
<template>
  <div v-if="record">
    <Caption
      v-bind="{
        title: isVietnamese ? 'Thông tin tài khoản' : 'User information',
        type: 'has-text-primary',
        size: 16,
      }"
    />
    <div class="columns is-multiline mt-2">
      <div class="column is-4">
        <div class="field">
          <label class="label">{{ isVietnamese ? "Tên người dùng" : "User name" }}</label>
          <div class="control">
            {{ record.username }}
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}</label>
          <div class="control">
            {{ record.fullname }}
          </div>
        </div>
      </div>
      <div class="column is-4">
        <div class="field">
          <label class="label">{{ isVietnamese ? "Thời gian tạo" : "Create time" }}</label>
          <div class="control">
            {{ $dayjs(record.create_time).format("L") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
