jws-frontend/src/pages/03_customer-management/TabEmployee.vue

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useRoute, useRouter } from 'vue-router';

import {
  PaginationComponent,
  PaginationPageSize,
  ImageUploadDialog,
  TooltipComponent,
  ProfileBanner,
  DialogForm,
  DrawerInfo,
  ItemCard,
  SideMenu,
  NoData,
} from 'src/components';
import ExpirationDate from 'components/03_customer-management/ExpirationDate.vue';
import HistoryEditComponent from 'src/components/03_customer-management/HistoryEditComponent.vue';
import TableEmpoloyee from 'src/components/03_customer-management/TableEmpoloyee.vue';
import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
import FormPerson from 'components/02_personnel-management/FormPerson.vue';
import FormEmployeeHealthCheck from 'components/03_customer-management/FormEmployeeHealthCheck.vue';
import FormEmployeeWorkHistory from 'components/03_customer-management/FormEmployeeWorkHistory.vue';
import FormEmployeeOther from 'components/03_customer-management/FormEmployeeOther.vue';
import FormEmployeePassport from 'components/03_customer-management/FormEmployeePassport.vue';
import FormEmployeeVisa from 'components/03_customer-management/FormEmployeeVisa.vue';
import { AddressForm } from 'components/form';
import {
  UploadFileGroup,
  FormTm6,
  NoticeJobEmployment,
} from 'components/upload-file';
import {
  AddButton,
  EditButton,
  DeleteButton,
  SaveButton,
  UndoButton,
} from 'components/button';

import { Status } from 'src/stores/types';
import { Employee, EmployeeHistory } from 'src/stores/employee/types';
import { runOcr, parseResultMRZ } from 'src/utils/ocr';
import useOcrStore from 'stores/ocr';
import useFlowStore from 'src/stores/flow';
import useEmployeeStore from 'src/stores/employee';
import useOptionStore from 'src/stores/options';
import {
  baseUrl,
  setPrefixName,
  waitAll,
  dialog,
  notify,
  resetScrollBar,
  capitalizeFirstLetter,
  dialogCheckData,
  canAccess,
} from 'src/stores/utils';
import {
  dateFormat,
  calculateAge,
  toISOStringWithTimezone,
} from 'src/utils/datetime';
import { useCustomerForm, useEmployeeForm } from './form';
import {
  columnsCustomer,
  columnsEmployee,
  uploadFileListEmployee,
  columnsAttachment,
  dialogCreateCustomerItem,
} from './constant';

const $q = useQuasar();
const route = useRoute();
const router = useRouter();
const flowStore = useFlowStore();
const employeeStore = useEmployeeStore();
const employeeFormStore = useEmployeeForm();
const customerFormStore = useCustomerForm();
const optionStore = useOptionStore();
const ocrStore = useOcrStore();
const mrz = ref<Awaited<ReturnType<typeof parseResultMRZ>>>();
const { t, locale } = useI18n();
const {
  state: employeeFormState,
  currentFromDataEmployee,
  onCreateImageList,
  statusEmployeeCreate,
  refreshImageState,
} = storeToRefs(employeeFormStore);
const { employeeFormUndo, employeeConfirmUnsave, deleteEmployeeById } =
  employeeFormStore;
const {
  state: customerFormState,
  currentFormData: customerFormData,
  registerAbleBranchOption,
  tabFieldRequired,
} = storeToRefs(customerFormStore);

const employeeStats = defineModel('employeeStats', { default: 0 });
const imageList = defineModel<{ selectedImage: string; list: string[] }>(
  'imgList',
);

const props = defineProps<{
  currentTab: 'employee' | 'employer';
  currentStatus: Status | 'All';
  gridView: boolean;
  inputSearch: string;
  searchDate: string[];
  fieldSelected: string[];
  fetchImageList: (
    id: string,
    selectedName: string,
    type: 'customer' | 'employee',
  ) => Promise<void>;
  triggerChangeStatus: (
    id: string,
    status: string,
    employeeName?: string,
  ) => void;
}>();

defineExpose({
  openSpecificEmployee,
  fetchListEmployee,
  toggleStatusEmployee,
});

const listEmployee = ref<Employee[]>([]);
const currentPageEmployee = ref<number>(1);
const maxPageEmployee = ref<number>(1);
const pageSize = ref<number>(30);
const employeeHistoryDialog = ref(false);
const employeeHistory = ref<EmployeeHistory[]>();

const splitPercent = computed(() => ($q.screen.lt.md ? 0 : 15));

async function fetchListEmployee(opt?: {
  fetchStats?: boolean;
  page?: number;
  pageSize?: number;
  customerId?: string;
  mobileFetch?: boolean;
}) {
  const resultListEmployee = await employeeStore.fetchList({
    customerId: opt?.customerId,
    page: opt
      ? opt.mobileFetch
        ? 1
        : opt.page || currentPageEmployee.value
      : currentPageEmployee.value,
    pageSize: opt
      ? opt.mobileFetch
        ? listEmployee.value.length +
          (employeeStats.value === listEmployee.value.length ? 1 : 0)
        : opt.pageSize || pageSize.value
      : pageSize.value,
    status:
      props.currentStatus === 'All'
        ? undefined
        : props.currentStatus === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
    query: props.inputSearch,
    passport: true,
    visa: true,
    startDate: props.searchDate[0],
    endDate: props.searchDate[1],
  });
  if (resultListEmployee) {
    maxPageEmployee.value = Math.ceil(
      resultListEmployee.total / pageSize.value,
    );
    $q.screen.xs && !(opt && opt.mobileFetch)
      ? listEmployee.value.push(...resultListEmployee.result)
      : (listEmployee.value = resultListEmployee.result);
  }

  if (opt && opt.fetchStats)
    employeeStats.value = await employeeStore.getStatsEmployee();
}

async function openHistory(id: string) {
  const res = await employeeStore.getEditHistory(id);
  employeeHistory.value = res.reverse();
  employeeHistoryDialog.value = true;
}

async function editEmployeeFormPersonal(id: string) {
  await employeeFormStore.assignFormDataEmployee(id);
  await props.fetchImageList(
    id,
    currentFromDataEmployee.value.selectedImage || '',
    'employee',
  );

  employeeFormState.value.isEmployeeEdit = true;
  employeeFormState.value.dialogType = 'edit';
  employeeFormState.value.drawerModal = true;
}

async function openSpecificEmployee(id: string) {
  await employeeFormStore.assignFormDataEmployee(id);
  await props.fetchImageList(
    id,
    currentFromDataEmployee.value.selectedImage || '',
    'employee',
  );
  employeeFormState.value.dialogType = 'info';
  employeeFormState.value.drawerModal = true;
}

async function toggleStatusEmployee(
  id: string,
  status: boolean,
  employeeName: string,
) {
  const res = await employeeStore.editById(id, {
    status: !status ? 'ACTIVE' : 'INACTIVE',
    firstNameEN: employeeName,
  });
  if (res && employeeFormState.value.drawerModal)
    currentFromDataEmployee.value.status = res.status;

  await fetchListEmployee({ mobileFetch: $q.screen.xs });
  flowStore.rotate();
}

watch(
  () => [
    props.inputSearch,
    props.searchDate,
    props.currentStatus,
    pageSize.value,
  ],
  async () => {
    currentPageEmployee.value = 1;
    listEmployee.value = [];
    await fetchListEmployee({ fetchStats: true });

    customerFormState.value.currentCustomerId = undefined;
    flowStore.rotate();
  },
);

watch(
  () => employeeFormState.value.currentCustomerBranch,
  (e) => {
    if (!e) return;
    if (employeeFormState.value.formDataEmployeeSameAddr) {
      currentFromDataEmployee.value.address = e.address;
      currentFromDataEmployee.value.addressEN = e.addressEN;
      currentFromDataEmployee.value.provinceId = e.provinceId;
      currentFromDataEmployee.value.districtId = e.districtId;
      currentFromDataEmployee.value.subDistrictId = e.subDistrictId;
    }
    currentFromDataEmployee.value.customerBranchId = e.id;
  },
);

watch(
  () => employeeFormState.value.formDataEmployeeSameAddr,
  (isSame) => {
    if (!employeeFormState.value.currentCustomerBranch) return;
    if (isSame) {
      currentFromDataEmployee.value.address =
        employeeFormState.value.currentCustomerBranch.address;
      currentFromDataEmployee.value.addressEN =
        employeeFormState.value.currentCustomerBranch.addressEN;
      currentFromDataEmployee.value.provinceId =
        employeeFormState.value.currentCustomerBranch.provinceId;
      currentFromDataEmployee.value.districtId =
        employeeFormState.value.currentCustomerBranch.districtId;
      currentFromDataEmployee.value.subDistrictId =
        employeeFormState.value.currentCustomerBranch.subDistrictId;
    }
    currentFromDataEmployee.value.customerBranchId =
      employeeFormState.value.currentCustomerBranch.id;
  },
);

watch(
  () => currentFromDataEmployee.value.dateOfBirth,
  (v) => {
    const isEdit =
      employeeFormState.value.drawerModal &&
      employeeFormState.value.isEmployeeEdit;
    let currentFormDate = v && toISOStringWithTimezone(new Date(v));
    let currentDate: string = '';

    if (isEdit && employeeFormState.value.currentEmployee) {
      currentDate = toISOStringWithTimezone(
        new Date(employeeFormState.value.currentEmployee.dateOfBirth),
      );
    }

    if (
      employeeFormState.value.dialogModal ||
      (isEdit && currentFormDate !== currentDate)
    ) {
      const age = calculateAge(
        currentFromDataEmployee.value.dateOfBirth,
        'year',
      );
      if (currentFromDataEmployee.value.dateOfBirth && Number(age) < 15) {
        dialog({
          color: 'warning',
          icon: 'mdi-alert',
          title: t('dialog.title.youngWorker15'),
          cancelText: t('general.edit'),
          persistent: true,
          message: t('dialog.message.youngWorker15'),

          cancel: async () => {
            currentFromDataEmployee.value.dateOfBirth = null;
            return;
          },
        });
      }

      if (
        currentFromDataEmployee.value.dateOfBirth &&
        Number(age) > 15 &&
        Number(age) <= 18
      ) {
        dialog({
          color: 'warning',
          icon: 'mdi-alert',
          title: t('dialog.title.youngWorker18'),
          cancelText: t('general.cancel'),
          actionText: t('general.confirm'),
          persistent: true,
          message: t('dialog.message.youngWorker18'),
          action: () => {},
          cancel: async () => {
            currentFromDataEmployee.value.dateOfBirth = null;
            return;
          },
        });
      }
    }
  },
);

watch(
  () => currentFromDataEmployee.value.image,
  () => {
    if (currentFromDataEmployee.value.image !== null)
      employeeFormState.value.isImageEdit = true;
  },
);

onMounted(async () => {
  currentPageEmployee.value = 1;
  listEmployee.value = [];
  await fetchListEmployee({ fetchStats: true });
});
</script>
<template>
  <q-splitter
    v-model="splitPercent"
    :limits="[0, 100]"
    class="col full-width"
    before-class="overflow-hidden"
    after-class="overflow-hidden"
    :disable="$q.screen.lt.sm"
  >
    <template v-slot:before>
      <div
        class="column q-pa-md surface-1 full-height full-width"
        style="gap: var(--size-1)"
      >
        <q-item
          active
          dense
          active-class="employer-active"
          class="no-padding items-center rounded full-width"
          v-close-popup
          clickable
        >
          <span class="q-px-md ellipsis">
            {{ $t('general.all') }}
          </span>
        </q-item>
      </div>
    </template>

    <template v-slot:after>
      <div class="column full-height no-wrap">
        <!-- employee -->
        <template
          v-if="listEmployee && employeeStats > 0 && currentTab === 'employee'"
        >
          <div
            v-if="listEmployee.length === 0"
            class="row col full-width items-center justify-center"
            style="min-height: 250px"
          >
            <NoData :not-found="!!inputSearch" />
          </div>

          <article
            v-if="listEmployee.length !== 0"
            class="column scroll q-pa-md col"
          >
            <q-infinite-scroll
              :offset="10"
              @load="
                (_, done) => {
                  if (
                    $q.screen.gt.xs ||
                    currentPageEmployee === maxPageEmployee
                  )
                    return;
                  currentPageEmployee = currentPageEmployee + 1;
                  fetchListEmployee().then(() =>
                    done(currentPageEmployee >= maxPageEmployee),
                  );
                }
              "
            >
              <TableEmpoloyee
                :hide-delete="!canAccess('customer', 'edit')"
                v-model:page-size="pageSize"
                v-model:current-page="currentPageEmployee"
                :grid-view="gridView"
                :list-employee="listEmployee"
                :columns-employee="columnsEmployee"
                :field-selected="fieldSelected"
                @history="
                  (item: any) => {
                    openHistory(item.id);
                  }
                "
                @view="
                  async (item: any) => {
                    employeeFormState.drawerModal = true;
                    employeeFormState.isEmployeeEdit = false;
                    employeeFormStore.assignFormDataEmployee(item.id);
                    await fetchImageList(
                      item.id,
                      item.selectedImage || '',
                      'employee',
                    );
                  }
                "
                @edit="(item: any) => editEmployeeFormPersonal(item.id)"
                @delete="
                  (item: any) => {
                    deleteEmployeeById({
                      id: item.id,
                      fetch: async () =>
                        await fetchListEmployee(
                          currentTab === 'employer'
                            ? {
                                page: 1,
                                pageSize: 999,
                                customerId: customerFormState.currentCustomerId,
                              }
                            : {
                                fetchStats: true,
                                mobileFetch: $q.screen.xs,
                              },
                        ),
                    });
                  }
                "
                @toggle-status="
                  async (item: any) => {
                    triggerChangeStatus(item.id, item.status, item.firstNameEN);
                  }
                "
              />
              <template v-slot:loading>
                <div
                  v-if="
                    $q.screen.lt.sm && currentPageEmployee !== maxPageEmployee
                  "
                  class="row justify-center"
                >
                  <q-spinner-dots color="primary" size="40px" />
                </div>
              </template>
            </q-infinite-scroll>
          </article>
          <footer
            v-if="listEmployee.length !== 0 && $q.screen.gt.xs"
            class="row justify-between items-center q-px-md q-py-sm"
          >
            <div class="row col-4 items-center">
              <div
                class="app-text-muted"
                style="width: 80px"
                v-if="$q.screen.gt.sm"
              >
                {{ $t('general.recordPerPage') }}
              </div>

              <div><PaginationPageSize v-model="pageSize" /></div>
            </div>

            <div class="col-4 flex justify-center app-text-muted">
              {{
                $q.screen.gt.sm
                  ? $t('general.recordsPage', {
                      resultcurrentPage: listEmployee.length,
                      total: employeeStats,
                    })
                  : $t('general.ofPage', {
                      current: listEmployee.length,
                      total: employeeStats,
                    })
              }}
            </div>

            <div class="col-4 flex justify-end">
              <PaginationComponent
                v-model:current-page="currentPageEmployee"
                v-model:max-page="maxPageEmployee"
                :fetch-data="
                  async () => {
                    await fetchListEmployee();
                    flowStore.rotate();
                  }
                "
              />
            </div>
          </footer>
        </template>
      </div>
    </template>
  </q-splitter>

  <!-- add employee -->
  <DialogForm
    hideFooter
    :title="$t('form.title.create', { name: $t('customer.employee') })"
    v-model:modal="employeeFormState.dialogModal"
    :undo="() => employeeFormUndo(false)"
    :submit="
      async () => {
        if (employeeFormState.currentTab === 'personalInfo') {
          await employeeFormStore.submitPersonal(onCreateImageList);
          employeeFormState.isEmployeeEdit = false;
          employeeFormState.dialogType = 'info';
        }

        if (employeeFormState.currentTab === 'passport') {
          await employeeFormStore.submitPassport();
        }

        if (employeeFormState.currentTab === 'visa') {
          await employeeFormStore.submitVisa();
        }

        if (employeeFormState.currentTab === 'healthCheck') {
          await employeeFormStore.submitHealthCheck();
        }

        if (employeeFormState.currentTab === 'workHistory') {
          await employeeFormStore.submitWorkHistory();
        }

        if (employeeFormState.currentTab === 'other') {
          await employeeFormStore.submitOther();
        }
        statusEmployeeCreate = true;
        employeeFormState.isEmployeeEdit = false;

        if (route.name !== 'CustomerBranchManagement') {
          await fetchListEmployee(
            currentTab === 'employer'
              ? {
                  page: 1,
                  pageSize: 999,
                  customerId: customerFormState.currentCustomerId,
                }
              : { fetchStats: true, mobileFetch: $q.screen.xs },
          );

          flowStore.rotate();
        }
      }
    "
    :show="
      () => {
        employeeFormStore.resetFormDataEmployee(true);
      }
    "
    :before-close="
      () => {
        if (employeeFormStore.isFormDataDifferent()) {
          employeeConfirmUnsave();
          return true;
        } else {
          if ($q.screen.gt.xs) fetchListEmployee();
        }

        employeeFormState.currentTab = 'personalInfo';
        return false;
      }
    "
  >
    <div
      :class="{
        'q-mx-lg q-my-md': $q.screen.gt.sm,
        'q-mx-md q-my-sm': !$q.screen.gt.sm,
      }"
    >
      <ProfileBanner
        active
        useToggle
        prefix="dialog"
        color="white"
        icon="mdi-account-plus-outline"
        :bg-color="
          employeeFormState.profileUrl
            ? 'white'
            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
        "
        v-model:current-tab="employeeFormState.currentTab"
        v-model:toggle-status="currentFromDataEmployee.status"
        fallbackCover="/images/employee-banner.png"
        :img="
          employeeFormState.profileUrl ||
          `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
            refreshImageState ? `?ts=${Date.now()}` : '',
          )
        "
        :fallbackImg="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
        :tabs-list="
          [
            {
              name: 'personalInfo',
              label: $t('customerEmployee.form.group.personalInfo'),
            },
            {
              name: 'passport',
              label: $t('customerEmployee.fileType.passport'),
            },
            {
              name: 'visa',
              label: $t('customerEmployee.form.group.visa'),
            },

            {
              name: 'healthCheck',
              label: $t('customerEmployee.form.group.healthCheck'),
            },
            {
              name: 'workHistory',
              label: $t('customerEmployee.form.group.workHistory'),
            },
            { name: 'other', label: $t('customerEmployee.form.group.other') },
          ].filter((v) => {
            if (!employeeFormState.statusSavePersonal) {
              return v.name === 'personalInfo';
            }

            return true;
          })
        "
        :toggleTitle="$t('status.title')"
        hideFade
        :title="
          currentFromDataEmployee
            ? setPrefixName(
                {
                  namePrefix: currentFromDataEmployee.namePrefix,
                  firstName: currentFromDataEmployee.firstName,
                  lastName: currentFromDataEmployee.lastName,
                  firstNameEN: currentFromDataEmployee.firstNameEN,
                  lastNameEN: currentFromDataEmployee.lastNameEN,
                },
                { locale },
              )
            : '-'
        "
        @view="
          () => {
            employeeFormState.imageDialog = true;
            employeeFormState.isImageEdit = false;
          }
        "
        @edit="
          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
        "
        @update:toggle-status="
          () => {
            currentFromDataEmployee.status =
              currentFromDataEmployee.status === 'CREATED'
                ? 'INACTIVE'
                : 'CREATED';
          }
        "
      />
    </div>

    <div
      style="flex: 1; width: 100%; overflow-y: auto"
      :class="{
        'q-px-lg q-pb-lg': $q.screen.gt.sm,
        'q-px-md q-pb-sm': !$q.screen.gt.sm,
      }"
      id="drawer-employee-form"
    >
      <div
        class="col surface-1 full-height rounded bordered scroll row relative-position"
        :key="String(!employeeFormState.isEmployeeEdit)"
      >
        <div
          class="col"
          style="height: 100%; max-height: 100; overflow-y: auto"
          v-if="$q.screen.gt.sm"
        >
          <div class="q-py-md q-pl-md q-pr-sm">
            <SideMenu
              :menu="
                [
                  {
                    name: $t('form.field.basicInformation'),
                    anchor: 'form-information',
                    tab: 'personalInfo',
                  },
                  {
                    name: $t('customerEmployee.form.group.personalInfo'),
                    anchor: 'form-personal',
                    tab: 'personalInfo',
                  },
                  {
                    name: $t('general.address'),
                    anchor: 'form-personal-address',
                    tab: 'personalInfo',
                  },
                  {
                    name: $t('general.uploadFile'),
                    anchor: 'form-info-file-upload',
                    tab: 'personalInfo',
                  },

                  {
                    name: $t('customerEmployee.form.group.passport'),
                    anchor: 'form-passport',
                    tab: 'passport',
                    useBtn:
                      currentFromDataEmployee.employeePassport?.filter(
                        (item) => {
                          if (item.id === undefined) {
                            return true;
                          }
                          return false;
                        },
                      ).length === 0 &&
                      employeeFormState.currentIndexPassport === -1
                        ? true
                        : false,
                  },
                  ...(currentFromDataEmployee.employeePassport?.map((v, i) => ({
                    name: dateFormat(v.expireDate),
                    anchor: `form-employee-employeePassport-${i}`,
                    tab: 'passport',
                    sub: true,
                  })) || []),

                  {
                    name: $t('customerEmployee.form.group.visa'),
                    anchor: 'form-visa',
                    tab: 'visa',
                    useBtn:
                      currentFromDataEmployee.employeeVisa?.filter((item) => {
                        if (item.id === undefined) {
                          return true;
                        }
                        return false;
                      }).length === 0 &&
                      employeeFormState.currentIndexVisa === -1
                        ? true
                        : false,
                  },

                  ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
                    name: dateFormat(v.expireDate),
                    anchor: `form-employee-visa-${i}`,
                    tab: 'visa',
                    sub: true,
                  })) || []),

                  {
                    name: $t('customerEmployee.form.group.healthCheck'),
                    anchor: 'form-employee-checkup',
                    tab: 'healthCheck',
                    useBtn:
                      currentFromDataEmployee.employeeCheckup?.filter(
                        (item) => {
                          if (item.id === undefined) {
                            return true;
                          }
                          return false;
                        },
                      ).length === 0 &&
                      employeeFormState.currentIndexCheckup === -1
                        ? true
                        : false,
                  },

                  ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
                    name: $t('general.times', { number: i + 1 }),
                    anchor: `form-employee-checkup-${i}`,
                    tab: 'healthCheck',
                  })) || []),

                  {
                    name: $t('customerEmployee.form.group.workHistory'),
                    anchor: 'form-employee-work-history',
                    tab: 'workHistory',
                    useBtn:
                      currentFromDataEmployee.employeeWork?.filter((item) => {
                        if (item.id === undefined) {
                          return true;
                        }
                        return false;
                      }).length === 0 &&
                      employeeFormState.currentIndexWorkHistory === -1
                        ? true
                        : false,
                  },

                  ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
                    name: $t('general.times', { number: i + 1 }),
                    anchor: `form-employee-work-history-${i}`,
                    tab: 'workHistory',
                  })) || []),

                  {
                    name: $t('customerEmployee.form.group.family'),
                    anchor: 'form-employee-other',
                    tab: 'other',
                  },
                ].filter((v) => v.tab === employeeFormState.currentTab)
              "
              background="transparent"
              :active="{
                background: 'hsla(var(--blue-6-hsl) / .2)',
                foreground: 'var(--blue-6)',
              }"
              scroll-element="#employee-form-content"
            >
              <template v-slot:btn-form-passport>
                <q-btn
                  id="form-add-passport"
                  dense
                  flat
                  icon="mdi-plus"
                  size="sm"
                  rounded
                  padding="0px 0px"
                  style="color: var(--stone-9)"
                  @click.stop="employeeFormStore.addPassport()"
                />
              </template>

              <template v-slot:btn-form-visa>
                <q-btn
                  id="form-add-visa"
                  dense
                  flat
                  icon="mdi-plus"
                  size="sm"
                  rounded
                  style="color: var(--stone-9)"
                  @click.stop="employeeFormStore.addVisa()"
                />
              </template>

              <template v-slot:btn-form-employee-checkup>
                <q-btn
                  id="form-add-checkup"
                  dense
                  flat
                  icon="mdi-plus"
                  size="sm"
                  rounded
                  style="color: var(--stone-9)"
                  @click.stop="employeeFormStore.addCheckup()"
                />
              </template>

              <template v-slot:btn-form-employee-work-history>
                <q-btn
                  id="form-add-work-history"
                  dense
                  flat
                  icon="mdi-plus"
                  size="sm"
                  rounded
                  style="color: var(--stone-9)"
                  @click.stop="employeeFormStore.addWorkHistory()"
                />
              </template>
            </SideMenu>
          </div>
        </div>

        <div
          class="col-12 col-md-10"
          :class="{
            'q-py-md q-pr-md ': $q.screen.gt.sm,
            'q-pa-sm': !$q.screen.gt.sm,
          }"
          id="employee-form-content"
          style="height: 100%; max-height: 100; overflow-y: auto"
        >
          <template v-if="employeeFormState.currentTab === 'personalInfo'">
            <div
              class="rounded row q-py-md q-px-md"
              style="position: absolute; z-index: 999; top: 0; right: 0"
            >
              <div class="surface-1 row rounded">
                <UndoButton
                  v-if="
                    employeeFormState.isEmployeeEdit &&
                    employeeFormState.dialogType !== 'create'
                  "
                  id="btn-info-basic-undo"
                  icon-only
                  @click="
                    () => {
                      employeeFormStore.resetFormDataEmployee();
                      employeeFormState.isEmployeeEdit = false;
                      employeeFormState.dialogType = 'info';
                    }
                  "
                  type="button"
                />
                <SaveButton
                  v-if="employeeFormState.isEmployeeEdit"
                  id="btn-info-basic-save"
                  icon-only
                  type="submit"
                />
                <EditButton
                  v-if="!employeeFormState.isEmployeeEdit"
                  id="btn-info-basic-edit"
                  icon-only
                  @click="
                    () => {
                      employeeFormState.isEmployeeEdit = true;
                      employeeFormState.dialogType = 'edit';
                    }
                  "
                  type="button"
                />
                <DeleteButton
                  v-if="!employeeFormState.isEmployeeEdit"
                  id="btn-info-basic-delete"
                  icon-only
                  @click="
                    () =>
                      deleteEmployeeById({
                        id: currentFromDataEmployee.id,
                        fetch: async () =>
                          await fetchListEmployee(
                            currentTab === 'employer'
                              ? {
                                  page: 1,
                                  pageSize: 999,
                                  customerId:
                                    customerFormState.currentCustomerId,
                                }
                              : {
                                  fetchStats: true,
                                  mobileFetch: $q.screen.xs,
                                },
                          ),
                      })
                  "
                  type="button"
                />
              </div>
            </div>

            <BasicInformation
              no-action
              id="form-information"
              prefix-id="form-employee"
              :show-btn-save="employeeFormState.dialogType === 'create'"
              employee
              dense
              outlined
              separator
              title="form.field.basicInformation"
              :readonly="!employeeFormState.isEmployeeEdit"
              :employee-owner-option="employeeStore.ownerOption || []"
              v-model:customer-branch-id="employeeFormState.currentBranchId"
              v-model:current-customer-branch="
                employeeFormState.currentCustomerBranch
              "
              v-model:employee-id="employeeFormState.currentEmployeeCode"
              v-model:nrc-no="currentFromDataEmployee.nrcNo"
              v-model:code="currentFromDataEmployee.code"
              class="q-mb-xl"
            />
            <FormPerson
              id="form-personal"
              prefix-id="form-employee"
              dense
              outlined
              employee
              separator
              title="customerEmployee.form.group.personalInfo"
              :readonly="!employeeFormState.isEmployeeEdit"
              v-model:open="employeeFormState.dialogModal"
              v-model:prefix-name="currentFromDataEmployee.namePrefix"
              v-model:first-name="currentFromDataEmployee.firstName"
              v-model:last-name="currentFromDataEmployee.lastName"
              v-model:first-name-en="currentFromDataEmployee.firstNameEN"
              v-model:last-name-en="currentFromDataEmployee.lastNameEN"
              v-model:mid-name="currentFromDataEmployee.middleName"
              v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
              v-model:gender="currentFromDataEmployee.gender"
              v-model:birth-date="currentFromDataEmployee.dateOfBirth"
              v-model:nationality="currentFromDataEmployee.nationality"
              class="q-mb-xl"
            />
            <AddressForm
              disabledRule
              id="form-personal-address"
              prefix-id="form-employee"
              :readonly="!employeeFormState.isEmployeeEdit"
              v-model:same-with-employer="
                employeeFormState.formDataEmployeeSameAddr
              "
              v-model:address="currentFromDataEmployee.address"
              v-model:address-en="currentFromDataEmployee.addressEN"
              v-model:moo="currentFromDataEmployee.moo"
              v-model:moo-en="currentFromDataEmployee.mooEN"
              v-model:soi="currentFromDataEmployee.soi"
              v-model:soi-en="currentFromDataEmployee.soiEN"
              v-model:street="currentFromDataEmployee.street"
              v-model:street-en="currentFromDataEmployee.streetEN"
              v-model:province-id="currentFromDataEmployee.provinceId"
              v-model:district-id="currentFromDataEmployee.districtId"
              v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
              employee
              dense
              class="q-mb-xl"
            />

            <div class="row q-mb-md" id="form-info-file-upload">
              <div class="col-12 q-pb-sm text-weight-bold text-body1">
                <q-icon
                  flat
                  size="xs"
                  class="q-pa-sm rounded q-mr-xs"
                  color="info"
                  name="mdi-upload"
                  style="background-color: var(--surface-3)"
                />
                {{ $t(`general.uploadFile`) }}
              </div>
              <!-- สร้างลูกจ้าง -->
              <UploadFileGroup
                v-model:current-id="currentFromDataEmployee.id"
                v-model="currentFromDataEmployee.file"
                hide-action
                :readonly="!employeeFormState.isEmployeeEdit"
                :menu="uploadFileListEmployee"
                :columns="columnsAttachment"
                @submit="
                  async (group, allMeta) => {
                    if (allMeta === undefined) return;

                    if (group === 'passport') {
                      const fullName = allMeta['full_name'].split(' ');
                      let tempValue: {
                        oldData: { nameField: string; value: string }[];
                        newData: { nameField: string; value: string }[];
                      } = { oldData: [], newData: [] };

                      if (
                        currentFromDataEmployee.gender !== '' &&
                        currentFromDataEmployee.gender !== allMeta['sex']
                      ) {
                        tempValue.oldData.push({
                          nameField: $t('form.gender'),
                          value: $t(
                            `general.${currentFromDataEmployee.gender}`,
                          ),
                        });
                        tempValue.newData.push({
                          nameField: $t('form.gender'),
                          value: $t(`general.${allMeta['sex']}`),
                        });
                      }

                      if (currentFromDataEmployee.firstName !== '') {
                        tempValue.oldData.push({
                          nameField: $t('personnel.form.firstName'),
                          value: currentFromDataEmployee.firstName,
                        });
                        tempValue.newData.push({
                          nameField: $t('personnel.form.firstName'),
                          value: fullName[0],
                        });
                      }

                      if (currentFromDataEmployee.lastName !== '') {
                        tempValue.oldData.push({
                          nameField: $t('personnel.form.lastName'),
                          value: currentFromDataEmployee.lastName,
                        });
                        tempValue.newData.push({
                          nameField: $t('personnel.form.lastName'),
                          value: fullName[1],
                        });
                      }

                      if (currentFromDataEmployee.nationality !== '') {
                        tempValue.oldData.push({
                          nameField: $t('general.nationality'),
                          value: currentFromDataEmployee.nationality || '',
                        });
                        tempValue.newData.push({
                          nameField: $t('general.nationality'),
                          value: allMeta['nationality'],
                        });
                      }

                      dialogCheckData({
                        action: async () => {
                          currentFromDataEmployee.gender = allMeta['sex'];
                          currentFromDataEmployee.firstName = fullName[0];
                          currentFromDataEmployee.lastName = fullName[1];
                          currentFromDataEmployee.nationality =
                            allMeta['nationality'];
                        },
                        checkData: () => {
                          return tempValue;
                        },
                        cancel: () => {
                          if (!currentFromDataEmployee.gender) {
                            currentFromDataEmployee.gender = allMeta['gender'];
                          }
                          if (!currentFromDataEmployee.firstName) {
                            currentFromDataEmployee.firstName = fullName[0];
                          }
                          if (!currentFromDataEmployee.firstName) {
                            currentFromDataEmployee.firstName = fullName[0];
                          }
                          if (!currentFromDataEmployee.lastName) {
                            currentFromDataEmployee.lastName = fullName[1];
                          }

                          if (!currentFromDataEmployee.nationality) {
                            currentFromDataEmployee.nationality =
                              allMeta['nationality'];
                          }
                        },
                      });
                    }
                  }
                "
                :ocr="
                  async (group, file) => {
                    if (group === 'passport') {
                      mrz = await runOcr(file, parseResultMRZ);

                      if (mrz !== null) {
                        const mapMrz = Object.entries(mrz.result || {}).map(
                          ([key, value]) => ({
                            name: key,
                            value: String(value),
                          }),
                        );
                        const tempValue = {
                          status: true,
                          group,
                          meta: mapMrz,
                        };

                        return tempValue;
                      }
                    }
                    if (group === 'visa') {
                      const res = await ocrStore.sendOcr({
                        file: file,
                        category: group,
                      });

                      if (res) {
                        const tempValue = {
                          status: true,
                          group,
                          meta: res.fields,
                        };

                        return tempValue;
                      }
                    }

                    return { status: true, group, meta: [] };
                  }
                "
                :auto-save="currentFromDataEmployee.id !== ''"
                :download="
                  (obj) => {
                    if (obj.group !== 'attachment') {
                      employeeStore.getFile({
                        parentId: currentFromDataEmployee.id || '',
                        group: obj.group,
                        fileId: obj._meta.id,
                        download: true,
                      });
                    } else {
                      employeeStore.getAttachment({
                        parentId: currentFromDataEmployee.id || '',
                        name: obj._meta.name,
                        download: true,
                      });
                    }
                  }
                "
                :delete-item="
                  async (obj) => {
                    let status: boolean = false;
                    const res = await employeeStore.delMeta({
                      parentId: currentFromDataEmployee.id || '',
                      group: obj.group,
                      metaId: obj._meta.id,
                    });

                    if (res) {
                      status = true;
                    }

                    await employeeFormStore.assignFormDataEmployee(
                      currentFromDataEmployee.id,
                    );

                    return status;
                  }
                "
                :save="
                  async (
                    group: 'passport' | 'visa' | 'attachment',
                    _meta: any,
                    file: File | undefined,
                  ) => {
                    let status: boolean = false;
                    if (group === 'passport' || group === 'visa') {
                      if (file !== undefined && currentFromDataEmployee.id) {
                        const res = await employeeStore.postMeta({
                          parentId: currentFromDataEmployee.id || '',
                          group,
                          meta: _meta,
                          file,
                        });

                        if (res) {
                          status = true;
                        }
                      } else {
                        const {
                          id,
                          employeeId,
                          createdAt,
                          updatedAt,
                          ...payload
                        } = _meta;

                        const res = await employeeStore.putMeta({
                          parentId: currentFromDataEmployee.id || '',
                          group,
                          metaId: _meta.id,
                          meta: payload,
                          file,
                        });
                        if (res) {
                          status = true;
                        }
                      }
                    } else {
                      if (file !== undefined) {
                        await employeeStore.uploadAttachment(
                          currentFromDataEmployee.id || '',
                          file,
                          file.name,
                        );
                        status = true;
                      }
                    }
                    await employeeFormStore.assignFormDataEmployee(
                      currentFromDataEmployee.id,
                    );
                    return status;
                  }
                "
                :get-file-list="
                  async (group: 'passport' | 'visa' | 'attachment') => {
                    if (
                      !!currentFromDataEmployee.id &&
                      group !== 'attachment'
                    ) {
                      const resMeta = await employeeStore.getMetaList({
                        parentId: currentFromDataEmployee.id,
                        group,
                      });

                      const tempValue = resMeta.map(async (i: any) => {
                        return {
                          _meta: { ...i },
                          name: `${group}-${dateFormat(i.expireDate)}` || '',
                          group: group,
                          url: await employeeStore.getFile({
                            parentId: currentFromDataEmployee.id || '',
                            group,
                            fileId: i.id,
                          }),
                          file: undefined,
                        };
                      });

                      return await waitAll(tempValue);
                    } else {
                      const res = await employeeStore.listAttachment({
                        parentId: currentFromDataEmployee.id || '',
                      });

                      const tempValue = (res as string[]).map(
                        async (i: any) => {
                          return {
                            _meta: { id: i, name: i },
                            name: i || '',
                            group: group,
                            url: await employeeStore.getAttachment({
                              parentId: currentFromDataEmployee.id || '',
                              name: i,
                            }),
                            file: undefined,
                          };
                        },
                      );

                      return await waitAll(tempValue);
                    }
                  }
                "
              >
                <template #form="{ mode, meta, isEdit }">
                  <FormEmployeePassport
                    v-if="mode === 'passport' && meta"
                    prefix-id="drawer-info-employee"
                    id="form-passport"
                    dense
                    outlined
                    separator
                    ocr
                    :title="$t('customerEmployee.form.group.passport')"
                    :readonly="!isEdit"
                    v-model:birth-country="meta.birthCountry"
                    v-model:previous-passportRef="meta.previousPassportRef"
                    v-model:issue-place="meta.issuePlace"
                    v-model:issue-country="meta.issueCountry"
                    v-model:issue-date="meta.issueDate"
                    v-model:type="meta.type"
                    v-model:expire-date="meta.expireDate"
                    v-model:birth-date="meta.birthDate"
                    v-model:worker-status="meta.workerStatus"
                    v-model:nationality="meta.nationality"
                    v-model:gender="meta.gender"
                    v-model:last-name-en="meta.lastNameEN"
                    v-model:last-name="meta.lastName"
                    v-model:middle-name-en="meta.middleNameEN"
                    v-model:middle-name="meta.middleName"
                    v-model:first-name-en="meta.firstNameEN"
                    v-model:first-name="meta.firstName"
                    v-model:name-prefix="meta.namePrefix"
                    v-model:passport-number="meta.number"
                  />
                  <FormEmployeeVisa
                    v-if="mode === 'visa' && meta"
                    prefix-id="drawer-info-employee"
                    id="form-visa"
                    ocr
                    dense
                    outlined
                    title="customerEmployee.form.group.visa"
                    :readonly="!isEdit"
                    v-model:arrival-at="meta.arrivalAt"
                    v-model:arrival-tm-no="meta.arrivalTMNo"
                    v-model:arrival-tm="meta.arrivalTM"
                    v-model:mrz="meta.mrz"
                    v-model:entry-count="meta.entryCount"
                    v-model:issue-place="meta.issuePlace"
                    v-model:issue-country="meta.issueCountry"
                    v-model:issueDate="meta.issueDate"
                    v-model:type="meta.type"
                    v-model:expire-date="meta.expireDate"
                    v-model:visa-issue-date="meta.issueDate"
                    v-model:visa-expiry-date="meta.expireDate"
                    v-model:remark="meta.remark"
                    v-model:worker-type="meta.workerType"
                    v-model:number="meta.number"
                    v-model:report-date="meta.reportDate"
                  />

                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
                </template>
              </UploadFileGroup>
            </div>
          </template>

          <template v-if="employeeFormState.currentTab === 'passport'">
            <div class="q-gutter-sm">
              <div
                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
              >
                <q-icon
                  flat
                  size="xs"
                  class="q-pa-sm rounded q-mr-xs"
                  color="info"
                  name="mdi-passport"
                  style="background-color: var(--surface-3)"
                />
                {{ $t('customerEmployee.form.group.passport') }}
                <AddButton
                  v-if="$q.screen.lt.md"
                  id="btn-add-work"
                  icon-only
                  class="q-ml-sm"
                  :disabled="
                    currentFromDataEmployee.employeePassport?.filter((item) => {
                      if (item.id === undefined) {
                        return false;
                      }
                      return true;
                    }).length === 0 &&
                    employeeFormState.currentIndexPassport === -1
                      ? false
                      : true
                  "
                  @click.stop="employeeFormStore.addPassport()"
                />
              </div>

              <FormEmployeePassport
                v-for="(
                  value, index
                ) in currentFromDataEmployee.employeePassport"
                prefix-id="drawer-info-employee"
                :key="index"
                id="form-passport"
                hide-title
                dense
                outlined
                separator
                :title="$t('customerEmployee.form.group.passport')"
                :readonly="employeeFormState.currentIndexPassport !== index"
                :full-name="employeeFormState.currentIndexPassport !== index"
                v-model:birth-country="value.birthCountry"
                v-model:previous-passportRef="value.previousPassportRef"
                v-model:issue-place="value.issuePlace"
                v-model:issue-country="value.issueCountry"
                v-model:issue-date="value.issueDate"
                v-model:type="value.type"
                v-model:expire-date="value.expireDate"
                v-model:birth-date="value.birthDate"
                v-model:worker-status="value.workerStatus"
                v-model:nationality="value.nationality"
                v-model:gender="value.gender"
                v-model:last-name-en="value.lastNameEN"
                v-model:last-name="value.lastName"
                v-model:middle-name-en="value.middleNameEN"
                v-model:middle-name="value.middleName"
                v-model:first-name-en="value.firstNameEN"
                v-model:first-name="value.firstName"
                v-model:name-prefix="value.namePrefix"
                v-model:passport-number="value.number"
                v-model:file="value.file"
              >
                <template v-slot:expiryDate>
                  {{ $t('general.expirationDate') }} :
                  {{ dateFormat(value.expireDate) }}
                  <ExpirationDate
                    v-if="value.id !== undefined"
                    :expiration-date="value.expireDate"
                  />
                </template>

                <template v-slot:button>
                  <div class="surface-1 row rounded" style="min-height: 35px">
                    <UndoButton
                      v-if="
                        employeeFormState.isEmployeeEdit &&
                        !(employeeFormState.currentIndexPassport === -1) &&
                        employeeFormState.currentIndexPassport === index
                      "
                      id="btn-info-basic-undo"
                      icon-only
                      @click="
                        () => {
                          employeeFormStore.resetFormDataEmployee();
                          employeeFormState.isEmployeeEdit = false;
                          employeeFormState.dialogType = 'info';
                          employeeFormState.currentIndexPassport = -1;
                        }
                      "
                      type="button"
                    />
                    <SaveButton
                      v-if="
                        (employeeFormState.isEmployeeEdit ||
                          value.id === undefined) &&
                        !(employeeFormState.currentIndexPassport === -1) &&
                        employeeFormState.currentIndexPassport === index
                      "
                      id="btn-info-basic-save"
                      icon-only
                      @click="
                        () => {
                          employeeFormState.currentIndexPassport = index;
                        }
                      "
                      type="submit"
                    />

                    <EditButton
                      v-if="
                        employeeFormState.currentIndexPassport === -1 ||
                        (!employeeFormState.isEmployeeEdit &&
                          value.id !== undefined &&
                          employeeFormState.currentIndexPassport === index)
                      "
                      id="btn-info-basic-edit"
                      icon-only
                      @click="
                        () => {
                          employeeFormState.currentIndexPassport = index;
                          employeeFormState.isEmployeeEdit = true;
                          employeeFormState.dialogType = 'edit';
                        }
                      "
                      type="button"
                    />
                    <DeleteButton
                      v-if="
                        employeeFormState.currentIndexPassport === -1 ||
                        (!employeeFormState.isEmployeeEdit &&
                          value.id !== undefined &&
                          !(employeeFormState.currentIndexPassport === -1) &&
                          employeeFormState.currentIndexPassport === index)
                      "
                      id="btn-info-basic-delete"
                      icon-only
                      @click.stop="
                        () => {
                          employeeFormState.currentIndexPassport = index;
                          deleteEmployeeById({
                            type: 'passport',
                            index,
                            fetch: async () =>
                              await fetchListEmployee(
                                currentTab === 'employer'
                                  ? {
                                      page: 1,
                                      pageSize: 999,
                                      customerId:
                                        customerFormState.currentCustomerId,
                                    }
                                  : {
                                      fetchStats: true,
                                      mobileFetch: $q.screen.xs,
                                    },
                              ),
                          });
                        }
                      "
                      type="button"
                      :disabled="
                        !(employeeFormState.currentIndexPassport === -1) &&
                        !(employeeFormState.currentIndexPassport === index)
                      "
                    />
                  </div>
                </template>
              </FormEmployeePassport>
            </div>
          </template>

          <template v-if="employeeFormState.currentTab === 'visa'">
            <div class="q-gutter-sm">
              <div
                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
              >
                <q-icon
                  flat
                  size="xs"
                  class="q-pa-sm rounded q-mr-xs"
                  color="info"
                  name="mdi-passport"
                  style="background-color: var(--surface-3)"
                />
                {{ $t('customerEmployee.form.group.visa') }}
                <AddButton
                  v-if="$q.screen.lt.md"
                  id="btn-add-work"
                  icon-only
                  class="q-ml-sm"
                  :disabled="
                    currentFromDataEmployee.employeeVisa?.filter((item) => {
                      if (item.id === undefined) {
                        return false;
                      }
                      return true;
                    }).length === 0 && employeeFormState.currentIndexVisa === -1
                      ? false
                      : true
                  "
                  @click.stop="employeeFormStore.addVisa()"
                />
              </div>

              <FormEmployeeVisa
                v-for="(value, index) in currentFromDataEmployee.employeeVisa"
                :key="index"
                prefix-id="drawer-info-employee"
                id="form-visa"
                dense
                outlined
                title="customerEmployee.form.group.visa"
                :readonly="employeeFormState.currentIndexVisa !== index"
                hide-title
                v-model:arrival-at="value.arrivalAt"
                v-model:arrival-tm-no="value.arrivalTMNo"
                v-model:arrival-tm="value.arrivalTM"
                v-model:mrz="value.mrz"
                v-model:entry-count="value.entryCount"
                v-model:issue-place="value.issuePlace"
                v-model:issue-country="value.issueCountry"
                v-model:issueDate="value.issueDate"
                v-model:type="value.type"
                v-model:expire-date="value.expireDate"
                v-model:visa-issue-date="value.issueDate"
                v-model:visa-expiry-date="value.expireDate"
                v-model:remark="value.remark"
                v-model:worker-type="value.workerType"
                v-model:number="value.number"
                v-model:report-date="value.reportDate"
              >
                <template v-slot:expiryDate>
                  {{ $t('general.expirationDate') }} :
                  {{ dateFormat(value.expireDate) }}
                  <ExpirationDate
                    v-if="value.id !== undefined"
                    :expiration-date="value.expireDate"
                  />
                </template>

                <template v-slot:button>
                  <div class="surface-1 row rounded" style="min-height: 35px">
                    <UndoButton
                      v-if="
                        employeeFormState.isEmployeeEdit &&
                        !(employeeFormState.currentIndexVisa === -1) &&
                        employeeFormState.currentIndexVisa === index
                      "
                      id="btn-info-basic-undo"
                      icon-only
                      @click="
                        () => {
                          employeeFormStore.resetFormDataEmployee();
                          employeeFormState.isEmployeeEdit = false;
                          employeeFormState.dialogType = 'info';
                          employeeFormState.currentIndexVisa = -1;
                        }
                      "
                      type="button"
                    />
                    <SaveButton
                      v-if="
                        (employeeFormState.isEmployeeEdit ||
                          value.id === undefined) &&
                        !(employeeFormState.currentIndexVisa === -1) &&
                        employeeFormState.currentIndexVisa === index
                      "
                      id="btn-info-basic-save"
                      icon-only
                      @click="
                        () => {
                          employeeFormState.currentIndexVisa = index;
                        }
                      "
                      type="submit"
                    />

                    <EditButton
                      v-if="
                        employeeFormState.currentIndexVisa === -1 ||
                        (!employeeFormState.isEmployeeEdit &&
                          value.id !== undefined &&
                          employeeFormState.currentIndexVisa === index)
                      "
                      id="btn-info-basic-edit"
                      icon-only
                      @click="
                        () => {
                          employeeFormState.currentIndexVisa = index;
                          employeeFormState.isEmployeeEdit = true;
                          employeeFormState.dialogType = 'edit';
                        }
                      "
                      type="button"
                    />
                    <DeleteButton
                      v-if="
                        employeeFormState.currentIndexVisa === -1 ||
                        (!employeeFormState.isEmployeeEdit &&
                          value.id !== undefined &&
                          !(employeeFormState.currentIndexVisa === -1) &&
                          employeeFormState.currentIndexVisa === index)
                      "
                      id="btn-info-basic-delete"
                      icon-only
                      @click.stop="
                        () => {
                          employeeFormState.currentIndexVisa = index;
                          deleteEmployeeById({
                            type: 'visa',
                            index,
                            fetch: async () =>
                              await fetchListEmployee(
                                currentTab === 'employer'
                                  ? {
                                      page: 1,
                                      pageSize: 999,
                                      customerId:
                                        customerFormState.currentCustomerId,
                                    }
                                  : {
                                      fetchStats: true,
                                      mobileFetch: $q.screen.xs,
                                    },
                              ),
                          });
                        }
                      "
                      type="button"
                      :disabled="
                        !(employeeFormState.currentIndexVisa === -1) &&
                        !(employeeFormState.currentIndexVisa === index)
                      "
                    />
                  </div>
                </template>
              </FormEmployeeVisa>
            </div>
          </template>

          <template v-if="employeeFormState.currentTab === 'healthCheck'">
            <div class="q-gutter-sm">
              <div class="q-pb-sm text-weight-bold text-body1 row items-center">
                <q-icon
                  flat
                  size="xs"
                  class="q-pa-sm rounded q-mr-sm"
                  color="info"
                  name="mdi-hospital-box-outline"
                  style="background-color: var(--surface-3)"
                />

                {{ $t(`customerEmployee.formHealthCheck.title`) }}
                <AddButton
                  v-if="$q.screen.lt.md"
                  id="btn-add-work"
                  icon-only
                  class="q-ml-sm"
                  :disabled="
                    currentFromDataEmployee.employeeCheckup?.filter((item) => {
                      if (item.id === undefined) {
                        return false;
                      }
                      return true;
                    }).length === 0 &&
                    employeeFormState.currentIndexCheckup === -1
                      ? false
                      : true
                  "
                  @click.stop="employeeFormStore.addCheckup()"
                />
              </div>
              <FormEmployeeHealthCheck
                v-if="employeeFormState.currentTab === 'healthCheck'"
                id="form-checkup"
                prefix-id="form-employee"
                dense
                outlined
                v-model:current-index="employeeFormState.currentIndexCheckup"
                v-model:employee-checkup="
                  currentFromDataEmployee.employeeCheckup
                "
                v-model:checkup-results-option="
                  optionStore.globalOption.checkupResults
                "
                v-model:checkup-type-option="
                  optionStore.globalOption.insurancePlace
                "
                v-model:medical-benefit-option="
                  optionStore.globalOption.typeInsurance
                "
                v-model:insurance-company-option="
                  optionStore.globalOption.insurancePlace
                "
                @delete="
                  (index) => {
                    employeeFormState.currentIndexCheckup = index;
                    deleteEmployeeById({
                      type: 'healthCheck',
                      index,
                      fetch: async () =>
                        await fetchListEmployee(
                          currentTab === 'employer'
                            ? {
                                page: 1,
                                pageSize: 999,
                                customerId: customerFormState.currentCustomerId,
                              }
                            : {
                                fetchStats: true,
                                mobileFetch: $q.screen.xs,
                              },
                        ),
                    });
                  }
                "
                @save="
                  (index) => {
                    employeeFormState.currentIndexCheckup = index;
                    notify('create', $t('general.success'));
                  }
                "
                @undo="
                  (index) => {
                    if (
                      currentFromDataEmployee.employeeCheckup?.[index]
                        .statusSave === false
                    ) {
                      currentFromDataEmployee.employeeCheckup[
                        index
                      ].statusSave = true;
                    }
                  }
                "
                @edit="
                  (index) => {
                    if (
                      currentFromDataEmployee.employeeCheckup?.[index]
                        .statusSave
                    ) {
                      currentFromDataEmployee.employeeCheckup[
                        index
                      ].statusSave = false;
                    }
                  }
                "
              />
            </div>
          </template>

          <template v-if="employeeFormState.currentTab === 'workHistory'">
            <div class="q-gutter-sm">
              <div
                class="col-12 q-pb-sm text-weight-bold text-body1 row items-center"
              >
                <q-icon
                  flat
                  size="xs"
                  class="q-pa-sm rounded q-mr-xs"
                  color="info"
                  name="mdi-briefcase-outline"
                  style="background-color: var(--surface-3)"
                />
                {{ $t(`customerEmployee.form.group.workHistory`) }}
                <AddButton
                  v-if="$q.screen.lt.md"
                  id="btn-add-work"
                  icon-only
                  class="q-ml-sm"
                  :disabled="
                    currentFromDataEmployee.employeeWork?.filter((item) => {
                      if (item.id === undefined) {
                        return false;
                      }
                      return true;
                    }).length === 0 &&
                    employeeFormState.currentIndexWorkHistory === -1
                      ? false
                      : true
                  "
                  @click.stop="employeeFormStore.addWorkHistory()"
                />
              </div>
              <FormEmployeeWorkHistory
                v-if="employeeFormState.currentTab === 'workHistory'"
                id="form-work-history"
                prefix-id="form-employee"
                dense
                outlined
                v-model:current-index="
                  employeeFormState.currentIndexWorkHistory
                "
                v-model:employee-work="currentFromDataEmployee.employeeWork"
                v-model:position-name-option="optionStore.globalOption.position"
                v-model:job-type-option="optionStore.globalOption.businessType"
                v-model:workplace-option="optionStore.globalOption.area"
                @delete="
                  (index) => {
                    employeeFormState.currentIndexWorkHistory = index;
                    deleteEmployeeById({
                      type: 'work',
                      index,
                      fetch: async () =>
                        await fetchListEmployee(
                          currentTab === 'employer'
                            ? {
                                page: 1,
                                pageSize: 999,
                                customerId: customerFormState.currentCustomerId,
                              }
                            : {
                                fetchStats: true,
                                mobileFetch: $q.screen.xs,
                              },
                        ),
                    });
                  }
                "
                @save="
                  (index) => {
                    employeeFormState.currentIndexWorkHistory = index;
                  }
                "
                @undo="
                  (index) => {
                    if (
                      currentFromDataEmployee.employeeWork?.[index]
                        .statusSave === false
                    ) {
                      currentFromDataEmployee.employeeWork[index].statusSave =
                        true;
                    }
                  }
                "
                @edit="
                  (index) => {
                    if (
                      currentFromDataEmployee.employeeWork?.[index].statusSave
                    ) {
                      currentFromDataEmployee.employeeWork[index].statusSave =
                        false;
                    }
                  }
                "
              />
            </div>
          </template>

          <template v-if="employeeFormState.currentTab === 'other'">
            <FormEmployeeOther
              v-if="employeeFormState.currentTab === 'other'"
              id="form-employee-other"
              prefix-id="form-employee"
              dense
              outlined
              v-model:employee-other="currentFromDataEmployee.employeeOtherInfo"
              @undo="
                () => {
                  if (
                    currentFromDataEmployee.employeeOtherInfo?.statusSave ===
                    false
                  ) {
                    currentFromDataEmployee.employeeOtherInfo.statusSave = true;
                  }
                }
              "
              @edit="
                () => {
                  if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
                    currentFromDataEmployee.employeeOtherInfo.statusSave = false;
                  }
                }
              "
            />
          </template>
        </div>
      </div>
    </div>
  </DialogForm>

  <ImageUploadDialog
    ref="dialogEmployeeImageUpload"
    v-model:dialog-state="employeeFormState.imageDialog"
    v-model:file="currentFromDataEmployee.image"
    v-model:image-url="employeeFormState.profileUrl"
    v-model:data-list="imageList"
    v-model:on-create-data-list="onCreateImageList"
    :on-create="employeeFormState.dialogModal"
    :hidden-footer="!employeeFormState.isImageEdit"
    @add-image="
      async (v) => {
        if (!v) return;
        if (!currentFromDataEmployee.id) return;
        await employeeStore.addImageList(
          v,
          currentFromDataEmployee.id,
          Date.now().toString(),
        );
        await fetchImageList(
          currentFromDataEmployee.id,
          currentFromDataEmployee.selectedImage || '',
          'employee',
        );
      }
    "
    @remove-image="
      async (v) => {
        if (!v) return;
        if (!currentFromDataEmployee.id) return;
        const name = v.split('/').pop() || '';
        await employeeStore.deleteImageByName(currentFromDataEmployee.id, name);
        await fetchImageList(
          currentFromDataEmployee.id,
          currentFromDataEmployee.selectedImage || '',
          'employee',
        );
      }
    "
    @submit="
      async (v) => {
        if (employeeFormState.dialogModal) {
          employeeFormState.profileUrl = v;
          employeeFormState.imageDialog = false;
        } else {
          refreshImageState = true;
          employeeFormState.dialogType = 'edit';
          currentFromDataEmployee.selectedImage = v;
          imageList ? (imageList.selectedImage = v) : '';
          employeeFormState.profileUrl = `${baseUrl}/employee/${currentFromDataEmployee.id && currentFromDataEmployee.id}/image/${v}`;
          employeeFormStore.resetFormDataEmployee();
          await employeeFormStore.submitPersonal(onCreateImageList);
          employeeFormState.imageDialog = false;
          refreshImageState = false;
          employeeFormState.isEmployeeEdit = false;
          employeeFormState.dialogType = 'info';
          await fetchListEmployee();
        }
      }
    "
  >
    <template #title>
      <span
        v-if="!employeeFormState.dialogModal"
        class="justify-center flex text-bold"
      >
        {{ $t('general.image') }}
        {{
          $i18n.locale === 'eng'
            ? `${currentFromDataEmployee.firstNameEN} ${currentFromDataEmployee.lastNameEN}`
            : `${currentFromDataEmployee.firstName} ${currentFromDataEmployee.lastName}`
        }}
      </span>
    </template>
    <template #error>
      <div class="full-height full-width" style="background: white">
        <div
          class="full-height full-width flex justify-center items-center"
          style="background: #ee4367"
        >
          <q-img
            :src="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
            fit="contain"
            style="height: 100%"
          />
        </div>
      </div>
    </template>
  </ImageUploadDialog>

  <!-- ลูกจ้าง edit employee -->
  <DrawerInfo
    v-if="!!employeeFormState.currentEmployee"
    hide-action
    v-model:drawer-open="employeeFormState.drawerModal"
    :close="
      () => {
        resetScrollBar('drawer-employee-form-content');
      }
    "
    :title="
      setPrefixName(
        {
          namePrefix: employeeFormState.currentEmployee.namePrefix,
          firstName:
            employeeFormState.currentEmployee.firstName ||
            employeeFormState.currentEmployee.firstNameEN,
          lastName: employeeFormState.currentEmployee.lastName,
          firstNameEN: employeeFormState.currentEmployee.firstNameEN,
          lastNameEN: employeeFormState.currentEmployee.lastNameEN,
        },
        { locale },
      )
    "
    :badge-class="
      currentFromDataEmployee.gender === 'male'
        ? 'app-bg-male text-white'
        : currentFromDataEmployee.gender === 'female'
          ? 'app-bg-female text-white'
          : ''
    "
    :submit="
      async () => {
        if (employeeFormState.currentTab === 'personalInfo') {
          await employeeFormStore.submitPersonal();
          employeeFormState.dialogType = 'info';
          employeeFormState.isEmployeeEdit = false;
        }

        if (employeeFormState.currentTab === 'passport') {
          await employeeFormStore.submitPassport();
        }

        if (employeeFormState.currentTab === 'visa') {
          await employeeFormStore.submitVisa();
        }

        if (employeeFormState.currentTab === 'healthCheck') {
          await employeeFormStore.submitHealthCheck();
        }

        if (employeeFormState.currentTab === 'workHistory') {
          await employeeFormStore.submitWorkHistory();
        }

        if (employeeFormState.currentTab === 'other') {
          await employeeFormStore.submitOther();
        }

        if (route.name !== 'CustomerBranchManagement') {
          await fetchListEmployee(
            currentTab === 'employer'
              ? {
                  page: 1,
                  pageSize: 999,
                  customerId: customerFormState.currentCustomerId,
                }
              : { mobileFetch: $q.screen.xs },
          );
        }

        employeeFormState.isEmployeeEdit = false;
      }
    "
    :before-close="
      () => {
        if (employeeFormStore.isFormDataDifferent()) {
          employeeConfirmUnsave();
          return true;
        }

        employeeFormState.currentTab = 'personalInfo';
        return false;
      }
    "
  >
    <div class="column full-height">
      <div
        :class="{
          'q-mx-lg q-my-md': $q.screen.gt.sm,
          'q-mx-md q-my-sm': !$q.screen.gt.sm,
        }"
      >
        <ProfileBanner
          :prefix="employeeFormState.currentEmployee.firstName"
          hideFade
          @update:current-tab="
            () => {
              employeeFormState.isImageEdit = false;
              employeeFormStore.resetFormDataEmployee();
              employeeFormState.isEmployeeEdit = false;
              employeeFormState.dialogType = 'info';
              employeeFormState.currentIndexPassport = -1;
            }
          "
          @view="
            () => {
              employeeFormState.imageDialog = true;
              employeeFormState.isImageEdit = false;
            }
          "
          @edit="
            employeeFormState.imageDialog = employeeFormState.isImageEdit = true
          "
          @update:toggle-status="
            (v) => {
              if (currentFromDataEmployee.id !== undefined)
                triggerChangeStatus(
                  currentFromDataEmployee.id,
                  v,
                  currentFromDataEmployee.firstNameEN,
                );
            }
          "
          :active="currentFromDataEmployee.status !== 'INACTIVE'"
          use-toggle
          color="white"
          icon="mdi-account-outline"
          :bg-color="
            employeeFormState.profileUrl
              ? 'white'
              : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
          "
          v-model:current-tab="employeeFormState.currentTab"
          v-model:toggle-status="currentFromDataEmployee.status"
          fallback-cover="/images/employee-banner.png"
          :title="
            employeeFormState.currentEmployee
              ? setPrefixName(
                  {
                    namePrefix: employeeFormState.currentEmployee.namePrefix,
                    firstName:
                      employeeFormState.currentEmployee.firstName ||
                      employeeFormState.currentEmployee.firstNameEN,
                    lastName: employeeFormState.currentEmployee.lastName,
                    firstNameEN: employeeFormState.currentEmployee.firstNameEN,
                    lastNameEN: employeeFormState.currentEmployee.lastNameEN,
                  },
                  { locale },
                )
              : '-'
          "
          :caption="currentFromDataEmployee.code"
          :img="
            `${baseUrl}/employee/${currentFromDataEmployee.id}/image/${currentFromDataEmployee.selectedImage}`.concat(
              refreshImageState ? `?ts=${Date.now()}` : '',
            ) || null
          "
          :fallbackImg="`/images/employee-avatar-${currentFromDataEmployee.gender === 'male' ? 'male' : 'female'}.png`"
          :tabs-list="[
            {
              name: 'personalInfo',
              label: $t('customerEmployee.form.group.personalInfo'),
            },
            {
              name: 'passport',
              label: $t('customerEmployee.fileType.passport'),
            },
            {
              name: 'visa',
              label: $t('customerEmployee.form.group.visa'),
            },
            {
              name: 'healthCheck',
              label: $t('customerEmployee.form.group.healthCheck'),
            },
            {
              name: 'workHistory',
              label: $t('customerEmployee.form.group.workHistory'),
            },
            { name: 'other', label: $t('customerEmployee.form.group.other') },
          ]"
          :toggle-title="$t('status.title')"
        />
      </div>
      <div
        style="flex: 1; width: 100%; overflow-y: auto"
        class="column relative-position"
        id="drawer-employee-form"
        :class="{
          'q-px-lg q-pb-lg': $q.screen.gt.sm,
          'q-px-md q-pb-sm': !$q.screen.gt.sm,
        }"
      >
        <div
          class="col full-width surface-1 rounded bordered row"
          :key="String(!employeeFormState.isEmployeeEdit)"
        >
          <div class="col full-height scroll" v-if="$q.screen.gt.sm">
            <div class="q-py-md q-pl-md q-pr-sm">
              <SideMenu
                :menu="
                  [
                    {
                      name: $t('form.field.basicInformation'),
                      anchor: 'drawer-form-information',
                      tab: 'personalInfo',
                    },
                    {
                      name: $t('customerEmployee.form.group.personalInfo'),
                      anchor: 'drawer-form-personal',
                      tab: 'personalInfo',
                    },
                    {
                      name: $t('form.address'),
                      anchor: 'drawer-form-personal-address',
                      tab: 'personalInfo',
                    },

                    {
                      name: $t('general.uploadFile'),
                      anchor: 'drawer-upload-file',
                      tab: 'personalInfo',
                    },

                    {
                      name: $t('customerEmployee.form.group.passport'),
                      anchor: 'drawer-passport',
                      tab: 'passport',
                      useBtn:
                        currentFromDataEmployee.employeePassport?.filter(
                          (item) => {
                            if (item.id === undefined) {
                              return true;
                            }
                            return false;
                          },
                        ).length === 0 &&
                        employeeFormState.currentIndexPassport === -1
                          ? true
                          : false,
                    },
                    ...(currentFromDataEmployee.employeePassport?.map(
                      (v, i) => ({
                        name: dateFormat(v.expireDate),
                        anchor: `drawer-employee-employeePassport-${i}`,
                        tab: 'passport',
                        sub: true,
                      }),
                    ) || []),

                    {
                      name: $t('customerEmployee.form.group.visa'),
                      anchor: 'drawer-visa',
                      tab: 'visa',
                      useBtn:
                        currentFromDataEmployee.employeeVisa?.filter((item) => {
                          if (item.id === undefined) {
                            return true;
                          }
                          return false;
                        }).length === 0 &&
                        employeeFormState.currentIndexVisa === -1
                          ? true
                          : false,
                    },

                    ...(currentFromDataEmployee.employeeVisa?.map((v, i) => ({
                      name: dateFormat(v.expireDate),
                      anchor: `drawer-employee-visa-${i}`,
                      tab: 'visa',
                      sub: true,
                    })) || []),

                    {
                      name: $t('customerEmployee.form.group.healthCheck'),
                      anchor: 'drawer-employee-checkup',
                      tab: 'healthCheck',
                      useBtn:
                        currentFromDataEmployee.employeeCheckup?.filter(
                          (item) => {
                            if (item.id === undefined) {
                              return true;
                            }
                            return false;
                          },
                        ).length === 0 &&
                        employeeFormState.currentIndexCheckup === -1
                          ? true
                          : false,
                    },

                    ...(currentFromDataEmployee.employeeCheckup?.map(
                      (_v, i) => ({
                        name: $t('general.times', { number: i + 1 }),
                        anchor: `drawer-employee-checkup-${i}`,
                        tab: 'healthCheck',
                      }),
                    ) || []),

                    {
                      name: $t('customerEmployee.form.group.workHistory'),
                      anchor: 'drawer-employee-work-history',
                      tab: 'workHistory',
                      useBtn:
                        currentFromDataEmployee.employeeWork?.filter((item) => {
                          if (item.id === undefined) {
                            return true;
                          }
                          return false;
                        }).length === 0 &&
                        employeeFormState.currentIndexWorkHistory === -1
                          ? true
                          : false,
                    },

                    ...(currentFromDataEmployee.employeeWork?.map((_v, i) => ({
                      name: $t('general.times', { number: i + 1 }),
                      anchor: `drawer-employee-work-history-${i}`,
                      tab: 'workHistory',
                    })) || []),

                    {
                      name: $t('customerEmployee.form.group.family'),
                      anchor: 'drawer-other',
                      tab: 'other',
                    },
                  ].filter((v) => v.tab === employeeFormState.currentTab)
                "
                background="transparent"
                :active="{
                  background: 'hsla(var(--blue-6-hsl) / .2)',
                  foreground: 'var(--blue-6)',
                }"
                scroll-element="#drawer-employee-form-content"
              >
                <template v-slot:btn-drawer-passport>
                  <q-btn
                    id="form-add-passport"
                    dense
                    flat
                    icon="mdi-plus"
                    size="sm"
                    rounded
                    padding="0px 0px"
                    style="color: var(--stone-9)"
                    @click.stop="employeeFormStore.addPassport()"
                  />
                </template>

                <template v-slot:btn-drawer-visa>
                  <q-btn
                    id="form-add-visa"
                    dense
                    flat
                    icon="mdi-plus"
                    size="sm"
                    rounded
                    style="color: var(--stone-9)"
                    @click.stop="employeeFormStore.addVisa()"
                  />
                </template>

                <template v-slot:btn-drawer-employee-checkup>
                  <q-btn
                    id="form-add-checkup"
                    dense
                    flat
                    icon="mdi-plus"
                    size="sm"
                    rounded
                    style="color: var(--stone-9)"
                    @click.stop="employeeFormStore.addCheckup()"
                  />
                </template>

                <template v-slot:btn-drawer-employee-work-history>
                  <q-btn
                    id="form-add-work-history"
                    dense
                    flat
                    icon="mdi-plus"
                    size="sm"
                    rounded
                    style="color: var(--stone-9)"
                    @click.stop="employeeFormStore.addWorkHistory()"
                  />
                </template>
              </SideMenu>
            </div>
          </div>
          <div
            class="col-12 col-md-10 row"
            :class="{
              'q-py-md q-pr-md ': $q.screen.gt.sm,
              'q-pa-sm': !$q.screen.gt.sm,
            }"
            id="drawer-employee-form-content"
            style="height: 100%; overflow-y: auto"
          >
            <template v-if="employeeFormState.currentTab === 'personalInfo'">
              <div
                class="rounded row q-py-sm q-mx-lg q-px-md"
                style="position: absolute; z-index: 999; right: 0; top: 0"
                v-if="currentFromDataEmployee.status !== 'INACTIVE'"
              >
                <div class="surface-1 row rounded">
                  <UndoButton
                    v-if="employeeFormState.isEmployeeEdit"
                    id="btn-info-basic-undo"
                    icon-only
                    @click="
                      () => {
                        employeeFormStore.resetFormDataEmployee();
                        employeeFormState.isEmployeeEdit = false;
                        employeeFormState.dialogType = 'info';
                      }
                    "
                    type="button"
                  />
                  <SaveButton
                    v-if="employeeFormState.isEmployeeEdit"
                    id="btn-info-basic-save"
                    icon-only
                    type="submit"
                  />
                  <EditButton
                    v-if="!employeeFormState.isEmployeeEdit"
                    id="btn-info-basic-edit"
                    icon-only
                    @click="
                      () => {
                        employeeFormState.isEmployeeEdit = true;
                        employeeFormState.dialogType = 'edit';
                      }
                    "
                    type="button"
                  />
                  <DeleteButton
                    v-if="
                      !employeeFormState.isEmployeeEdit &&
                      canAccess('customer', 'edit')
                    "
                    id="btn-info-basic-delete"
                    icon-only
                    @click="
                      () =>
                        deleteEmployeeById({
                          id: currentFromDataEmployee.id,
                          fetch: async () =>
                            await fetchListEmployee(
                              currentTab === 'employer'
                                ? {
                                    page: 1,
                                    pageSize: 999,
                                    customerId:
                                      customerFormState.currentCustomerId,
                                  }
                                : {
                                    fetchStats: true,
                                    mobileFetch: $q.screen.xs,
                                  },
                            ),
                        })
                    "
                    type="button"
                  />
                </div>
              </div>
              <BasicInformation
                no-action
                id="drawer-form-information"
                prefix-id="drawer-info-employee"
                dense
                outlined
                title="form.field.basicInformation"
                :readonly="!employeeFormState.isEmployeeEdit"
                v-model:customer-branch-id="employeeFormState.currentBranchId"
                v-model:current-customer-branch="
                  employeeFormState.currentCustomerBranch
                "
                v-model:employee-id="employeeFormState.currentEmployeeCode"
                v-model:nrc-no="currentFromDataEmployee.nrcNo"
                v-model:code="currentFromDataEmployee.code"
                class="q-mb-xl"
              />
              <FormPerson
                id="drawer-form-personal"
                prefix-id="drawer-info-employee"
                dense
                outlined
                employee
                separator
                title="customerEmployee.form.group.personalInfo"
                :readonly="!employeeFormState.isEmployeeEdit"
                v-model:prefix-name="currentFromDataEmployee.namePrefix"
                v-model:first-name="currentFromDataEmployee.firstName"
                v-model:last-name="currentFromDataEmployee.lastName"
                v-model:first-name-en="currentFromDataEmployee.firstNameEN"
                v-model:last-name-en="currentFromDataEmployee.lastNameEN"
                v-model:mid-name="currentFromDataEmployee.middleName"
                v-model:mid-name-en="currentFromDataEmployee.middleNameEN"
                v-model:gender="currentFromDataEmployee.gender"
                v-model:birth-date="currentFromDataEmployee.dateOfBirth"
                v-model:nationality="currentFromDataEmployee.nationality"
                class="q-mb-xl"
              />
              <AddressForm
                id="drawer-form-personal-address"
                employee
                v-model:address="currentFromDataEmployee.address"
                v-model:address-en="currentFromDataEmployee.addressEN"
                v-model:moo="currentFromDataEmployee.moo"
                v-model:moo-en="currentFromDataEmployee.mooEN"
                v-model:soi="currentFromDataEmployee.soi"
                v-model:soi-en="currentFromDataEmployee.soiEN"
                v-model:street="currentFromDataEmployee.street"
                v-model:street-en="currentFromDataEmployee.streetEN"
                v-model:province-id="currentFromDataEmployee.provinceId"
                v-model:district-id="currentFromDataEmployee.districtId"
                v-model:sub-district-id="currentFromDataEmployee.subDistrictId"
                v-model:same-with-employer="
                  employeeFormState.formDataEmployeeSameAddr
                "
                :readonly="!employeeFormState.isEmployeeEdit"
                :disabledRule="!employeeFormState.isEmployeeEdit"
                prefix-id="drawer-info-personnel"
                dense
                class="q-mb-xl"
              />

              <div class="row" id="drawer-upload-file">
                <div class="col-12 q-pb-sm text-weight-bold text-body1">
                  <q-icon
                    flat
                    size="xs"
                    class="q-pa-sm rounded q-mr-xs"
                    color="info"
                    name="mdi-upload"
                    style="background-color: var(--surface-3)"
                  />
                  {{ $t(`general.uploadFile`) }}
                </div>
              </div>
              <UploadFileGroup
                v-model:current-id="currentFromDataEmployee.id"
                v-model="currentFromDataEmployee.file"
                hide-action
                :readonly="!employeeFormState.isEmployeeEdit"
                :group-list="uploadFileListEmployee"
                :menu="uploadFileListEmployee"
                :columns="columnsAttachment"
                @submit="
                  async (group, allMeta) => {
                    if (allMeta === undefined) return;

                    if (group === 'passport') {
                      const fullName = allMeta['full_name'].split(' ');
                      let tempValue: {
                        oldData: { nameField: string; value: string }[];
                        newData: { nameField: string; value: string }[];
                      } = { oldData: [], newData: [] };

                      if (
                        currentFromDataEmployee.gender !== '' &&
                        currentFromDataEmployee.gender !== allMeta['sex']
                      ) {
                        tempValue.oldData.push({
                          nameField: $t('form.gender'),
                          value: $t(
                            `general.${currentFromDataEmployee.gender}`,
                          ),
                        });
                        tempValue.newData.push({
                          nameField: $t('form.gender'),
                          value: $t(`general.${allMeta['sex']}`),
                        });
                      }

                      if (currentFromDataEmployee.firstName !== '') {
                        tempValue.oldData.push({
                          nameField: $t('personnel.form.firstName'),
                          value: currentFromDataEmployee.firstName,
                        });
                        tempValue.newData.push({
                          nameField: $t('personnel.form.firstName'),
                          value: fullName[0],
                        });
                      }

                      if (currentFromDataEmployee.lastName !== '') {
                        tempValue.oldData.push({
                          nameField: $t('personnel.form.lastName'),
                          value: currentFromDataEmployee.lastName,
                        });
                        tempValue.newData.push({
                          nameField: $t('personnel.form.lastName'),
                          value: fullName[1],
                        });
                      }

                      if (currentFromDataEmployee.nationality !== '') {
                        tempValue.oldData.push({
                          nameField: $t('general.nationality'),
                          value: currentFromDataEmployee.nationality || '',
                        });
                        tempValue.newData.push({
                          nameField: $t('general.nationality'),
                          value: allMeta['nationality'],
                        });
                      }

                      dialogCheckData({
                        action: async () => {
                          currentFromDataEmployee.gender = allMeta['sex'];
                          currentFromDataEmployee.firstName = fullName[0];
                          currentFromDataEmployee.lastName = fullName[1];
                          currentFromDataEmployee.nationality =
                            allMeta['nationality'];
                        },
                        checkData: () => {
                          return tempValue;
                        },
                        cancel: () => {
                          if (!currentFromDataEmployee.gender) {
                            currentFromDataEmployee.gender = allMeta['gender'];
                          }
                          if (!currentFromDataEmployee.firstName) {
                            currentFromDataEmployee.firstName = fullName[0];
                          }
                          if (!currentFromDataEmployee.firstName) {
                            currentFromDataEmployee.firstName = fullName[0];
                          }
                          if (!currentFromDataEmployee.lastName) {
                            currentFromDataEmployee.lastName = fullName[1];
                          }

                          if (!currentFromDataEmployee.nationality) {
                            currentFromDataEmployee.nationality =
                              allMeta['nationality'];
                          }
                        },
                      });
                    }
                  }
                "
                :ocr="
                  async (group, file) => {
                    if (group === 'passport') {
                      mrz = await runOcr(file, parseResultMRZ);

                      if (mrz) {
                        const mapMrz = Object.entries(mrz.result || {}).map(
                          ([key, value]) => ({
                            name: key,
                            value: String(value),
                          }),
                        );

                        const tempValue = {
                          status: true,
                          group,
                          meta: mapMrz,
                        };

                        return tempValue;
                      }
                    }
                    if (group === 'visa') {
                      const res = await ocrStore.sendOcr({
                        file: file,
                        category: group,
                      });

                      if (res) {
                        const tempValue = {
                          status: true,
                          group,
                          meta: res.fields,
                        };

                        return tempValue;
                      }
                    }

                    return { status: true, group, meta: [] };
                  }
                "
                :auto-save="currentFromDataEmployee.id !== ''"
                :download="
                  (obj) => {
                    if (obj.group !== 'attachment') {
                      employeeStore.getFile({
                        parentId: currentFromDataEmployee.id || '',
                        group: obj.group,
                        fileId: obj._meta.id,
                        download: true,
                      });
                    } else {
                      employeeStore.getAttachment({
                        parentId: currentFromDataEmployee.id || '',
                        name: obj._meta.name,
                        download: true,
                      });
                    }
                  }
                "
                :delete-item="
                  async (obj) => {
                    let status: boolean = false;
                    const res = await employeeStore.delMeta({
                      parentId: currentFromDataEmployee.id || '',
                      group: obj.group,
                      metaId: obj._meta.id,
                    });

                    if (res) {
                      status = true;
                    }

                    await employeeFormStore.assignFormDataEmployee(
                      currentFromDataEmployee.id,
                    );

                    return status;
                  }
                "
                :save="
                  async (
                    group: 'passport' | 'visa' | 'attachment',
                    _meta: any,
                    file: File | undefined,
                  ) => {
                    let status: boolean = false;
                    if (group === 'passport' || group === 'visa') {
                      if (file !== undefined && currentFromDataEmployee.id) {
                        const res = await employeeStore.postMeta({
                          parentId: currentFromDataEmployee.id || '',
                          group,
                          meta: _meta,
                          file,
                        });

                        if (res) {
                          status = true;
                        }
                      } else {
                        const {
                          id,
                          employeeId,
                          createdAt,
                          updatedAt,
                          ...payload
                        } = _meta;

                        const res = await employeeStore.putMeta({
                          parentId: currentFromDataEmployee.id || '',
                          group,
                          metaId: _meta.id,
                          meta: payload,
                          file,
                        });
                        if (res) {
                          status = true;
                        }
                      }
                    } else {
                      if (file !== undefined) {
                        await employeeStore.uploadAttachment(
                          currentFromDataEmployee.id || '',
                          file,
                          file.name,
                        );
                        status = true;
                      }
                    }
                    await employeeFormStore.assignFormDataEmployee(
                      currentFromDataEmployee.id,
                    );
                    return status;
                  }
                "
                :get-file-list="
                  async (group: 'passport' | 'visa' | 'attachment') => {
                    if (
                      !!currentFromDataEmployee.id &&
                      group !== 'attachment'
                    ) {
                      const resMeta = await employeeStore.getMetaList({
                        parentId: currentFromDataEmployee.id,
                        group,
                      });

                      const tempValue = resMeta.map(async (i: any) => {
                        return {
                          _meta: { ...i },
                          name: `${group}-${dateFormat(i.expireDate)}` || '',
                          group: group,
                          url: await employeeStore.getFile({
                            parentId: currentFromDataEmployee.id || '',
                            group,
                            fileId: i.id,
                          }),
                          file: undefined,
                        };
                      });

                      return await waitAll(tempValue);
                    } else {
                      const res = await employeeStore.listAttachment({
                        parentId: currentFromDataEmployee.id || '',
                      });

                      const tempValue = (res as string[]).map(
                        async (i: any) => {
                          return {
                            _meta: { id: i, name: i },
                            name: i || '',
                            group: group,
                            url: await employeeStore.getAttachment({
                              parentId: currentFromDataEmployee.id || '',
                              name: i,
                            }),
                            file: undefined,
                          };
                        },
                      );

                      return await waitAll(tempValue);
                    }
                  }
                "
              >
                <template #form="{ mode, meta, isEdit }">
                  <!-- <FormCitizen
                    v-if="mode === 'citizen' && meta"
                    orc
                    ra
                    :readonly="!isEdit"
                    v-model:citizen-id="meta.citizenId"
                    v-model:birth-date="meta.birthDate"
                    v-model:first-name="meta.firstName"
                    v-model:first-name-en="meta.firstNameEN"
                    v-model:last-name="meta.lastName"
                    v-model:last-name-en="meta.lastNameEN"
                    v-model:address="meta.address"
                  /> -->

                  <FormEmployeePassport
                    v-if="mode === 'passport' && meta"
                    prefix-id="drawer-info-employee"
                    id="form-passport"
                    dense
                    outlined
                    separator
                    ocr
                    :title="$t('customerEmployee.form.group.passport')"
                    :readonly="!isEdit"
                    v-model:birth-country="meta.birthCountry"
                    v-model:previous-passportRef="meta.previousPassportRef"
                    v-model:issue-place="meta.issuePlace"
                    v-model:issue-country="meta.issueCountry"
                    v-model:issue-date="meta.issueDate"
                    v-model:type="meta.type"
                    v-model:expire-date="meta.expireDate"
                    v-model:birth-date="meta.birthDate"
                    v-model:worker-status="meta.workerStatus"
                    v-model:nationality="meta.nationality"
                    v-model:gender="meta.gender"
                    v-model:last-name-en="meta.lastNameEN"
                    v-model:last-name="meta.lastName"
                    v-model:middle-name-en="meta.middleNameEN"
                    v-model:middle-name="meta.middleName"
                    v-model:first-name-en="meta.firstNameEN"
                    v-model:first-name="meta.firstName"
                    v-model:name-prefix="meta.namePrefix"
                    v-model:passport-number="meta.number"
                  ></FormEmployeePassport>
                  <FormEmployeeVisa
                    v-if="mode === 'visa' && meta"
                    prefix-id="drawer-info-employee"
                    id="form-visa"
                    ocr
                    dense
                    outlined
                    :title="$t('customerEmployee.form.group.visa')"
                    :readonly="!isEdit"
                    v-model:arrival-at="meta.arrivalAt"
                    v-model:arrival-tm-no="meta.arrivalTMNo"
                    v-model:arrival-tm="meta.arrivalTM"
                    v-model:mrz="meta.mrz"
                    v-model:entry-count="meta.entryCount"
                    v-model:issue-place="meta.issuePlace"
                    v-model:issue-country="meta.issueCountry"
                    v-model:issueDate="meta.issueDate"
                    v-model:type="meta.type"
                    v-model:expire-date="meta.expireDate"
                    v-model:visa-issue-date="meta.issueDate"
                    v-model:visa-expiry-date="meta.expireDate"
                    v-model:remark="meta.remark"
                    v-model:worker-type="meta.workerType"
                    v-model:number="meta.number"
                    v-model:report-date="meta.reportDate"
                  />

                  <NoticeJobEmployment v-if="mode === 'noticeJobEmployment'" />
                </template>
              </UploadFileGroup>
            </template>

            <template v-if="employeeFormState.currentTab === 'passport'">
              <div class="q-gutter-sm full-width column no-wrap">
                <div
                  class="q-pb-sm text-weight-bold text-body1 row items-center"
                >
                  <q-icon
                    flat
                    size="xs"
                    class="q-pa-sm rounded q-mr-xs"
                    color="info"
                    name="mdi-passport"
                    style="background-color: var(--surface-3)"
                  />
                  {{ $t('customerEmployee.form.group.passport') }}
                  <AddButton
                    v-if="$q.screen.lt.md"
                    id="btn-add-work"
                    icon-only
                    class="q-ml-sm"
                    :disabled="employeeFormState.currentIndexPassport !== -1"
                    @click.stop="employeeFormStore.addPassport()"
                  />
                  <!-- :disabled="
                      currentFromDataEmployee.employeePassport?.filter(
                        (item) => {
                          if (item.id === undefined) {
                            return false;
                          }
                          return true;
                        },
                      ).length === 0 &&
                      employeeFormState.currentIndexPassport === -1
                        ? false
                        : true
                    " -->
                </div>

                <div class="col self-center">
                  <div
                    class="full-width full-height flex flex-center col"
                    v-if="
                      currentFromDataEmployee.employeePassport?.length === 0
                    "
                  >
                    <NoData />
                  </div>

                  <template
                    v-for="(
                      value, index
                    ) in currentFromDataEmployee.employeePassport"
                    :key="index"
                  >
                    <div class="col" v-if="value !== undefined">
                      <FormEmployeePassport
                        prefix-id="drawer-info-employee"
                        id="form-passport"
                        hide-title
                        dense
                        outlined
                        separator
                        :title="$t('customerEmployee.form.group.passport')"
                        :readonly="
                          employeeFormState.currentIndexPassport !== index
                        "
                        :full-name="
                          employeeFormState.currentIndexPassport !== index
                        "
                        v-model:birth-country="value.birthCountry"
                        v-model:previous-passportRef="value.previousPassportRef"
                        v-model:issue-place="value.issuePlace"
                        v-model:issue-country="value.issueCountry"
                        v-model:issue-date="value.issueDate"
                        v-model:type="value.type"
                        v-model:expire-date="value.expireDate"
                        v-model:birth-date="value.birthDate"
                        v-model:worker-status="value.workerStatus"
                        v-model:nationality="value.nationality"
                        v-model:gender="value.gender"
                        v-model:last-name-en="value.lastNameEN"
                        v-model:last-name="value.lastName"
                        v-model:middle-name-en="value.middleNameEN"
                        v-model:middle-name="value.middleName"
                        v-model:first-name-en="value.firstNameEN"
                        v-model:first-name="value.firstName"
                        v-model:name-prefix="value.namePrefix"
                        v-model:passport-number="value.number"
                        v-model:file="value.file"
                      >
                        <template v-slot:expiryDate>
                          {{ $t('general.expirationDate') }} :
                          {{ dateFormat(value.expireDate) }}
                          <ExpirationDate
                            v-if="value.id !== undefined"
                            :expiration-date="value.expireDate"
                          />
                        </template>

                        <template v-slot:button>
                          <div
                            class="surface-1 row rounded"
                            style="min-height: 35px"
                          >
                            <UndoButton
                              v-if="
                                employeeFormState.isEmployeeEdit &&
                                !(
                                  employeeFormState.currentIndexPassport === -1
                                ) &&
                                employeeFormState.currentIndexPassport === index
                              "
                              id="btn-info-basic-undo"
                              icon-only
                              @click="
                                () => {
                                  employeeFormStore.resetFormDataEmployee();
                                  employeeFormState.isEmployeeEdit = false;
                                  employeeFormState.dialogType = 'info';
                                  employeeFormState.currentIndexPassport = -1;
                                }
                              "
                              type="button"
                            />
                            <SaveButton
                              v-if="
                                (employeeFormState.isEmployeeEdit ||
                                  value.id === undefined) &&
                                !(
                                  employeeFormState.currentIndexPassport === -1
                                ) &&
                                employeeFormState.currentIndexPassport === index
                              "
                              id="btn-info-basic-save"
                              icon-only
                              @click="
                                () => {
                                  employeeFormState.currentIndexPassport =
                                    index;
                                }
                              "
                              type="submit"
                            />
                            <EditButton
                              v-if="
                                employeeFormState.currentIndexPassport === -1 ||
                                (!employeeFormState.isEmployeeEdit &&
                                  value.id !== undefined &&
                                  employeeFormState.currentIndexPassport ===
                                    index)
                              "
                              id="btn-info-basic-edit"
                              icon-only
                              @click="
                                () => {
                                  employeeFormState.currentIndexPassport =
                                    index;
                                  employeeFormState.isEmployeeEdit = true;
                                  employeeFormState.dialogType = 'edit';
                                }
                              "
                              type="button"
                            />
                            <DeleteButton
                              v-if="
                                employeeFormState.currentIndexPassport === -1 ||
                                (!employeeFormState.isEmployeeEdit &&
                                  value.id !== undefined &&
                                  !(
                                    employeeFormState.currentIndexPassport ===
                                    -1
                                  ) &&
                                  employeeFormState.currentIndexPassport ===
                                    index)
                              "
                              id="btn-info-basic-delete"
                              icon-only
                              @click.stop="
                                () => {
                                  deleteEmployeeById({
                                    type: 'passport',
                                    index,
                                    fetch: async () =>
                                      await fetchListEmployee(
                                        currentTab === 'employer'
                                          ? {
                                              page: 1,
                                              pageSize: 999,
                                              customerId:
                                                customerFormState.currentCustomerId,
                                            }
                                          : {
                                              fetchStats: true,
                                              mobileFetch: $q.screen.xs,
                                            },
                                      ),
                                  });
                                }
                              "
                              type="button"
                              :disabled="
                                !(
                                  employeeFormState.currentIndexPassport === -1
                                ) &&
                                !(
                                  employeeFormState.currentIndexPassport ===
                                  index
                                )
                              "
                            />
                          </div>
                        </template>
                      </FormEmployeePassport>
                    </div>
                  </template>
                </div>
              </div>
            </template>

            <template v-if="employeeFormState.currentTab === 'visa'">
              <div class="q-gutter-sm full-width column no-wrap">
                <div
                  class="q-pb-sm text-weight-bold text-body1 row items-center"
                >
                  <q-icon
                    flat
                    size="xs"
                    class="q-pa-sm rounded q-mr-xs"
                    color="info"
                    name="mdi-passport"
                    style="background-color: var(--surface-3)"
                  />
                  {{ $t('customerEmployee.form.group.visa') }}
                  <AddButton
                    v-if="$q.screen.lt.md"
                    id="btn-add-work"
                    icon-only
                    class="q-ml-sm"
                    :disabled="
                      currentFromDataEmployee.employeeVisa?.filter((item) => {
                        if (item.id === undefined) {
                          return false;
                        }
                        return true;
                      }).length === 0 &&
                      employeeFormState.currentIndexVisa === -1
                        ? false
                        : true
                    "
                    @click.stop="employeeFormStore.addVisa()"
                  />
                </div>
                <div class="col self-center">
                  <div
                    v-if="currentFromDataEmployee.employeeVisa?.length === 0"
                    class="full-width full-height col flex flex-center"
                  >
                    <NoData />
                  </div>
                  <FormEmployeeVisa
                    v-for="(
                      value, index
                    ) in currentFromDataEmployee.employeeVisa"
                    :key="index"
                    prefix-id="drawer-info-employee"
                    id="form-visa"
                    dense
                    outlined
                    :title="$t('customerEmployee.form.group.visa')"
                    :readonly="employeeFormState.currentIndexVisa !== index"
                    hide-title
                    v-model:arrival-at="value.arrivalAt"
                    v-model:arrival-tm-no="value.arrivalTMNo"
                    v-model:arrival-tm="value.arrivalTM"
                    v-model:mrz="value.mrz"
                    v-model:entry-count="value.entryCount"
                    v-model:issue-place="value.issuePlace"
                    v-model:issue-country="value.issueCountry"
                    v-model:issueDate="value.issueDate"
                    v-model:type="value.type"
                    v-model:expire-date="value.expireDate"
                    v-model:visa-issue-date="value.issueDate"
                    v-model:visa-expiry-date="value.expireDate"
                    v-model:remark="value.remark"
                    v-model:worker-type="value.workerType"
                    v-model:number="value.number"
                    v-model:report-date="value.reportDate"
                  >
                    <template v-slot:expiryDate>
                      {{ $t('general.expirationDate') }} :
                      {{ dateFormat(value.expireDate) }}
                      <ExpirationDate
                        v-if="value.id !== undefined"
                        :expiration-date="value.expireDate"
                      />
                    </template>

                    <template v-slot:button>
                      <div
                        class="surface-1 row rounded"
                        style="min-height: 35px"
                      >
                        <UndoButton
                          v-if="
                            employeeFormState.isEmployeeEdit &&
                            !(employeeFormState.currentIndexVisa === -1) &&
                            employeeFormState.currentIndexVisa === index
                          "
                          id="btn-info-basic-undo"
                          icon-only
                          @click="
                            () => {
                              employeeFormStore.resetFormDataEmployee();
                              employeeFormState.isEmployeeEdit = false;
                              employeeFormState.dialogType = 'info';
                              employeeFormState.currentIndexVisa = -1;
                            }
                          "
                          type="button"
                        />
                        <SaveButton
                          v-if="
                            (employeeFormState.isEmployeeEdit ||
                              value.id === undefined) &&
                            !(employeeFormState.currentIndexVisa === -1) &&
                            employeeFormState.currentIndexVisa === index
                          "
                          id="btn-info-basic-save"
                          icon-only
                          @click="
                            () => {
                              employeeFormState.currentIndexVisa = index;
                            }
                          "
                          type="submit"
                        />

                        <EditButton
                          v-if="
                            employeeFormState.currentIndexVisa === -1 ||
                            (!employeeFormState.isEmployeeEdit &&
                              value.id !== undefined &&
                              employeeFormState.currentIndexVisa === index)
                          "
                          id="btn-info-basic-edit"
                          icon-only
                          @click="
                            () => {
                              employeeFormState.currentIndexVisa = index;
                              employeeFormState.isEmployeeEdit = true;
                              employeeFormState.dialogType = 'edit';
                            }
                          "
                          type="button"
                        />
                        <DeleteButton
                          v-if="
                            employeeFormState.currentIndexVisa === -1 ||
                            (!employeeFormState.isEmployeeEdit &&
                              value.id !== undefined &&
                              !(employeeFormState.currentIndexVisa === -1) &&
                              employeeFormState.currentIndexVisa === index)
                          "
                          id="btn-info-basic-delete"
                          icon-only
                          @click.stop="
                            () => {
                              deleteEmployeeById({
                                type: 'visa',
                                index,
                                fetch: async () =>
                                  await fetchListEmployee(
                                    currentTab === 'employer'
                                      ? {
                                          page: 1,
                                          pageSize: 999,
                                          customerId:
                                            customerFormState.currentCustomerId,
                                        }
                                      : {
                                          fetchStats: true,
                                          mobileFetch: $q.screen.xs,
                                        },
                                  ),
                              });
                            }
                          "
                          type="button"
                          :disabled="
                            !(employeeFormState.currentIndexVisa === -1) &&
                            !(employeeFormState.currentIndexVisa === index)
                          "
                        />
                      </div>
                    </template>
                  </FormEmployeeVisa>
                </div>
              </div>
            </template>

            <template v-if="employeeFormState.currentTab === 'healthCheck'">
              <div class="q-gutter-sm full-width column">
                <div
                  class="q-pb-sm text-weight-bold text-body1 row items-center row items-center"
                >
                  <q-icon
                    flat
                    size="xs"
                    class="q-pa-sm rounded q-mr-sm"
                    color="info"
                    name="mdi-hospital-box-outline"
                    style="background-color: var(--surface-3)"
                  />

                  {{ $t(`customerEmployee.formHealthCheck.title`) }}
                  <AddButton
                    v-if="$q.screen.lt.md"
                    id="btn-add-work"
                    icon-only
                    class="q-ml-sm"
                    :disabled="
                      currentFromDataEmployee.employeeCheckup?.filter(
                        (item) => {
                          if (item.id === undefined) {
                            return false;
                          }
                          return true;
                        },
                      ).length === 0 &&
                      employeeFormState.currentIndexCheckup === -1
                        ? false
                        : true
                    "
                    @click.stop="employeeFormStore.addCheckup()"
                  />
                </div>

                <div class="col self-center">
                  <div
                    v-if="currentFromDataEmployee.employeeCheckup?.length === 0"
                    class="full-width full-height col flex flex-center"
                  >
                    <NoData />
                  </div>
                  <FormEmployeeHealthCheck
                    v-if="employeeFormState.currentTab === 'healthCheck'"
                    id="drawer-form-checkup"
                    prefix-id="drawer-employee"
                    dense
                    outlined
                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
                    v-model:current-index="
                      employeeFormState.currentIndexCheckup
                    "
                    v-model:employee-checkup="
                      currentFromDataEmployee.employeeCheckup
                    "
                    v-model:checkup-results-option="
                      optionStore.globalOption.checkupResults
                    "
                    v-model:checkup-type-option="
                      optionStore.globalOption.insurancePlace
                    "
                    v-model:medical-benefit-option="
                      optionStore.globalOption.typeInsurance
                    "
                    v-model:insurance-company-option="
                      optionStore.globalOption.insurancePlace
                    "
                    @save="
                      (index) => {
                        employeeFormState.currentIndexCheckup = index;
                        notify('create', $t('general.success'));
                      }
                    "
                    @edit="
                      (index) => {
                        if (
                          currentFromDataEmployee.employeeCheckup?.[index]
                            .statusSave
                        ) {
                          employeeFormState.currentIndexCheckup = index;
                          currentFromDataEmployee.employeeCheckup[
                            index
                          ].statusSave = false;
                        }
                      }
                    "
                    @undo="
                      (index) => {
                        if (
                          currentFromDataEmployee.employeeCheckup?.[index]
                            .statusSave === false
                        ) {
                          employeeFormState.currentIndexCheckup = -1;
                          currentFromDataEmployee.employeeCheckup[
                            index
                          ].statusSave = true;
                          employeeFormStore.resetFormDataEmployee();
                        }
                      }
                    "
                    @delete="
                      (index) => {
                        employeeFormState.currentIndexCheckup = index;
                        deleteEmployeeById({
                          type: 'healthCheck',
                          index,
                          fetch: async () =>
                            await fetchListEmployee(
                              currentTab === 'employer'
                                ? {
                                    page: 1,
                                    pageSize: 999,
                                    customerId:
                                      customerFormState.currentCustomerId,
                                  }
                                : {
                                    fetchStats: true,
                                    mobileFetch: $q.screen.xs,
                                  },
                            ),
                        });
                      }
                    "
                  />
                </div>
              </div>
            </template>
            <template v-if="employeeFormState.currentTab === 'workHistory'">
              <div class="q-gutter-sm full-width column">
                <div
                  class="q-pb-sm text-weight-bold text-body1 row items-center"
                >
                  <q-icon
                    flat
                    size="xs"
                    class="q-pa-sm rounded q-mr-xs"
                    color="info"
                    name="mdi-briefcase-outline"
                    style="background-color: var(--surface-3)"
                  />
                  {{ $t(`customerEmployee.form.group.workHistory`) }}
                  <AddButton
                    v-if="$q.screen.lt.md"
                    id="btn-add-work"
                    icon-only
                    class="q-ml-sm"
                    :disabled="
                      currentFromDataEmployee.employeeWork?.filter((item) => {
                        if (item.id === undefined) {
                          return false;
                        }
                        return true;
                      }).length === 0 &&
                      employeeFormState.currentIndexWorkHistory === -1
                        ? false
                        : true
                    "
                    @click.stop="employeeFormStore.addWorkHistory()"
                  />
                </div>

                <div class="col self-center">
                  <div
                    class="full-width full-height col flex flex-center"
                    v-if="currentFromDataEmployee.employeeWork?.length === 0"
                  >
                    <NoData />
                  </div>

                  <FormEmployeeWorkHistory
                    v-if="employeeFormState.currentTab === 'workHistory'"
                    id="drawer-work-history"
                    prefix-id="drawer-employee"
                    dense
                    :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
                    outlined
                    v-model:current-index="
                      employeeFormState.currentIndexWorkHistory
                    "
                    v-model:employee-work="currentFromDataEmployee.employeeWork"
                    v-model:position-name-option="
                      optionStore.globalOption.position
                    "
                    v-model:job-type-option="
                      optionStore.globalOption.businessType
                    "
                    v-model:workplace-option="optionStore.globalOption.area"
                    @delete="
                      (index) => {
                        employeeFormState.currentIndexWorkHistory = index;
                        deleteEmployeeById({
                          type: 'work',
                          index,
                          fetch: async () =>
                            await fetchListEmployee(
                              currentTab === 'employer'
                                ? {
                                    page: 1,
                                    pageSize: 999,
                                    customerId:
                                      customerFormState.currentCustomerId,
                                  }
                                : {
                                    fetchStats: true,
                                    mobileFetch: $q.screen.xs,
                                  },
                            ),
                        });
                      }
                    "
                    @save="
                      (index) => {
                        employeeFormState.currentIndexWorkHistory = index;
                      }
                    "
                    @undo="
                      (index) => {
                        if (
                          currentFromDataEmployee.employeeWork?.[index]
                            .statusSave === false
                        ) {
                          employeeFormState.currentIndexWorkHistory = -1;
                          currentFromDataEmployee.employeeWork[
                            index
                          ].statusSave = true;
                        }
                      }
                    "
                    @edit="
                      (index) => {
                        if (
                          currentFromDataEmployee.employeeWork?.[index]
                            .statusSave
                        ) {
                          employeeFormState.currentIndexWorkHistory = index;
                          currentFromDataEmployee.employeeWork[
                            index
                          ].statusSave = false;
                        }
                      }
                    "
                  />
                </div>
              </div>
            </template>
            <template v-if="employeeFormState.currentTab === 'other'">
              <FormEmployeeOther
                :hide-action="currentFromDataEmployee.status === 'INACTIVE'"
                v-if="employeeFormState.currentTab === 'other'"
                id="drawer-other"
                prefix-id="drawer-employee"
                dense
                outlined
                v-model:employee-other="
                  currentFromDataEmployee.employeeOtherInfo
                "
                @undo="
                  () => {
                    if (
                      currentFromDataEmployee.employeeOtherInfo?.statusSave ===
                      false
                    ) {
                      currentFromDataEmployee.employeeOtherInfo.statusSave = true;
                    }
                  }
                "
                @edit="
                  () => {
                    if (currentFromDataEmployee.employeeOtherInfo?.statusSave) {
                      currentFromDataEmployee.employeeOtherInfo.statusSave = false;
                    }
                  }
                "
              />
            </template>
          </div>
        </div>
      </div>
    </div>
  </DrawerInfo>

  <DialogForm
    :title="$t('general.historyEdit')"
    hide-footer
    v-model:modal="employeeHistoryDialog"
  >
    <div class="q-pa-md">
      <HistoryEditComponent
        v-if="employeeHistory"
        v-model:history-list="employeeHistory"
      />
    </div>
  </DialogForm>
</template>

<style scoped>
.employer-active {
  background-color: hsla(var(--info-bg) / 0.1);
  color: hsl(var(--info-bg));
}
</style>