jws-frontend/src/pages/04_product-service/MainPage.vue

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import ItemCard from 'components/ItemCard.vue';
import AppBox from 'components/app/AppBox.vue';
import AddButton from 'components/AddButton.vue';
import ProductCardComponent from 'components/04_product-service/ProductCardComponent.vue';
import StatCard from 'components/StatCardComponent.vue';
import DrawerInfo from 'components/DrawerInfo.vue';
import BasicInformation from 'components/04_product-service/BasicInformation.vue';
import FormDialog from 'components/FormDialog.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
import BasicInfoProduct from 'components/04_product-service/BasicInfoProduct.vue';
import PriceDataComponent from 'components/04_product-service/PriceDataComponent.vue';
import ProfileUpload from 'components/ProfileUpload.vue';
import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
import FormServiceWork from 'components/04_product-service/FormServiceWork.vue';
import ServiceProperties from 'components/04_product-service/ServiceProperties.vue';
import WorkNameManagement from 'components/04_product-service/WorkNameManagement.vue';
import useOptionStore from 'src/stores/options';
import FormServiceProperties from 'components/04_product-service/FormServiceProperties.vue';
import InfoForm from 'components/02_personnel-management/InfoForm.vue';
import NoData from 'components/NoData.vue';
import PaginationComponent from 'src/components/PaginationComponent.vue';

import useFlowStore from 'src/stores/flow';
import useMyBranchStore from 'src/stores/my-branch';

const useMyBranch = useMyBranchStore();

const { fetchListOptionBranch } = useMyBranch;

import { Status } from 'src/stores/types';

import useUtilsStore, { dialog, dialogWarningClose } from 'src/stores/utils';

import useProductServiceStore from 'src/stores/product-service';
import {
  ProductGroup,
  ProductGroupCreate,
  ProductCreate,
  ProductList,
  ServiceCreate,
  Service,
  ServiceById,
  WorkItems,
  Attributes,
  ServiceAndProduct,
} from 'src/stores/product-service/types';

const flowStore = useFlowStore();
const utilsStore = useUtilsStore();
const productServiceStore = useProductServiceStore();
const optionStore = useOptionStore();

const {
  fetchStatsProductType,
  createProductServiceType,
  editProductServiceType,
  deleteProductServiceType,
  fetchListProductServiceType,

  fetchStatsProductGroup,
  fetchListProductService,
  createProductService,
  editProductService,
  deleteProductService,

  fetchStatsProduct,
  fetchListProduct,
  createProduct,
  editProduct,
  deleteProduct,

  fetchStatsService,
  fetchListService,
  fetchListServiceById,
  createService,
  deleteService,
  editService,

  createWork,
  editWork,
  deleteWork,

  fetchListProductAndService,
} = productServiceStore;

const { workNameItems } = storeToRefs(productServiceStore);

const stat = ref<
  {
    icon: string;
    count: number;
    label: string;
    color: 'pink' | 'purple' | 'green' | 'orange';
  }[]
>([
  { icon: 'mdi-folder', count: 0, label: 'productAndService', color: 'pink' },
  {
    icon: 'mdi-folder',
    count: 0,
    label: 'productAndServiceType',
    color: 'purple',
  },
  { icon: 'mdi-folder', count: 0, label: 'service', color: 'orange' },
  { icon: 'mdi-folder', count: 0, label: 'product', color: 'green' },
]);

const { t } = useI18n();
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);

const inputSearch = ref('');
const inputSearchProductAndService = ref('');

const currentStatusProduct = ref(false);
const drawerInfo = ref(false);
const isEdit = ref(false);

const dialogInputForm = ref(false);
const dialogProduct = ref(false);
const dialogService = ref(false);
const dialogProductEdit = ref(false);
const dialogServiceEdit = ref(false);

const statusToggle = ref(false);
const profileSubmit = ref(false);
const infoProductEdit = ref(false);
const infoServiceEdit = ref(false);

const imageProduct = ref<File | undefined>(undefined);
const profileUrl = ref<string | null>('');

const pathGroupName = ref('');
const pathTypeName = ref('');

const dialogProductServiceType = ref(false);
const dialogTotalProduct = ref(false);
const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');

const productGroup = ref<ProductGroup[]>();
const productType = ref<ProductGroup[]>();
const product = ref<(ProductList & { type: 'product' })[]>();
const productIsAdd = ref<(ProductList & { type: 'product' })[]>();
const service = ref<(Service & { type: 'service' })[]>();
const resultSearchProduct = ref<ProductList[]>();
const productAndService = ref<ServiceAndProduct[]>([]);

const productAndServiceTab = ref<'all' | 'product' | 'service'>('all');
const manageWorkNameDialog = ref(false);
const previousValue = ref();

const propertiesOption = ref();

const formDataGroup = ref<ProductGroupCreate>({
  remark: '',
  detail: '',
  name: '',
  code: '',
});

const formDataProduct = ref<ProductCreate>({
  registeredBranchId: '',
  productTypeId: '',
  remark: '',
  serviceCharge: 0,
  agentPrice: 0,
  price: 0,
  process: 0,
  detail: '',
  name: '',
  code: '',
  image: undefined,
});

const formDataProductService = ref<ServiceCreate>({
  work: [],
  attributes: {
    additional: [],
  },
  detail: '',
  name: '',
  code: '',
  productTypeId: '',
  registeredBranchId: '',
});

const serviceTab = [
  {
    name: 'serviceInformation',
    label: 'serviceInformation',
  },
  {
    name: 'workInformation',
    label: 'workInformation',
  },
];

const workItems = ref<WorkItems[]>([]);
const workNameRef = ref();
const selectProduct = ref<ProductList[]>([]);
const currentWorkIndex = ref<number>(0);

const currentServiceTab = ref('serviceInformation');
const propertiesDialog = ref<boolean>(false);

const totalProduct = ref<number>(0);
const totalService = ref<number>(0);
const totalProductAndService = ref<number>(0);

// แบ่งหน้า
const currentPageGroup = ref<number>(1);
const maxPageGroup = ref<number>(1);
const pageSizeGroup = ref<number>(30);
const currentPageType = ref<number>(1);
const maxPageType = ref<number>(1);
const pageSizeType = ref<number>(30);
const maxPageServiceAndProduct = ref<number>(1);
const pageSizeServiceAndProduct = ref<number>(10);
const currentPageServiceAndProduct = ref<number>(1);
const totalType = ref<number>(0);
const totalGroup = ref<number>(0);
const total = ref<number>(0);

// เก็บ id ที่เข้ามา
const currentId = ref<string>('');
const currentIdType = ref<string>('');
const currentIdService = ref<string>('');
const currentIdProduct = ref<string>('');

const branchOption = ref<{ id: string; name: string }[]>([]);

const currentStatus = ref<Status | 'All'>('All');

const inputFile = (() => {
  const element = document.createElement('input');
  element.type = 'file';
  element.accept = 'image/*';

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    if (typeof reader.result === 'string') profileUrl.value = reader.result;
  });

  element.addEventListener('change', () => {
    imageProduct.value = element.files?.[0];
    if (imageProduct.value) {
      reader.readAsDataURL(imageProduct.value);
    }
  });

  return element;
})();

async function searchProduct(isAdd: boolean = true) {
  const res = await fetchListProduct({
    query: inputSearchProductAndService.value,
  });

  if (res) {
    if (isAdd) {
      resultSearchProduct.value = res.result;
    }

    if (!isAdd) {
      product.value = res.result.map((v) => {
        return {
          ...v,
          type: 'product',
        };
      });
    }
  }
  flowStore.rotate();
}

async function featchStatsService() {
  const resStatsService = await fetchStatsService();

  totalService.value = resStatsService;
  flowStore.rotate();
}

async function fetchListOfOptionBranch() {
  const res = await fetchListOptionBranch({ pageSize: 999 });

  if (res) branchOption.value = res.result;
}

async function featchStatsProduct() {
  const resStatsProduct = await fetchStatsProduct({
    productTypeId: currentIdType.value,
  });

  totalProduct.value = resStatsProduct;
  flowStore.rotate();
}

async function fetchListType() {
  const res = await fetchListProductServiceType({
    page: currentPageType.value,
    pageSize: pageSizeType.value,
    query: !!inputSearch.value ? inputSearch.value : undefined,
    productGroupId: currentId.value,
    status:
      currentStatus.value === 'All'
        ? undefined
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
  });

  if (res) {
    currentPageType.value = res.page;
    totalType.value = res.total;
    maxPageType.value = Math.ceil(res.total / pageSizeType.value);
    productType.value = res.result;
  }
}

async function fetchListGroups() {
  const res = await fetchListProductService({
    page: currentPageGroup.value,
    pageSize: pageSizeGroup.value,
    query: !!inputSearch.value ? inputSearch.value : undefined,
    status:
      currentStatus.value === 'All'
        ? undefined
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : 'INACTIVE',
  });

  if (res) {
    currentPageGroup.value = res.page;
    totalGroup.value = res.total;
    maxPageGroup.value = Math.ceil(res.total / pageSizeGroup.value);
    productGroup.value = res.result;
  }
}

async function fetchListOfProductIsAdd(productTypeId: string) {
  const res = await fetchListProduct({
    status:
      currentStatus.value === 'INACTIVE'
        ? 'INACTIVE'
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : undefined,
    productTypeId,
  });

  if (res) {
    productIsAdd.value = res.result.map((v) => {
      return {
        ...v,
        type: 'product',
      };
    });
  }
}

async function fetchListOfProduct() {
  const res = await fetchListProduct({
    page: currentPageServiceAndProduct.value,
    pageSize: pageSizeServiceAndProduct.value,
    query: !!inputSearchProductAndService.value
      ? inputSearchProductAndService.value
      : undefined,
    status:
      currentStatus.value === 'INACTIVE'
        ? 'INACTIVE'
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : undefined,
    productTypeId: currentIdType.value,
  });

  if (res) {
    total.value = res.total;
    totalProduct.value = res.total;
    currentPageServiceAndProduct.value = res.page;
    maxPageServiceAndProduct.value = Math.ceil(
      res.total / pageSizeServiceAndProduct.value,
    );

    product.value = res.result.map((v) => {
      return {
        ...v,
        type: 'product',
      };
    });
  }
}

async function fetchListOfService() {
  const res = await fetchListService({
    page: currentPageServiceAndProduct.value,
    query: !!inputSearchProductAndService.value
      ? inputSearchProductAndService.value
      : undefined,
    pageSize: pageSizeServiceAndProduct.value,
    status:
      currentStatus.value === 'INACTIVE'
        ? 'INACTIVE'
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : undefined,
    productTypeId: currentIdType.value,
  });

  if (res) {
    totalService.value = res.total;
    total.value = res.total;
    currentPageServiceAndProduct.value = res.page;
    maxPageServiceAndProduct.value = Math.ceil(
      res.total / pageSizeServiceAndProduct.value,
    );
    service.value = res.result.map((v) => {
      return {
        ...v,
        type: 'service',
      };
    });
  }
}

async function submitType() {
  if (drawerInfo.value) {
    await editProductServiceType(currentIdType.value, {
      ...formDataGroup.value,
      productGroupId: currentId.value,
    });
    drawerInfo.value = false;
  } else {
    dialogInputForm.value = false;
    const res = await createProductServiceType(
      currentId.value,
      formDataGroup.value,
    );

    if (res) {
      stat.value[1].count = stat.value[1].count + 1;
    }
  }

  await fetchListType();
}

const itemCard = [
  {
    icon: 'mdi:server-network',
    text: 'บริการ',
    color: 'var(--orange-5)',
  },
  {
    icon: 'mdi:shopping',
    text: 'สินค้า',
    color: 'var(--green-9)',
  },
];

async function toggleStatusProduct(id: string, status: Status) {
  await editProduct(id, {
    status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
  });

  await fetchListOfProduct();
  flowStore.rotate();
}

async function toggleStatusService(id: string, status: Status) {
  await editService(id, {
    status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
  });

  await fetchListOfService();
  flowStore.rotate();
}
async function toggleStatusType(id: string, status: Status) {
  await editProductServiceType(id, {
    status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
  });

  await fetchListType();
  flowStore.rotate();
}

async function toggleStatusGroup(id: string, status: Status) {
  await editProductService(id, {
    status: status === 'INACTIVE' ? 'ACTIVE' : 'INACTIVE',
  });

  await fetchListGroups();
  flowStore.rotate();
}

async function fetchListOfProductAndService() {
  const res = await fetchListProductAndService({
    page: currentPageServiceAndProduct.value,
    pageSize: pageSizeServiceAndProduct.value,
    query: !!inputSearchProductAndService.value
      ? inputSearchProductAndService.value
      : undefined,
    status:
      currentStatus.value === 'INACTIVE'
        ? 'INACTIVE'
        : currentStatus.value === 'ACTIVE'
          ? 'ACTIVE'
          : undefined,
    productTypeId: currentIdType.value,
  });

  if (res) {
    if (currentStatus.value === 'All') {
      totalProductAndService.value = res.total;
    }

    total.value = res.total;
    currentPageServiceAndProduct.value = res.page;
    maxPageServiceAndProduct.value = Math.ceil(
      res.total / pageSizeServiceAndProduct.value,
    );
    productAndService.value = res.result;
  }
}

async function deleteServiceById(serviceId?: string) {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      const res = await deleteService(serviceId ?? currentIdService.value);

      if (productAndServiceTab.value === 'service') {
        await await fetchListOfService();
      }
      if (productAndServiceTab.value === 'all') {
        await fetchListOfProductAndService();
      }

      dialogServiceEdit.value = false;

      if (res) {
        totalService.value = totalService.value - 1;
      }
      flowStore.rotate();
      calculateStats();
    },
    cancel: () => {},
  });
}

async function deleteTypeOfProduct(id?: string) {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      const res = await deleteProduct(id ?? currentIdProduct.value);

      if (productAndServiceTab.value === 'product') {
        await fetchListOfProduct();
      }
      if (productAndServiceTab.value === 'all') {
        await fetchListOfProductAndService();
      }

      dialogProductEdit.value = false;

      if (res) {
        totalProduct.value = totalProduct.value - 1;
      }
      flowStore.rotate();
      calculateStats();
    },
    cancel: () => {},
  });
}

// type or group
async function deleteProductById(productId?: string) {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('ok'),
    persistent: true,
    message: t('deleteConfirmMessage'),
    action: async () => {
      if (productMode.value === 'type') {
        // Product Type
        await deleteProductServiceType(productId ?? currentIdType.value);
        await fetchListType();
      }
      if (productMode.value === 'group') {
        // Product Group
        const res = await deleteProductService(productId ?? currentId.value);
        if (res) {
        }
        await fetchListGroups();
      }
      flowStore.rotate();
      calculateStats();
      drawerInfo.value = false;
    },
    cancel: () => {},
  });
}

function undoProductGroup() {
  formDataGroup.value = {
    remark: previousValue.value.remark,
    detail: previousValue.value.detail,
    name: previousValue.value.name,
    code: previousValue.value.code,
  };
  isEdit.value = false;
  flowStore.rotate();
}

function assignFormDataGroup(data: ProductGroup) {
  previousValue.value = data;

  formDataGroup.value = {
    remark: data.remark,
    detail: data.detail,
    name: data.name,
    code: data.code,
  };
}

const prevService = ref<ServiceCreate>({
  work: [],
  attributes: {
    additional: [],
  },
  detail: '',
  name: '',
  code: '',
  productTypeId: '',
  registeredBranchId: '',
});

const currentService = ref<ServiceById>();

async function assignFormDataProductService(id: string) {
  const res = await fetchListServiceById(id);

  if (res) {
    statusToggle.value = res.status === 'INACTIVE' ? false : true;
    profileUrl.value = res.imageUrl;
    profileSubmit.value = true;

    currentService.value = JSON.parse(JSON.stringify(res));

    prevService.value = {
      code: res.code,
      name: res.name,
      detail: res.detail,
      attributes: res.attributes,
      work: [],
      status: res.status,
      productTypeId: res.productTypeId,
      registeredBranchId: res.registeredBranchId,
    };

    formDataProductService.value = { ...prevService.value };

    res.work.forEach((item) => {
      prevService.value.work.push({
        name: item.name,
        attributes: item.attributes,
        productId: item.productOnWork.map(
          (productOnWorkItem) => productOnWorkItem.product.id,
        ),
      });
    });

    formDataProductService.value.work = prevService.value.work;

    workItems.value = res.work.map((item) => {
      return {
        id: item.id,
        name: item.name,
        attributes: item.attributes,
        product: item.productOnWork.map((productOnWorkItem) => {
          return {
            ...productOnWorkItem.product,
            nameEn: productOnWorkItem.product.name,
          };
        }),
      };
    });
  }
}

const prevProduct = ref<ProductCreate>({
  productTypeId: '',
  remark: '',
  serviceCharge: 0,
  agentPrice: 0,
  price: 0,
  process: 0,
  detail: '',
  name: '',
  code: '',
  image: undefined,
  registeredBranchId: '',
});

function assignFormDataProduct(data: ProductList) {
  statusToggle.value = data.status === 'INACTIVE' ? false : true;
  console.log(data);
  profileUrl.value = `${baseUrl.value}/product/${data?.id}/image`;
  profileSubmit.value = true;

  prevProduct.value = {
    productTypeId: data.productTypeId,
    remark: data.remark,
    serviceCharge: data.serviceCharge,
    agentPrice: data.agentPrice,
    price: data.price,
    process: data.process,
    detail: data.detail === '' ? '-' : data.detail,
    name: data.name,
    code: data.code,
    image: undefined,
    registeredBranchId: data.registeredBranchId,
  };

  formDataProduct.value = { ...prevProduct.value };
}

function clearFormGroup() {
  formDataGroup.value = {
    remark: '',
    detail: '',
    name: '',
    code: '',
  };

  dialogInputForm.value = false;
}

function clearFormProduct() {
  formDataProduct.value = {
    productTypeId: '',
    remark: '',
    serviceCharge: 0,
    agentPrice: 0,
    price: 0,
    process: 0,
    detail: '',
    name: '',
    code: '',
    image: undefined,
    registeredBranchId: '',
  };
  imageProduct.value = undefined;
  dialogProduct.value = false;
  dialogProductEdit.value = false;
  profileUrl.value = '';
  profileSubmit.value = false;
}

function clearFormService() {
  formDataProductService.value = {
    code: '',
    name: '',
    detail: '',
    attributes: {
      additional: [],
    },
    work: [],
    status: undefined,
    productTypeId: '',
    registeredBranchId: '',
  };

  workItems.value = [];
  selectProduct.value = [];
  dialogService.value = false;
  dialogServiceEdit.value = false;
  profileUrl.value = '';
  profileSubmit.value = false;
  imageProduct.value = undefined;
}

function assignFormDataProductServiceCreate() {
  formDataProductService.value.work = [];

  workItems.value.forEach((item) => {
    formDataProductService.value.work.push({
      name: item.name,
      attributes: item.attributes,
      productId: item.product.map((productItem) => productItem.id),
    });
  });
}

async function submitService() {
  assignFormDataProductServiceCreate();
  formDataProductService.value.image = imageProduct.value;
  formDataProductService.value.productTypeId = currentIdType.value;

  if (dialogService.value) {
    formDataProductService.value.productTypeId = currentIdType.value;

    if (formDataProductService.value.registeredBranchId === '') {
      formDataProductService.value.registeredBranchId = null;
    }

    await createService(formDataProductService.value);
    totalService.value = totalService.value + 1;
  }

  if (dialogServiceEdit.value) {
    await editService(currentIdService.value, {
      ...formDataProductService.value,
      status: statusToggle.value
        ? formDataProductService.value.status
        : 'INACTIVE',
    });
  }

  if (productAndServiceTab.value === 'all') {
    await fetchListOfProductAndService();
  }
  if (productAndServiceTab.value === 'service') {
    await fetchListOfService();
  }
  flowStore.rotate();
  clearFormService();
}

async function submitProduct() {
  formDataProduct.value.productTypeId = currentIdType.value;
  if (profileSubmit.value) {
    formDataProduct.value.image = imageProduct.value;
  }

  if (dialogProduct.value) {
    const res = await createProduct(formDataProduct.value);

    if (res) {
      stat.value[3].count = stat.value[3].count + 1;
    }
  }

  if (dialogProductEdit.value) {
    await editProduct(currentIdProduct.value, {
      ...formDataProduct.value,
      status: statusToggle.value ? 'ACTIVE' : 'INACTIVE',
    });
  }
  totalProduct.value = totalProduct.value + 1;
  clearFormProduct();

  if (productAndServiceTab.value === 'all') {
    await fetchListOfProductAndService();
  }
  if (productAndServiceTab.value === 'product') {
    await fetchListOfProduct();
  }

  flowStore.rotate();
}

async function submitGroup() {
  if (drawerInfo.value) {
    await editProductService(currentId.value, formDataGroup.value);
  } else {
    const res = await createProductService(formDataGroup.value);

    if (res) {
      stat.value[0].count = stat.value[0].count + 1;
    }
  }

  drawerInfo.value = false;
  await fetchListGroups();
  clearFormGroup();
  flowStore.rotate();
}

function confirmDeleteWork(id: string) {
  dialog({
    color: 'negative',
    icon: 'mdi-alert',
    title: t('deleteConfirmTitle'),
    actionText: t('delete'),
    message: t('deleteConfirmMessage'),
    action: async () => {
      deleteWork(id);
      flowStore.rotate();
    },
    cancel: () => {},
  });
}

function triggerConfirmCloseWork() {
  const isWorkNameEdit =
    workNameRef.value && workNameRef.value.isWorkNameEdit
      ? workNameRef.value.isWorkNameEdit()
      : false;
  if (isWorkNameEdit) {
    dialogWarningClose(t, {
      action: () => {
        manageWorkNameDialog.value = false;
      },
    });
  } else {
    manageWorkNameDialog.value = false;
  }
}

const tempValueProperties = ref<Attributes>({
  additional: [],
});
const currentPropertiesMode = ref<'service' | 'work'>('service');

function openPropertiesDialog(type: 'service' | 'work') {
  if (type === 'service') {
    propertiesOption.value = optionStore.globalOption.servicePropertiesField;
  }

  if (type === 'work') {
    propertiesOption.value = optionStore.globalOption.workPropertiesField;
  }

  currentPropertiesMode.value = type;
  propertiesDialog.value = true;
}

async function calculateStats() {
  const resStatsGroup = await fetchStatsProductGroup();
  const resStatsType = await fetchStatsProductType();
  const resStatsService = await fetchStatsService();
  const resStatsProduct = await fetchStatsProduct();

  stat.value[0].count = resStatsGroup ?? 0;
  stat.value[1].count = resStatsType ?? 0;
  stat.value[2].count = resStatsService ?? 0;
  stat.value[3].count = resStatsProduct ?? 0;
}

async function fetchStatus() {
  if (productAndServiceTab.value === 'all') {
    await fetchListOfProductAndService();
    flowStore.rotate();
  }
  if (productAndServiceTab.value === 'product') {
    await fetchListOfProduct();
    flowStore.rotate();
  }

  if (productAndServiceTab.value === 'service') {
    await fetchListOfService();
    flowStore.rotate();
  }
}

async function alternativeFetch() {
  if (productAndServiceTab.value === 'all') {
    await fetchListOfProductAndService();
    flowStore.rotate();
  }
  if (productAndServiceTab.value === 'product') {
    await fetchListOfProduct();

    flowStore.rotate();
  }
  if (productAndServiceTab.value === 'service') {
    await fetchListOfService();
    flowStore.rotate();
  }
}

function cloneData() {
  if (!currentService.value) return;
  formDataProductService.value = {
    ...prevService.value,
    attributes: JSON.parse(JSON.stringify(currentService.value.attributes)),
  };

  workItems.value = currentService.value.work.map((item) => {
    return {
      id: item.id,
      name: item.name,
      attributes: JSON.parse(JSON.stringify(item.attributes)),
      product: item.productOnWork.map((productOnWorkItem) => {
        return {
          ...productOnWorkItem.product,
          nameEn: productOnWorkItem.product.name,
        };
      }),
    };
  });
}

onMounted(async () => {
  utilsStore.currentTitle.title = 'mainProductTitle';
  utilsStore.currentTitle.caption = 'mainProductCaption';

  calculateStats();
  await fetchListGroups();
  flowStore.rotate();
});

watch(productMode, () => {
  inputSearch.value = '';
  currentStatus.value = 'All';
});

watch(currentStatus, async () => {
  if (productMode.value === 'group') {
    await fetchListGroups();
  } else {
    await fetchListType();
  }
  flowStore.rotate();
});

watch(inputSearch, async () => {
  if (productMode.value === 'group') {
    await fetchListGroups();
    flowStore.rotate();
  }

  if (productMode.value === 'type') {
    await fetchListType();
    flowStore.rotate();
  }
});

watch(inputSearchProductAndService, async () => {
  await alternativeFetch();
});
</script>

<template>
  <ButtonAddComponent style="z-index: 999">
    <q-fab-action
      v-if="productMode === 'group'"
      id="btn-add-product-group"
      style="color: white; background-color: hsla(var(--pink-6-hsl))"
      padding="xs"
      icon="mdi-folder-multiple-plus"
      :label="$t('productAndService')"
      external-label
      label-position="left"
      @click="
        () => {
          clearFormGroup();
          dialogInputForm = true;
        }
      "
    />
    <q-fab-action
      v-if="productMode === 'type'"
      id="btn-add-product-type"
      :label="$t('productAndServiceType')"
      external-label
      label-position="left"
      style="color: white; background-color: hsla(var(--purple-11-hsl))"
      padding="xs"
      icon="mdi-folder-multiple-plus"
      @click="
        () => {
          clearFormGroup();
          dialogInputForm = true;
        }
      "
    ></q-fab-action>
    <q-fab-action
      v-if="productMode === 'service'"
      :label="$t('buttonAddProduct')"
      external-label
      label-position="left"
      style="color: white; background-color: hsla(var(--green-11-hsl))"
      padding="xs"
      icon="mdi-folder-multiple-plus"
      @click="
        () => {
          clearFormProduct();
          fetchListOfOptionBranch();
          dialogProduct = true;
        }
      "
    ></q-fab-action>
    <q-fab-action
      v-if="productMode === 'service'"
      :label="$t('addService')"
      external-label
      label-position="left"
      style="color: white; background-color: hsla(var(--orange-6-hsl))"
      padding="xs"
      icon="mdi-folder-multiple-plus"
      @click="
        () => {
          clearFormGroup();
          clearFormService();
          fetchListOfOptionBranch();
          currentServiceTab = 'serviceInformation';
          dialogService = true;
        }
      "
    ></q-fab-action>
  </ButtonAddComponent>

  <div class="column full-height no-wrap">
    <div
      v-if="stat[0].count === 0"
      class="column col bordered rounded q-pa-md"
      :no-padding="productGroup?.length !== 0"
    >
      <TooltipComponent
        class="self-end"
        title="messageTooltipNoProduct"
        caption="messageTooltipProductCreate"
        imgSrc="personnel-table-"
      />

      <div class="row items-center justify-center" style="flex-grow: 1">
        <AddButton
          label="productCreate"
          @trigger="() => (dialogInputForm = true)"
        />
      </div>
    </div>

    <div v-if="stat[0].count !== 0" class="column full-height no-wrap">
      <div
        class="row items-center q-mb-md"
        v-if="productMode === 'service' || productMode === 'type'"
      >
        <q-btn
          round
          icon="mdi-arrow-left"
          flat
          dense
          @click="productMode = productMode === 'service' ? 'type' : 'group'"
          class="q-mr-md"
        />
        <div
          class="text-h6 hover-underline"
          :class="{
            'app-text-muted': productMode !== 'type',
            'text-weight-bold': productMode === 'type',
          }"
          @click="productMode = 'type'"
        >
          {{ pathGroupName }}
        </div>
        <div
          class="text-h6 app-text-muted q-mx-sm"
          v-if="productMode === 'service'"
        >
          /
        </div>
        <div
          v-if="productMode === 'service'"
          class="text-h6"
          :class="{
            'app-text-muted': productMode !== 'service',
            'text-weight-bold': productMode === 'service',
          }"
        >
          {{ pathTypeName }}
        </div>
      </div>

      <div
        v-if="productMode === 'group' || productMode === 'type'"
        class="scroll q-mb-md"
      >
        <div style="display: inline-block">
          <StatCard label-i18n :branch="stat" :dark="$q.dark.isActive" nowrap />
        </div>
      </div>

      <div
        v-if="productMode === 'group' || productMode === 'type'"
        class="surface-1 col bordered rounded q-pa-md scroll"
      >
        <div class="row justify-between">
          <div
            v-if="productMode === 'type'"
            class="text-h6 text-weight-bold q-mb-md"
          >
            {{ $t('productAndServiceType') }}
          </div>
          <div
            v-else-if="productMode === 'group'"
            class="text-h6 text-weight-bold q-mb-md"
          >
            {{ $t('productAndServiceAll') }}
          </div>
          <div
            v-if="productMode === 'group' || productMode === 'type'"
            class="row q-px-md q-pb-md"
          >
            <q-input
              style="width: 300px"
              outlined
              dense
              :label="$t('search')"
              class="q-mr-lg"
              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
              v-model="inputSearch"
              debounce="500"
            >
              <template v-slot:prepend>
                <q-icon name="mdi-magnify" />
              </template>
            </q-input>
            <q-btn
              icon="mdi-tune-vertical-variant"
              size="sm"
              :color="$q.dark.isActive ? 'dark' : 'white'"
              :text-color="$q.dark.isActive ? 'white' : 'dark'"
              class="bordered rounded"
              unelevated
            >
              <q-menu class="bordered">
                <q-list v-close-popup dense>
                  <q-item
                    clickable
                    class="flex items-center"
                    @click="
                      () => {
                        currentStatus = 'All';
                      }
                    "
                  >
                    {{ $t('all') }}
                  </q-item>
                  <q-item
                    clickable
                    class="flex items-center"
                    @click="
                      () => {
                        currentStatus = 'ACTIVE';
                      }
                    "
                  >
                    {{ $t('statusACTIVE') }}
                  </q-item>
                  <q-item
                    clickable
                    class="flex items-center"
                    @click="
                      () => {
                        currentStatus = 'INACTIVE';
                      }
                    "
                  >
                    {{ $t('statusINACTIVE') }}
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
        </div>

        <div class="row q-col-gutter-lg">
          <div
            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
            v-for="(v, i) in productMode === 'type'
              ? productType
              : productGroup"
            :key="i"
          >
            <ProductCardComponent
              v-if="productMode === 'type'"
              isType
              :count-product="v._count.product"
              :count-type="v._count.type"
              :count-service="v._count.service"
              :title="v.name"
              :subtitle="v.code"
              :date="new Date(v.updatedAt)"
              :status="v.status"
              :id="v.id"
              :isDisabled="v.status === 'INACTIVE'"
              :color="
                $q.dark.isActive
                  ? 'var(--purple-7-hsl)'
                  : 'var(--violet-11-hsl)'
              "
              @toggleStatus="toggleStatusType(v.id, v.status)"
              @viewCard="
                () => {
                  currentStatusProduct = v.status === 'INACTIVE';
                  clearFormGroup();
                  currentIdType = v.id;
                  assignFormDataGroup(v);
                  isEdit = false;
                  drawerInfo = true;
                }
              "
              @updateCard="
                () => {
                  clearFormGroup();
                  currentIdType = v.id;
                  assignFormDataGroup(v);
                  isEdit = true;
                  drawerInfo = true;
                }
              "
              @deleteCard="
                () => {
                  deleteProductById(v.id);
                }
              "
              @on-click="
                async () => {
                  pathTypeName = v.name;
                  currentIdType = v.id;
                  productMode = 'service';
                  productAndServiceTab = 'all';
                  // await featchStatsService();
                  // await featchStatsProduct();
                  await fetchListOfProduct();
                  await fetchListOfService();
                  await fetchListOfProductAndService();
                  flowStore.rotate();
                }
              "
            />
            <ProductCardComponent
              v-else-if="productMode === 'group'"
              :title="v.name"
              :subtitle="v.code"
              :count-product="v._count.product"
              :count-type="v._count.type"
              :count-service="v._count.service"
              :date="new Date(v.updatedAt)"
              :status="v.status"
              color="var(--pink-6-hsl)"
              :id="v.id"
              :isDisabled="v.status === 'INACTIVE'"
              @toggleStatus="toggleStatusGroup(v.id, v.status)"
              @viewCard="
                () => {
                  currentStatusProduct = v.status === 'INACTIVE';
                  clearFormGroup();
                  assignFormDataGroup(v);
                  isEdit = false;
                  currentId = v.id;
                  drawerInfo = true;
                }
              "
              @updateCard="
                () => {
                  clearFormGroup();
                  assignFormDataGroup(v);
                  isEdit = true;
                  currentId = v.id;

                  drawerInfo = true;
                }
              "
              @deleteCard="
                () => {
                  deleteProductById(v.id);
                }
              "
              @on-click="
                async () => {
                  pathGroupName = v.name;
                  currentId = v.id;
                  productMode = 'type';
                  await fetchListType();
                  flowStore.rotate();
                }
              "
            />
          </div>
        </div>

        <div
          v-if="
            (productMode === 'type' && productType?.length === 0) ||
            (productGroup?.length === 0 && productMode === 'group')
          "
          class="flex justify-center items-center q-mt-lg"
          style="min-height: 70vh; background-color: var(--surface-2)"
        >
          <NoData :not-found="!!inputSearch" />
        </div>
        <template v-else>
          <div
            v-if="productMode === 'group'"
            class="flex items-center justify-between q-pt-xl"
          >
            <div class="col-4">
              <div class="row items-center">
                <div class="app-text-muted" style="width: 80px">
                  {{ $t('showing') }}
                </div>
                <div>
                  <q-btn-dropdown dense unelevated :label="pageSizeGroup">
                    <q-list>
                      <q-item
                        v-for="v in [10, 30, 50, 100, 500, 1000]"
                        :key="v"
                        clickable
                        v-close-popup
                        @click="
                          async () => {
                            pageSizeGroup = v;
                            await fetchListGroups();
                          }
                        "
                      >
                        <q-item-section>
                          <q-item-label>{{ v }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-btn-dropdown>
                </div>
              </div>
            </div>

            <div class="col-4 row justify-center app-text-muted">
              {{
                $t('recordsPage', {
                  resultcurrentPage: productGroup?.length,
                  total: totalGroup,
                })
              }}
            </div>

            <div class="col-4 row justify-end">
              <PaginationComponent
                v-model:current-page="currentPageGroup"
                v-model:max-page="maxPageGroup"
                :fetch-data="
                  async () => {
                    await fetchListGroups();
                    flowStore.rotate();
                  }
                "
              />
            </div>
          </div>

          <div
            v-if="productMode === 'type'"
            class="flex justify-between q-pt-xl"
          >
            <div class="col-4">
              <div class="row items-center">
                <div class="app-text-muted" style="width: 80px">
                  {{ $t('showing') }}
                </div>
                <div>
                  <q-btn-dropdown dense unelevated :label="pageSizeType">
                    <q-list>
                      <q-item
                        v-for="v in [10, 30, 50, 100, 500, 1000]"
                        :key="v"
                        clickable
                        v-close-popup
                        @click="
                          async () => {
                            pageSizeType = v;
                            await fetchListType();
                          }
                        "
                      >
                        <q-item-section>
                          <q-item-label>{{ v }}</q-item-label>
                        </q-item-section>
                      </q-item>
                    </q-list>
                  </q-btn-dropdown>
                </div>
              </div>
            </div>

            <div class="col-4 row justify-center app-text-muted">
              {{
                $t('recordsPage', {
                  resultcurrentPage: productType?.length,
                  total: totalType,
                })
              }}
            </div>
            <div class="col-4 row justify-end">
              <PaginationComponent
                v-model:current-page="currentPageType"
                v-model:max-page="maxPageType"
                :fetch-data="
                  async () => {
                    await fetchListType();
                    flowStore.rotate();
                  }
                "
              />
            </div>
          </div>
        </template>
      </div>
      <div
        v-else-if="productMode === 'service'"
        class="surface-1 col bordered rounded scroll"
      >
        <div class="row justify-between q-px-md">
          <q-tabs v-model="productAndServiceTab" dense>
            <q-tab
              name="all"
              @click="
                async () => {
                  currentPageServiceAndProduct = 1;
                  inputSearchProductAndService = '';
                  currentStatus = 'All';
                  pageSizeServiceAndProduct;
                  // await fetchListOfProductAndService();
                  flowStore.rotate();
                }
              "
            >
              <div
                class="row"
                :class="
                  productAndServiceTab === 'all'
                    ? 'text-bold'
                    : 'app-text-muted'
                "
              >
                {{ $t('all') }}
                <q-badge
                  class="rounded q-ml-sm"
                  :class="
                    productAndServiceTab === 'all' ? '' : 'app-text-muted'
                  "
                  :color="productAndServiceTab === 'all' ? 'primary' : ''"
                  style="background-color: var(--surface-3)"
                  :label="totalProductAndService"
                />
              </div>
            </q-tab>

            <q-tab
              name="product"
              @click="
                async () => {
                  currentPageServiceAndProduct = 1;
                  inputSearchProductAndService = '';
                  currentStatus = 'All';
                  // await fetchListOfProduct();
                  flowStore.rotate();
                }
              "
            >
              <div
                class="row"
                :class="
                  productAndServiceTab === 'product'
                    ? 'text-bold'
                    : 'app-text-muted'
                "
              >
                {{ $t('product') }}

                <q-badge
                  class="rounded q-ml-sm"
                  :class="
                    productAndServiceTab === 'product' ? '' : 'app-text-muted'
                  "
                  :color="productAndServiceTab === 'product' ? 'primary' : ''"
                  style="background-color: var(--surface-3)"
                  :label="totalProduct"
                />
              </div>
            </q-tab>
            <q-tab
              name="service"
              @click="
                async () => {
                  currentPageServiceAndProduct = 1;
                  inputSearchProductAndService = '';
                  currentStatus = 'All';
                  // await fetchListOfService();
                  flowStore.rotate();
                }
              "
            >
              <div
                class="row"
                :class="
                  productAndServiceTab === 'service'
                    ? 'text-bold'
                    : 'app-text-muted'
                "
              >
                {{ $t('service') }}
                <q-badge
                  class="rounded q-ml-sm"
                  :class="
                    productAndServiceTab === 'service' ? '' : 'app-text-muted'
                  "
                  :color="productAndServiceTab === 'service' ? 'primary' : ''"
                  style="background-color: var(--surface-3)"
                  :label="totalService"
                />
              </div>
            </q-tab>
          </q-tabs>

          <div class="row q-pt-sm q-mb-sm">
            <q-input
              style="width: 300px"
              outlined
              dense
              unelavated
              :label="$t('search')"
              class="q-mr-md"
              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
              v-model="inputSearchProductAndService"
              debounce="250"
            >
              <template v-slot:prepend>
                <q-icon name="mdi-magnify" />
              </template>
            </q-input>

            <q-btn
              icon="mdi-tune-vertical-variant"
              size="sm"
              :color="$q.dark.isActive ? 'dark' : 'white'"
              :text-color="$q.dark.isActive ? 'white' : 'dark'"
              class="bordered rounded q-py-sm"
              unelevated
            >
              <q-menu class="bordered">
                <q-list v-close-popup dense>
                  <q-item
                    clickable
                    class="flex items-center"
                    @click="
                      async () => {
                        currentStatus = 'All';
                        await fetchStatus();
                      }
                    "
                  >
                    {{ $t('all') }}
                  </q-item>
                  <q-item
                    clickable
                    class="flex items-center"
                    @click="
                      async () => {
                        currentStatus = 'ACTIVE';
                        await fetchStatus();
                      }
                    "
                  >
                    {{ $t('statusACTIVE') }}
                  </q-item>
                  <q-item
                    clickable
                    class="flex items-center"
                    @click="
                      async () => {
                        currentStatus = 'INACTIVE';
                        await fetchStatus();
                      }
                    "
                  >
                    {{ $t('statusINACTIVE') }}
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </div>
        </div>

        <div
          v-if="
            (productAndServiceTab === 'all' &&
              productAndService?.length === 0) ||
            (productAndServiceTab === 'product' && product?.length === 0) ||
            (productAndServiceTab === 'service' && service?.length === 0)
          "
          class="flex justify-center items-center"
          style="min-height: 70vh; background-color: var(--surface-2)"
        >
          <NoData :not-found="!!inputSearchProductAndService" />
        </div>

        <div
          v-if="productAndService && productAndService.length > 0"
          class="row q-col-gutter-lg flex"
          style="padding: 20px"
        >
          <div
            :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
            v-for="i in productAndServiceTab === 'all'
              ? productAndService
              : productAndServiceTab === 'product'
                ? product
                : service"
            :key="i.id"
          >
            <TotalProductCardComponent
              :data="i"
              :key="i.id"
              :title="i.name"
              :isDisabled="i.status === 'INACTIVE' ? true : false"
              @toggleStatus="
                () => {
                  if (i.type === 'product') {
                    toggleStatusProduct(i.id, i.status);
                  }
                  if (i.type === 'service') {
                    toggleStatusService(i.id, i.status);
                  }
                }
              "
              @menuViewDetail="
                async () => {
                  if (i.type === 'product') {
                    currentIdProduct = i.id;
                    assignFormDataProduct(i);
                    dialogProductEdit = true;
                  }
                  if (i.type === 'service') {
                    currentIdService = i.id;
                    infoServiceEdit = false;
                    assignFormDataProductService(i.id);
                    dialogServiceEdit = true;
                  }
                  await fetchListOfOptionBranch();
                }
              "
              @menuEdit="
                async () => {
                  if (i.type === 'product') {
                    currentIdProduct = i.id;
                    infoProductEdit = true;
                    assignFormDataProduct(i);
                    dialogProductEdit = true;
                  }
                  if (i.type === 'service') {
                    currentIdService = i.id;
                    infoServiceEdit = true;
                    assignFormDataProductService(i.id);
                    dialogServiceEdit = true;
                  }

                  await fetchListOfOptionBranch();
                }
              "
            />
          </div>
        </div>
        <div class="row justify-between q-pb-md q-px-lg">
          <div class="col-4">
            <div class="row items-center">
              <div class="app-text-muted" style="width: 80px">
                {{ $t('showing') }}
              </div>
              <div>
                <q-btn-dropdown
                  dense
                  unelevated
                  :label="pageSizeServiceAndProduct"
                >
                  <q-list>
                    <q-item
                      v-for="v in [10, 30, 50, 100, 500, 1000]"
                      :key="v"
                      clickable
                      v-close-popup
                      @click="
                        async () => {
                          pageSizeServiceAndProduct = v;
                          await fetchListOfProductAndService();
                        }
                      "
                    >
                      <q-item-section>
                        <q-item-label>{{ v }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </div>
            </div>
          </div>

          <div class="col-4 row justify-center app-text-muted">
            {{
              $t('recordsPage', {
                resultcurrentPage:
                  productAndServiceTab === 'all'
                    ? productAndService.length
                    : productAndServiceTab === 'product'
                      ? product?.length
                      : service?.length,
                total: total,
              })
            }}
          </div>
          <div class="col-4 row justify-end">
            <PaginationComponent
              v-model:current-page="currentPageServiceAndProduct"
              v-model:max-page="maxPageServiceAndProduct"
              :fetch-data="
                async () => {
                  await alternativeFetch();
                  flowStore.rotate();
                }
              "
            />
          </div>
        </div>
      </div>
    </div>
  </div>

  <FormDialog
    v-model:modal="dialogInputForm"
    noAddress
    :title="$t('addProduct')"
    :submit="() => (productMode === 'type' ? submitType() : submitGroup())"
    :close="clearFormGroup"
  >
    <template #information>
      <BasicInformation
        dense
        :isType="productMode === 'type'"
        v-model:remark="formDataGroup.remark"
        v-model:name="formDataGroup.name"
        v-model:detail="formDataGroup.detail"
      />
    </template>
  </FormDialog>

  <DrawerInfo
    :show-edit="!currentStatusProduct"
    ref="formDialogRef"
    v-model:drawerOpen="drawerInfo"
    :title="
      $t(productMode === 'group' ? 'productGroup' : 'productType', {
        name: formDataGroup.code,
      })
    "
    :undo="() => undoProductGroup()"
    :isEdit="isEdit"
    :editData="() => (isEdit = true)"
    :submit="() => (productMode === 'type' ? submitType() : submitGroup())"
    :delete-data="() => deleteProductById()"
    :close="() => (drawerInfo = false)"
  >
    <template #info>
      <InfoForm noAddress>
        <template #information>
          <!-- <AppBox class="q-ma-md" bordered> -->
          <BasicInformation
            dense
            :isType="productMode === 'type'"
            :readonly="!isEdit"
            v-model:remark="formDataGroup.remark"
            v-model:name="formDataGroup.name"
            v-model:code="formDataGroup.code"
            v-model:detail="formDataGroup.detail"
          />
          <!-- </AppBox> -->
        </template>
      </InfoForm>
    </template>
  </DrawerInfo>

  <FormDialog
    v-model:modal="dialogProductServiceType"
    :title="'สร้างสินค้าและบริการ'"
    no-footer
    no-app-box
    max-width="80%"
    :close="() => (dialogProductServiceType = false)"
  >
    <template #body>
      <div class="row q-gutter-xl q-pa-sm">
        <ItemCard
          class="col"
          v-for="i in itemCard"
          changeColor
          :key="i.text"
          :icon="i.icon"
          :text="i.text"
          :color="i.color"
          @trigger="
            () => {
              dialogProductServiceType = false;
            }
          "
        />
      </div>
    </template>
  </FormDialog>

  <FormDialog
    v-model:modal="dialogTotalProduct"
    noAddress
    noAppBox
    title="สินค้าทั้งหมด"
    :submit="
      () => {
        selectProduct.forEach((i) => {
          workItems[currentWorkIndex].product.push({
            ...i,
            nameEn: '',
          });
        });

        dialogTotalProduct = false;
        selectProduct = [];
      }
    "
    :close="
      () => {
        dialogTotalProduct = false;
        inputSearchProductAndService = '';
      }
    "
  >
    <div class="full-width full-height">
      <div class="row items-center">
        <q-space />
        <q-input
          outlined
          dense
          :label="$t('search')"
          :bg-color="$q.dark.isActive ? 'dark' : 'white'"
          v-model="inputSearchProductAndService"
          debounce="500"
          @update:model-value="searchProduct()"
        >
          <template v-slot:prepend>
            <q-icon name="mdi-magnify" />
          </template>
        </q-input>
      </div>
      <div>
        <AppBox class="row" style="background: none">
          <div
            class="col-12 text-center"
            v-if="resultSearchProduct?.length === 0"
          >
            <NoData />
          </div>

          <div
            class="q-pa-xs"
            :class="`${$q.screen.gt.sm ? 'col-3 ' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
            v-for="i in (!!inputSearchProductAndService
              ? resultSearchProduct
              : productIsAdd
            )?.filter((i) => {
              if (i.status === 'INACTIVE') {
                return false;
              }
              return true;
            })"
            :key="i.id"
          >
            <TotalProductCardComponent
              :index="selectProduct.findIndex((v) => v.id === i.id)"
              :isAddProduct="!!selectProduct.find((v) => v.id === i.id)"
              :isSelected="true"
              :data="{ ...i, type: 'product' }"
              :title="i.name"
              :status="i.status === 'INACTIVE' ? true : false"
              @menuViewDetail="
                () => {
                  currentIdProduct = i.id;
                  assignFormDataProduct(i);
                  dialogProductEdit = true;
                }
              "
              @menuEdit="
                () => {
                  currentIdProduct = i.id;
                  infoProductEdit = true;
                  assignFormDataProduct(i);
                  dialogProductEdit = true;
                }
              "
              @viewDetail="
                () => {
                  currentIdProduct = i.id;
                  infoProductEdit = false;
                  assignFormDataProduct(i);
                  dialogProductEdit = true;
                }
              "
              @select="
                (data) => {
                  const tempValue = selectProduct.find((v) => v.id === i.id);

                  if (tempValue) {
                    selectProduct = selectProduct.filter((v) => v.id !== i.id);
                  } else {
                    selectProduct.push(data);
                  }
                }
              "
            />
          </div>
        </AppBox>
      </div>
    </div>
  </FormDialog>

  <!-- Add Product -->
  <FormDialog
    v-model:modal="dialogProduct"
    noAddress
    :title="$t('buttonAddProduct')"
    :submit="
      () => {
        submitProduct();
      }
    "
    :close="
      () => {
        dialogProduct = false;
        flowStore.rotate();
      }
    "
  >
    <template #prepend>
      <ProfileUpload
        isProduct
        v-model:url-profile="profileUrl"
        v-model:status-toggle="statusToggle"
        v-model:profile-submit="profileSubmit"
        @input-file="inputFile.click()"
      />
    </template>

    <template #information>
      <BasicInfoProduct
        :options-branch="branchOption"
        v-model:registered-branch-id="formDataProduct.registeredBranchId"
        v-model:detail="formDataProduct.detail"
        v-model:remark="formDataProduct.remark"
        v-model:name="formDataProduct.name"
        v-model:code="formDataProduct.code"
        v-model:process="formDataProduct.process"
        dense
        separator
      />
    </template>
    <template #person>
      <PriceDataComponent
        v-model:price="formDataProduct.price"
        v-model:agent-price="formDataProduct.agentPrice"
        v-model:service-charge="formDataProduct.serviceCharge"
        dense
      />
    </template>
  </FormDialog>

  <!-- edit product -->
  <FormDialog
    :edit="!(formDataProduct.status === 'INACTIVE')"
    :isEdit="infoProductEdit"
    v-model:modal="dialogProductEdit"
    noAddress
    :title="$t('editProduct')"
    :editData="() => (infoProductEdit = true)"
    :undo="
      () => {
        formDataProduct = { ...prevProduct };
        infoProductEdit = false;
        flowStore.rotate();
      }
    "
    :deleteData="
      () => {
        deleteTypeOfProduct();
      }
    "
    :submit="
      () => {
        submitProduct();
      }
    "
    :close="
      () => {
        dialogProductEdit = false;
        flowStore.rotate();
      }
    "
  >
    <template #prepend>
      <ProfileUpload
        isProduct
        v-model:url-profile="profileUrl"
        v-model:status-toggle="statusToggle"
        v-model:profile-submit="profileSubmit"
        @input-file="inputFile.click()"
        :label-status-toggle="'formDialogTitleProductStatus'"
      />
    </template>

    <template #information>
      <BasicInfoProduct
        :options-branch="branchOption"
        :readonly="!infoProductEdit"
        v-model:registered-branch-id="formDataProduct.registeredBranchId"
        v-model:detail="formDataProduct.detail"
        v-model:remark="formDataProduct.remark"
        v-model:name="formDataProduct.name"
        v-model:code="formDataProduct.code"
        v-model:process="formDataProduct.process"
        dense
        separator
      />
    </template>
    <template #person>
      <PriceDataComponent
        :readonly="!infoProductEdit"
        v-model:price="formDataProduct.price"
        v-model:agent-price="formDataProduct.agentPrice"
        v-model:service-charge="formDataProduct.serviceCharge"
        dense
      />
    </template>
  </FormDialog>

  <!-- add service -->
  <FormDialog
    no-address
    no-app-box
    height="95vh"
    :title="$t('addService')"
    v-model:modal="dialogService"
    :tabs-list="serviceTab"
    v-model:current-tab="currentServiceTab"
    :submit="
      () => {
        submitService();
      }
    "
    :close="
      () => {
        clearFormService();
        dialogService = false;
        flowStore.rotate();
      }
    "
  >
    <template #prepend>
      <ProfileUpload
        isService
        v-model:url-profile="profileUrl"
        v-model:status-toggle="statusToggle"
        v-model:profile-submit="profileSubmit"
        @input-file="inputFile.click()"
      />
    </template>

    <div
      v-if="currentServiceTab === 'serviceInformation'"
      class="col-md-10 col-sm-12"
    >
      <div class="surface-1 rounded bordered q-pa-lg full-width row">
        <BasicInformation
          dense
          service
          :options-branch="branchOption"
          v-model:registered-branch-id="
            formDataProductService.registeredBranchId
          "
          v-model:service-code="formDataProductService.code"
          v-model:service-description="formDataProductService.detail"
          v-model:service-name-th="formDataProductService.name"
        />
      </div>
      <div class="surface-1 rounded bordered q-mt-md q-pa-lg row">
        <FormServiceProperties
          v-model:service-attributes="formDataProductService.attributes"
          @service-properties="
            () => {
              tempValueProperties = formDataProductService.attributes;
              openPropertiesDialog('service');
            }
          "
        />
      </div>
    </div>

    <div
      v-if="currentServiceTab === 'workInformation'"
      class="surface-1 rounded bordered col-md-10 col-sm-12 q-pa-lg"
    >
      <FormServiceWork
        v-model:work-items="workItems"
        dense
        @addProduct="
          async (index) => {
            await fetchListOfProductIsAdd(currentIdType);
            currentWorkIndex = index;
            dialogTotalProduct = true;
          }
        "
        @manage-work-name="
          () => {
            manageWorkNameDialog = true;
          }
        "
        @work-properties="
          (index) => {
            currentWorkIndex = index;
            tempValueProperties = workItems[index].attributes;
            openPropertiesDialog('work');
          }
        "
      />
    </div>
  </FormDialog>

  <!-- service properties -->
  <FormDialog
    no-address
    no-app-box
    height="75vh"
    width="75%"
    :title="$t('properties')"
    v-model:modal="propertiesDialog"
    :submit="
      () => {
        if (currentPropertiesMode === 'service') {
          formDataProductService.attributes = tempValueProperties;
        }
        if (currentPropertiesMode === 'work') {
          workItems[currentWorkIndex].attributes = tempValueProperties;
        }

        propertiesDialog = false;
      }
    "
    :close="
      () => {
        propertiesDialog = false;
      }
    "
  >
    <ServiceProperties
      v-model:properties-option="propertiesOption"
      v-model:form-service-properties="tempValueProperties"
    />
  </FormDialog>

  <!-- manage work name -->
  <FormDialog
    no-address
    no-app-box
    no-footer
    height="65vh"
    width="65%"
    v-model:modal="manageWorkNameDialog"
    :title="$t('manage')"
    :close="triggerConfirmCloseWork"
  >
    <WorkNameManagement
      ref="workNameRef"
      v-model:nameList="workNameItems"
      @delete="confirmDeleteWork"
      @edit="editWork"
      @add="createWork"
    />
  </FormDialog>

  <!-- edit service -->
  <FormDialog
    no-address
    :no-app-box="currentServiceTab !== 'workInformation'"
    :edit="!(formDataProductService.status === 'INACTIVE')"
    height="95vh"
    :isEdit="infoServiceEdit"
    :title="$t('service', { msg: formDataProductService.name })"
    :tabs-list="serviceTab"
    v-model:modal="dialogServiceEdit"
    v-model:current-tab="currentServiceTab"
    :submit="
      () => {
        submitService();
      }
    "
    :close="
      () => {
        clearFormService();
        flowStore.rotate();
        dialogServiceEdit = false;
      }
    "
    :edit-data="
      () => {
        infoServiceEdit = true;
      }
    "
    :undo="
      () => {
        infoServiceEdit = false;
        cloneData();
        statusToggle = prevService.status === 'INACTIVE' ? false : true;
        flowStore.rotate();
      }
    "
    :delete-data="() => deleteServiceById()"
  >
    <template #prepend>
      <ProfileUpload
        isService
        :readonly="!infoServiceEdit"
        v-model:url-profile="profileUrl"
        v-model:status-toggle="statusToggle"
        v-model:profile-submit="profileSubmit"
        @input-file="inputFile.click()"
      />
    </template>

    <div
      v-if="currentServiceTab === 'serviceInformation'"
      class="col-md-10 col-sm-12"
    >
      <div class="surface-1 rounded bordered q-pa-lg full-width row">
        <BasicInformation
          :readonly="!infoServiceEdit"
          v-if="currentServiceTab === 'serviceInformation'"
          dense
          service
          :options-branch="branchOption"
          v-model:registered-branch-id="
            formDataProductService.registeredBranchId
          "
          v-model:service-code="formDataProductService.code"
          v-model:service-description="formDataProductService.detail"
          v-model:service-name-th="formDataProductService.name"
        />
      </div>
      <div class="surface-1 rounded bordered q-mt-md q-pa-lg row">
        <FormServiceProperties
          :readonly="!infoServiceEdit"
          v-model:service-attributes="formDataProductService.attributes"
          @service-properties="
            () => {
              tempValueProperties = formDataProductService.attributes;
              openPropertiesDialog('service');
            }
          "
        />
      </div>
    </div>

    <template #information>
      <FormServiceWork
        :readonly="!infoServiceEdit"
        v-model:work-items="workItems"
        v-if="currentServiceTab === 'workInformation'"
        dense
        @addProduct="
          async (index) => {
            await fetchListOfProduct();
            currentWorkIndex = index;
            dialogTotalProduct = true;
          }
        "
        @manage-work-name="manageWorkNameDialog = true"
        @work-properties="
          (index) => {
            currentWorkIndex = index;
            tempValueProperties = workItems[index].attributes;
            openPropertiesDialog('work');
          }
        "
      />
    </template>
  </FormDialog>
</template>

<style scoped>
.hover-underline:hover {
  cursor: pointer;
  text-decoration: underline;
}
</style>