<template>
  <div class="columns mx-0 px-0 py-2">
    <div
      :class="`column is-narrow ${viewport === 1 ? 'px-0' : ''}`"
      :style="`${viewport === 1 ? '' : 'border-right: 1px solid #B0B0B0;'}`"
    >
      <template v-if="viewport > 1">
        <div
          v-for="(v, i) in tabs"
          :class="['is-clickable py-3 px-3', i !== 0 && 'mt-2', getStyle(v)]"
          style="width: 130px; border-radius: 4px"
          @click="changeTab(v)"
        >
          {{ v.name }}
        </div>
      </template>
      <div
        class="field is-grouped is-grouped-multiline"
        v-else
      >
        <div
          class="control"
          v-for="(v, i) in tabs"
          :key="i"
          @click="changeTab(v)"
        >
          <div style="width: 110px">
            <div :class="`py-3 px-3 ${getStyle(v)}`">{{ v.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="column">
      <PeopleInfo
        v-if="tab === 'info' && record !== undefined"
        v-bind="{ row: record, pagename }"
        @update="update"
      ></PeopleInfo>
      <template v-if="record">
        <ImageGallery
          v-if="tab === 'image'"
          v-bind="{
            row: record,
            pagename,
            api: 'peoplefile',
            show: ['delete'],
          }"
          @update="update"
        ></ImageGallery>
      </template>
      <PeopleView
        v-bind="{ row: record, pagename }"
        v-if="tab === 'summary'"
      />
    </div>
  </div>
</template>
<script setup>
import PeopleInfo from "~/components/people/PeopleInfo";
const { $dialog } = useNuxtApp();
const props = defineProps({
  pagename: String,
  row: Object,
});
const emit = defineEmits(["modalevent", "close"]);
const viewport = 5;
const tabs = [
  { code: "info", name: "1. Thông tin" },
  { code: "image", name: "2. Hình ảnh" },
  { code: "summary", name: "3. Bản in" },
];
const tab = ref("info");
const record = ref(props.row || null);
function getStyle(v) {
  let check = record.value ? record.value.id : false;
  if (v.tab === "info") check = true;
  return v.code === tab.value
    ? "has-background-primary has-text-white"
    : `has-background-light ${check ? "" : "has-text-grey"}`;
}
function changeTab(v) {
  if (tab.value === v.code) return;
  if (!record.value) return $dialog("Vui lòng <b>lưu dữ liệu</b> trước khi chuyển sang mục tiếp theo", "Thông báo");

  tab.value = v.code;
}
function update(v) {
  record.value = {
    ...v,
    label: `${v.code} / ${v.fullname} / ${v.phone || ""}`,
  };

  emit("modalevent", { name: "dataevent", data: record.value });
  if (!props.row) emit("close");
}
</script>
