<template>
  <!-- Nội dung chính - chỉ hiển thị form cá nhân (màn hình chọn đã được xử lý ở SearchBox) -->
  <div class="columns mx-0 px-0 py-2">
    <div
      :class="`column is-narrow p-0 pr-4 ${viewport === 1 ? 'px-0' : ''}`"
      :style="`${viewport === 1 ? '' : 'border-right: 1px solid #B0B0B0;'}`"
    >
      <template v-if="viewport > 1">
        <div
          v-for="(v, i) in tabs"
          :key="i"
          :class="['is-clickable p-3', i !== 0 && 'mt-2', getStyle(v)]"
          style="width: 130px; border-radius: 4px;"
          @click="changeTab(v)"
        >
          {{ isVietnamese ? v.name : v.en }}
        </div>
      </template>
      <div v-else class="field is-grouped is-grouped-multiline">
        <div class="control" v-for="(v, i) in tabs" @click="changeTab(v)">
          <div style="width: 130px">
            <div :class="`py-3 px-3 ${getStyle(v)}`">
              {{ isVietnamese ? v.name : v.en }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="['column', { 'px-0': viewport === 1 }]">
      <CustomerInfo2
        v-if="tab === 'info' && record !== undefined"
        v-bind="{ row: record, pagename, application }"
        @update="update"
        @close="emit('close')"
      />
      <template v-if="record">
        <ImageGallery
          v-bind="{
            row: record,
            pagename: pagename,
            show: ['delete'],
            api: 'customerfile',
          }"
          @update="update"
          v-if="tab === 'image'"
        ></ImageGallery>
        <CustomerView
          v-bind="{ row: record, pagename: pagename }"
          @update="update"
          @close="emit('close')"
          v-if="tab === 'print'"
        ></CustomerView>
      </template>
    </div>
  </div>

  <Modal @close="handleModalClose" v-bind="showmodal" v-if="showmodal"></Modal>
</template>
<script setup>
import { computed, ref } from "vue";
import { useNuxtApp } from "#app";
import CustomerInfo2 from "~/components/customer/CustomerInfo2";
import CustomerView from "~/components/customer/CustomerView";
import Modal from "~/components/Modal.vue";
import { useStore } from "@/stores/index";
const nuxtApp = useNuxtApp();
const { $dialog } = nuxtApp;

const store = useStore();
var props = defineProps({
  pagename: String,
  row: Object,
  application: Object,
  isEditMode: Boolean,
  handleCustomer: Function,
});

const lang = computed(() => store.lang);
const isVietnamese = computed(() => lang.value === "vi");
const emit = defineEmits(["modalevent", "close"]);
var viewport = 5;
var tabs = [
  { code: "info", name: "1. Thông tin", en: "1. Information", active: true },
  { code: "image", name: "2. Hình ảnh", en: "2. Images", active: false },
  { code: "print", name: "3. Bản in", en: "3. Print", active: false },
];
var tab = ref("info");
var record = props.row || null;
var showmodal = ref();

function getStyle(v) {
  let check = record ? record.id : false;
  // let check = props.isEditMode;
  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)
    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 handleModalClose() {
  showmodal.value = undefined;
}

function update(v) {
  record = {
    ...v,
    label: `${v.code} / ${v.fullname} / ${v.phone || ""}`,
  }
  emit("modalevent", { name: "dataevent", data: record });
  if (!props.isEditMode) emit("close");
}
</script>

<style scoped>
.title {
  font-family: "Segoe UI", "Roboto", "Helvetica Neue", Helvetica, Arial,
    sans-serif !important;
}
.button.is-large.is-fullwidth:hover {
  color: white !important;
  background-color: rgb(75, 114, 243) !important;
  .title {
    color: white !important;
  }
}
</style>
