<template>
  <div v-if="record">
    <Caption v-bind="{ title: isVietnamese ? 'Thông tin tài khoản' : 'User information', type: 'has-text-warning', size: 18 }"></Caption>
    <div class="columns is-multiline mx-0 mt-2">
      <div class="column is-3">
        <div class="field">
          <label class="label"
            >{{ isVietnamese ? "Tên người dùng" : "User name" }}<b class="ml-1 has-text-danger">*</b></label
          >
          <div class="control">
            {{ record.username }}
          </div>
        </div>
      </div>
      <div class="column is-3">
        <div class="field">
          <label class="label">{{ isVietnamese ? "Họ tên" : "Full name" }}<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            {{ record.fullname }}
          </div>
        </div>
      </div>
      <!-- <div class="column is-3">
        <div class="field">
          <label class="label">{{ isVietnamese ? "Điện thoại" : "Phone" }}<b class="ml-1 has-text-danger">*</b></label>
          <div class="control">
            {{ record.phone }}
          </div>
        </div>
      </div> -->
      <div class="column is-3">
        <div class="field">
          <label class="label"
            >{{ isVietnamese ? "Thời gian tạo" : "Create time" }}<b class="ml-1 has-text-danger">*</b></label
          >
          <div class="control">
            {{ $dayjs(record.create_time).format("DD/MM/YYYY") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { useStore } from "@/stores/index";
export default {
  props: ["userId"],
  setup() {
    const store = useStore();
    return { store };
  },
  data() {
    return {
      errors: {},
      record: undefined,
      reginfo: undefined,
      isVietnamese: this.store.lang === "vi",
    };
  },
  async created() {
    this.record = await this.$getdata(
      "user",
      undefined,
      {
        filter: { id: this.userId || this.store.login.id },
        values: "id,username,fullname,type,type__name,create_time",
      },
      true
    );
  },
};
</script>
