influence/pages/view/common/item/detail.vue

<template>
  <div class="modern-item-add">
    <!-- 메인 컨텐츠 -->
    <div class="main-content">
      <div class="form-container">
        <v-form ref="addForm" class="modern-form">
          <div class="form-section">
            <h3 class="section-title">
              <i class="mdi mdi-package-variant"></i>
              {{ pageId }}
            </h3>
            
            <!-- 제품명 -->
            <div class="form-field">
              <label class="field-label">
                제품명
              </label>
              <div class="field-content">
                <div class="display-value">
                  {{ form.formValue1 }}
                </div>
              </div>
            </div>
            <div class="form-field">
              <label class="field-label">
                판매 기간
              </label>
              <div class="field-content df--type w--50">
                <div class="display-value date-range">
                  <i class="mdi mdi-calendar-range"></i>
                  {{ form.order_start_date?.slice(0, 10) }} ~ {{ form.order_end_date?.slice(0, 10) }}
                </div>
                <v-btn
                  v-if="form.formValue8 == 0 && memberType !== 'INFLUENCER'"
                  class="closed-btn"
                  color="primary"
                  variant="outlined"
                  @click="fnCloseEvt"
                >
                  <i class="mdi mdi-power"></i>
                  마감
                </v-btn>
              </div>
            </div>

            <!-- 인플루언서 (공동구매인 경우) -->
            <div class="form-field-group group--2" v-if="memberType !== 'INFLUENCER'">
              <div class="form-field">
                <label class="field-label">인플루언서</label>
                <div class="field-content">
                  <div v-if="form.contact_inf" class="display-value date-range">
                    <i class="mdi mdi-account-circle"></i>
                    {{ form.contact_inf_display }}
                  </div>
                  <div v-else class="display-value date-range">
                    <i class="mdi mdi-account-circle"></i>
                    배정된 인플루언서가 없습니다.
                  </div>
                </div>
              </div>
              <!-- 브랜드사 (공동구매인 경우) -->
              <div v-if="memberType !== 'BRAND'" class="form-field">
                <label class="field-label">브랜드사</label>
                <div class="field-content">
                  <div v-if="form.contact_brd" class="display-value date-range">
                    <i class="mdi mdi-domain"></i>
                    {{ form.contact_brd_display }}
                  </div>
                  <div v-else class="display-value date-range">
                    <i class="mdi mdi-domain"></i>
                    배정된 브랜드사가 없습니다.
                  </div>
                </div>
              </div>
            </div>


            <div class="form-field" v-if="form.order_link">
              <label class="field-label">구매 링크</label>
              <div class="field-content">
                <div v-if="pageType == 'D'" class="display-value link-display">
                  <a 
                    :href="form.order_link" 
                    target="_blank" 
                    rel="noopener noreferrer"
                    class="external-link"
                  >
                    <i class="mdi mdi-link"></i>
                    {{ form.order_link }}
                    <i class="mdi mdi-open-in-new"></i>
                  </a>
                </div>
                <v-text-field
                  v-else
                  v-model="form.order_link"
                  class="modern-input"
                  variant="outlined"
                  placeholder="공동구매 링크를 입력하세요"
                  maxlength="200"
                  hide-details="auto"
                ></v-text-field>
              </div>
            </div>

            <div class="form-field">
              <div class="field-content">
                <div class="btn--actions--wrap pb--rem">
                  <div class="left--sections">
                    <label class="mb--0 field-label">주문 내역</label>
                  </div>
                  <div class="right--sections">
                    <div class="caption--wrap">
                      <i class="ico">!</i>
                      <div class="caption--box">
                        - 주문 내역 입력 후 저장 버튼을 꼭 클릭해 주세요.<br />
                        - 엑셀 파일은 최대 10MB까지 업로드 가능합니다.<br />
                        - 엑셀 파일의 헤더명(주문번호, 구매자명)이 일치해야 정상적으로 업로드됩니다.
                      </div>
                    </div>
                    <v-btn class="custom-btn btn-white mini" @click="addEmptyRow"
                      ><i class="ico"></i>항목 추가</v-btn
                    >
                    <v-btn class="custom-btn btn-white mini" @click="deleteSelectedRows"
                      ><i class="ico"></i>항목 삭제</v-btn
                    >
                    <input
                      ref="excelFileInput"
                      type="file"
                      accept=".xlsx,.xls"
                      @change="handleExcelUpload"
                      style="display: none"
                    />
                    <v-btn class="custom-btn btn-excel" @click="$refs.excelFileInput.click()"
                      ><i class="ico"></i>엑셀 업로드</v-btn
                    >
                    <v-btn class="custom-btn btn-excel" @click="downloadExcel"
                      ><i class="ico"></i>엑셀 다운로드</v-btn
                    >
                    <v-btn class="custom-btn btn-purple mini" @click="fnRegEvt"
                      ><i class="ico"></i>저장</v-btn
                    >
                  </div>
                </div>
                <div class="tbl-wrapper">
                  <div class="tbl-wrap">
                    <!-- ag grid -->
                    <ag-grid-vue
                      :style="{ width: '100%', height: gridHeight }"
                      class="ag-theme-quartz order--table"
                      :gridOptions="gridOptions"
                      rowSelection="multiple"
                      :rowData="tblItems"
                      :paginationPageSize="pageObj.pageSize"
                      :suppressPaginationPanel="true"
                      @grid-ready="onGridReady"
                      @cell-value-changed="onCellValueChanged"
                    >
                    </ag-grid-vue>

                    <!-- 페이징 -->
                    <!-- <div class="ag-grid-custom-pagenations">
                      <pagination @chg_page="chgPage" :pageObj="pageObj"></pagination>
                    </div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </v-form>
      </div>

      <!-- 액션 버튼 -->
      <div class="action-buttons">
        <div class="button-group left">
          <v-btn
            class="action-btn secondary"
            variant="outlined"
            @click="listLocated"
          >
            <i class="mdi mdi-format-list-bulleted"></i>
            목록으로
          </v-btn>
          <v-btn
            v-if="memberType !== 'INFLUENCER'"
            class="action-btn danger"
            variant="outlined"
            color="error"
            @click="fnDelEvt"
          >
            <i class="mdi mdi-close-circle"></i>
            삭제
          </v-btn>
        </div>
        <div class="button-group right">
          <v-btn
            v-if="memberType !== 'INFLUENCER'"
            class="action-btn primary"
            color="primary"
            @click="fnBtnEvt"
          >
            <i class="mdi mdi-pencil"></i>
            수정하기
          </v-btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useAxios from "@/composables/useAxios";
import "@vuepic/vue-datepicker/dist/main.css";
import { AgGridVue } from "ag-grid-vue3";
import * as XLSX from "xlsx";
/************************************************************************
|    레이아웃
************************************************************************/
definePageMeta({
  layout: "default",
});

/************************************************************************
|    스토어
 ************************************************************************/
const useDtStore = useDetailStore();
const useAtStore = useAuthStore();

/************************************************************************
|    전역
 ************************************************************************/
const memberType = useAtStore.auth.memberType;
const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
const router = useRouter();
const pageId = ref("");
const itemType = useDtStore.boardInfo.itemType;
let pageObj = ref({
  page: 1, // 현재 페이지
  pageMaxNumSize: 10, // 페이지 숫자 최대 표현 개수
  pageSize: 10, // 테이블 조회 데이터 개수
  totalCnt: 0, // 전체 페이지
});
const addForm = ref(null);
const form = ref({
  formValue1: "",
  formValue2: "",
  formValue3: "",
  formValue4: "",
  formValue5: null,
  formValue6: "",
  formValue7: null,
  formValue8: "0",
  formValue8Arr: [
    { title: "판매중", value: "0" },
    { title: "품절", value: "1" },
  ],
  formValue9: "Y",
  formValue9Arr: [
    { title: "노출", value: "Y" },
    { title: "비노출", value: "N" },
  ],
  formValue10: "",
  contact_inf: "", // 실제 전송될 INFLUENCER_SEQ
  contact_inf_display: "", // 화면에 표시될 이름
  contact_brd: "", // 실제 전송될 contact_brd
  contact_brd_display: "", // 화면에 표시될 브랜드명
  order_link: "",
  order_start_date: "",
  order_end_date: "",
});
const apiUrl = ref("");
apiUrl.value = import.meta.env.VITE_APP_API_URL;
const objProc = ref({
  validErrorMessage: "",
});

const pageType = ref("");

// ag-grid 관련 변수
const tblItems = ref([]);
const gridApi = ref(null);
const gridOptions = ref({
  columnDefs: [
    { checkboxSelection: true, headerCheckboxSelection: true, width: 50, sortable: false, filter: false,},
    {
      headerName: "No",
      valueGetter: (params) => params.api.getDisplayedRowCount() - params.node.rowIndex,
      sortable: false,
      filter: false,
      width: 80,
    },
    {
      headerName: "주문번호",
      field: "ORDER_NUMB",
      cellStyle: { textAlign: 'center' },
      editable: true,
    },
    {
      headerName: "구매자명",
      field: "BUYER_NAME",
      editable: true,
      width: 120,
    },
    {
      headerName: "연락처",
      field: "PHONE",
      editable: true,
      width: 150,
    },
    {
      headerName: "주소",
      field: "ADDRESS",
      editable: true,
      resizable: true,
    },
    {
      headerName: "수량",
      field: "QTY",
      width: 100,
      editable: true,
      valueFormatter: (params) => {
        return params.value ? Number(params.value).toLocaleString() : '0';
      }
    },
    {
      headerName: "배송업체",
      field: "DELI_COMP",
      editable: true,
      width: 150,
    },
    {
      headerName: "송장번호",
      field: "DELI_NUMB",
      editable: true,
    },
  ],
  autoSizeStrategy: {
    type: "fitGridWidth", // width맞춤
  },
  suppressHorizontalScroll: false, // 가로 스크롤 제거
  defaultColDef: {
    sortable: true,
    filter: true,
    resizable: false,
  },
  suppressMovableColumns: true,
  suppressPaginationPanel: true, // 하단 default 페이징 컨트롤 숨김
  rowMultiSelectWithClick: true,
  rowSelection: {
    checkboxes: true,
    headerCheckbox: true,
    enableClickSelection: false,
    mode: "multiRow",
  },
  localeText: {
    noRowsToShow: '주문 내역이 없습니다.'
  }
});

/************************************************************************
 |    함수(METHODS)
 ************************************************************************/

// 동적 높이 계산
const gridHeight = computed(() => {
  const rowCount = tblItems.value.length;
  const minRows = 3; // 최소 5줄 높이
  const maxRows = 10; // 최대 15줄 높이 (스크롤 시작점)
  const rowHeight = 2.94; // rem 단위
  
  if (rowCount <= minRows) {
    return `calc(${minRows} * ${rowHeight}rem)`;
  } else if (rowCount > maxRows) {
    return `calc(${maxRows} * ${rowHeight}rem)`;
  } else {
    return `calc(${rowCount} * ${rowHeight}rem)`;
  }
});

const addEmptyRow = () => {
  const newRow = {
    BUYER_NAME: "",
    ADDRESS: "",
    PHONE: "",
    EMAIL: "",
    QTY: "",
    TOTAL: "",
    DELI_COMP: "",
    DELI_ADDR: "",
    DELI_NUMB: "",
    ORDER_DATE: "",
  };

  // 맨 앞에 추가 (unshift 사용)
  tblItems.value.unshift(newRow);
  pageObj.value.totalCnt = tblItems.value.length;

  // ag-grid 데이터 갱신
  if (gridApi.value) {
    gridApi.value.setGridOption("rowData", tblItems.value);
  }

  $toast.success("새 항목이 추가되었습니다.");
};

const deleteSelectedRows = () => {
  if (!gridApi.value) return;

  const selectedRows = gridApi.value.getSelectedRows();
  if (selectedRows.length === 0) {
    $toast.warning("삭제할 항목을 선택해주세요.");
    return;
  }

  let param = {
    id: pageId,
    title: pageId,
    content: `선택된 ${selectedRows.length}개 항목을 삭제하시겠습니까?`,
    yes: {
      text: "삭제",
      isProc: true,
      event: "FN_DELETE_SELECTED",
      param: selectedRows,
    },
    no: {
      text: "취소",
      isProc: false,
    },
  };
  $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
};

const fnDeleteSelected = (selectedRows) => {
  // 선택된 행들을 tblItems에서 제거
  selectedRows.forEach((selectedRow) => {
    const index = tblItems.value.findIndex(
      (item) =>
        item.BUYER_NAME === selectedRow.BUYER_NAME &&
        item.ADDRESS === selectedRow.ADDRESS &&
        item.PHONE === selectedRow.PHONE &&
        item.EMAIL === selectedRow.EMAIL
    );
    if (index > -1) {
      tblItems.value.splice(index, 1);
    }
  });

  pageObj.value.totalCnt = tblItems.value.length;

  // ag-grid 데이터 갱신
  if (gridApi.value) {
    gridApi.value.setGridOption("rowData", tblItems.value);
  }

  $toast.success(`${selectedRows.length}개 항목이 삭제되었습니다.`);
};

const handleExcelUpload = async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const errorHandler = useErrorHandler();

  // 파일 크기 검증 (10MB)
  const maxSize = 10 * 1024 * 1024;
  if (file.size > maxSize) {
    const sizeError = new Error("파일 크기 초과");
    sizeError.name = "FileSizeError";
    errorHandler.handleFileError(sizeError, file.name);
    event.target.value = "";
    return;
  }

  // 파일 형식 검증
  const allowedTypes = [
    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    "application/vnd.ms-excel",
  ];
  if (!allowedTypes.includes(file.type)) {
    const typeError = new Error("지원하지 않는 파일 형식");
    typeError.name = "FileTypeError";
    errorHandler.handleFileError(typeError, file.name);
    event.target.value = "";
    return;
  }

  const reader = new FileReader();
  reader.onload = async (e) => {
    try {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: "array", cellDates: true });
      const sheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[sheetName];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: false });

      if (jsonData.length < 2) {
        $toast.error("엑셀 파일에 데이터가 없습니다. 헤더와 최소 1개 이상의 데이터 행이 필요합니다.");
        return;
      }

      const headers = jsonData[0];
      const rows = jsonData.slice(1);

      // 헤더 매핑 (다양한 형태의 헤더명 지원)
      const headerMapping = {
        "주문번호": "ORDER_NUMB",
        "구매자명": "BUYER_NAME",
        "구매자이름": "BUYER_NAME", 
        "구매자성명": "BUYER_NAME",
        "연락처": "PHONE",
        "수량": "QTY",
        "배송업체": "DELI_COMP",
        "택배사": "DELI_COMP",
        "주소": "ADDRESS",
        "배송주소": "ADDRESS",
        "배송지": "ADDRESS",
        "수령주소": "ADDRESS",
        "수령지": "ADDRESS",
        "받는주소": "ADDRESS",
        "수취주소": "ADDRESS",
        "송장번호": "DELI_NUMB"
      };

      // 필수 헤더 검증 (like 검색으로 변경)
      const requiredHeaders = ["주문번호", "구매자명"];
      const foundHeaders = headers.filter(header => 
        requiredHeaders.some(required => 
          (required === "주문번호" && header.includes("주문번호")) ||
          (required === "구매자명" && (
            header === "구매자" || header === "수취인" ||
            (header.includes("구매자") && (header.includes("이름") || header.includes("성함") || header.includes("명"))) ||
            (header.includes("수취인") && (header.includes("이름") || header.includes("성함") || header.includes("명")))
          ))
        )
      );
      
      if (foundHeaders.length < requiredHeaders.length) {
        $toast.error(`필수 헤더가 누락되었습니다. 필요한 헤더: ${requiredHeaders.join(", ")}`);
        return;
      }

      // 데이터 변환
      const mappedData = rows
        .map((row, rowIndex) => {
          const mappedRow = {};
          let hasValidData = false;

          headers.forEach((header, index) => {
            let fieldName = null;
            
            // 헤더 매핑 로직
            if (header.includes("주문번호")) fieldName = "ORDER_NUMB";
            else if (header === "구매자" || header === "수취인" ||
                    (header.includes("구매자") && (header.includes("이름") || header.includes("성함") || header.includes("명"))) ||
                    (header.includes("수취인") && (header.includes("이름") || header.includes("성함") || header.includes("명")))) {
              fieldName = "BUYER_NAME";
            }
            else if (header.includes("연락처")) fieldName = "PHONE";
            else if (header.includes("수량")) fieldName = "QTY";
            else if (header.includes("배송업체") || header.includes("택배사")) fieldName = "DELI_COMP";
            else if (header === "주소" || header.includes("배송주소") || header.includes("배송지") || 
                    header.includes("수령주소") || header.includes("수령지") || header.includes("받는주소") || 
                    header.includes("수취주소")) fieldName = "ADDRESS";
            else if (header.includes("송장")) fieldName = "DELI_NUMB";
            
            if (fieldName && row[index] !== undefined && row[index] !== "") {
              mappedRow[fieldName] = row[index].toString().trim();
              hasValidData = true;
            }
          });

          // 필수 필드 검증
          if (hasValidData) {
            const missingFields = [];
            if (!mappedRow.ORDER_NUMB) missingFields.push("주문번호");
            if (!mappedRow.BUYER_NAME) missingFields.push("구매자명");

            if (missingFields.length > 0) {
              console.warn(`${rowIndex + 2}행: 필수 필드 누락 - ${missingFields.join(", ")}`);
              return null;
            }
          }

          return hasValidData ? mappedRow : null;
        })
        .filter((row) => row !== null);

      if (mappedData.length === 0) {
        $toast.error("매핑 가능한 데이터가 없습니다. 엑셀 헤더명과 데이터를 확인해주세요.");
        return;
      }

      // 기존 데이터 업데이트 및 신규 데이터 추가 처리
      let updatedCount = 0;
      let newCount = 0;
      
      mappedData.forEach(newItem => {
        // 기존 데이터에서 주문번호 + 구매자명이 일치하는 항목 찾기
        const existingIndex = tblItems.value.findIndex(existingItem => 
          existingItem.ORDER_NUMB === newItem.ORDER_NUMB && 
          existingItem.BUYER_NAME === newItem.BUYER_NAME
        );
        
        if (existingIndex !== -1) {
          // 업데이트 메타데이터 추가
          newItem._metadata = {
            isUpdated: true,
            isNew: false,
            originalCreatedAt: tblItems.value[existingIndex].created_at || tblItems.value[existingIndex]._metadata?.originalCreatedAt,
            lastModifiedAt: new Date().toISOString()
          };
          // 기존 데이터 업데이트
          tblItems.value[existingIndex] = { ...tblItems.value[existingIndex], ...newItem };
          updatedCount++;
        } else {
          // 신규 메타데이터 추가
          newItem._metadata = {
            isUpdated: false,
            isNew: true,
            originalCreatedAt: new Date().toISOString(),
            lastModifiedAt: new Date().toISOString()
          };
          // 신규 데이터 추가
          tblItems.value.push(newItem);
          newCount++;
        }
      });
      
      pageObj.value.totalCnt = tblItems.value.length;

      // ag-grid 데이터 갱신
      if (gridApi.value) {
        gridApi.value.setGridOption("rowData", tblItems.value);
      }

      // 결과 메시지 표시
      if (updatedCount > 0 && newCount > 0) {
        $toast.success(`총 ${mappedData.length}건 처리완료 (업데이트: ${updatedCount}건, 신규추가: ${newCount}건)`);
      } else if (updatedCount > 0) {
        $toast.success(`${updatedCount}건의 기존 주문이 업데이트되었습니다.`);
      } else {
        $toast.success(`${newCount}건의 주문 내역이 추가되었습니다.`);
      }

      // 파일 입력 초기화
      event.target.value = "";

    } catch (error) {
      console.error("엑셀 파일 처리 중 오류:", error);
      $toast.error("엑셀 파일을 읽는 중 오류가 발생했습니다. 파일 형식을 확인해주세요.");
    }
  };

  reader.onerror = () => {
    $toast.error("파일을 읽는 중 오류가 발생했습니다.");
  };

  reader.readAsArrayBuffer(file);
}

const downloadExcel = () => {
  if (!tblItems.value || tblItems.value.length === 0) {
    $toast.warning("다운로드할 데이터가 없습니다.");
    return;
  }

  // 한글 헤더명 배열
  const headers = [
    "주문번호",
    "구매자명",
    "연락처",
    "주소",
    "구매수량",
    "배송업체",
    "송장번호",
  ];

  // 데이터를 엑셀 형식으로 변환
  const excelData = tblItems.value.map((item) => [
    item.ORDER_NUMB || "",
    item.BUYER_NAME || "",
    item.PHONE || "",
    item.ADDRESS || "",
    item.QTY || "",
    item.DELI_COMP || "",
    item.DELI_NUMB || "",
  ]);

  // 헤더를 첫 번째 행에 추가
  const worksheetData = [headers, ...excelData];

  // 워크시트 생성
  const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

  // 워크북 생성
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, "배송관리");

  // 파일명 생성 (현재 날짜 포함)
  const today = new Date();
  const dateString =
    today.getFullYear() +
    String(today.getMonth() + 1).padStart(2, "0") +
    String(today.getDate()).padStart(2, "0");
  const fileName = `배송관리_${dateString}.xlsx`;

  // 엑셀 파일 다운로드
  XLSX.writeFile(workbook, fileName);

  $toast.success("엑셀 파일이 다운로드되었습니다.");
};

const listLocated = () => {
  router.push({
    path: "/view/common/item",
  });
  useDtStore.boardInfo.itemType  = itemType;
};

// 인플루언서 이름 조회
const getInfName = async (contact_inf) => {
  try {
    // contact_inf 값이 있을 때만 API 호출
    if (!contact_inf) {
      return null;
    }

    const response = await useAxios().get(`/user/getInfName/${contact_inf}`);
    
    if (response.data?.status === 'success') {
      return response.data.data;
    } else {
      return null;
    }
  } catch (error) {
    return null;
  }
};

// 브랜드사 조회
const getBrdName = async (contact_brd) => {
  try {
    if (!contact_brd) {
      return null;
    }

    const response = await useAxios().get(`/user/getBrdName/${contact_brd}`);
    
    if (response.data?.status === 'success') {
      return response.data.data;
    } else {
      return null;
    }
  } catch (error) {
    return null;
  }
};

/*======================================================================
|    작성 시퀀스
| 1. 작성 컨펌
| 2. 버튼 체크
| 3. 등록시 -> 등록 API 호출
======================================================================*/

const fnBtnEvt = () => {
  //await editorContent();
  router.push({
      path: "/view/common/item/add",
    });
    useDtStore.boardInfo.itemType = itemType;
    useDtStore.boardInfo.pageType = "U";
};

const fnDelEvt = () => {
  let param = {
    id: pageId,
    title: pageId,
    content: "공동구매를 종료하시겠습니까?",
    yes: {
      text: "확인",
      isProc: true,
      event: "FN_DELETE",
      param: "",
    },
    no: {
      text: "취소",
      isProc: false,
    },
  };
  $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
};

const fnCloseEvt = () => {
  let param = {
    id: pageId,
    title: pageId,
    content: "마감하시겠습니까?",
    yes: {
      text: "확인",
      isProc: true,
      event: "FN_CLOSE",
      param: "",
    },
    no: {
      text: "취소",
      isProc: false,
    },
  };
  $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
};

const fnClose = () => {
  let req = {
    seq: useDtStore.boardInfo.seq,
  };

  useAxios()
    .post(`/item/close/${req.seq}`)
    .then((res) => {
      router.push("/view/common/item");
    })
    .catch((error) => {
    })
    .finally(() => {
    });
};

const fnDelete = () => {
  let req = {
    seq: useDtStore.boardInfo.seq,
  };

  useAxios()
    .post(`/item/delete/${req.seq}`)
    .then((res) => {
      router.push("/view/common/item");
    })
    .catch((error) => {
    })
    .finally(() => {
    });
};

const getOrderList = () => {
  let req = {
    MEMBER_TYPE: memberType,
    COMPANY_NUMBER: useAtStore.auth.companyNumber || "1",
    INF_SEQ: useAtStore.auth.seq,
    TYPE: itemType,
    ITEM_SEQ: useDtStore.boardInfo.seq // 특정 아이템의 주문만 조회하려면 추가
  };
  
  useAxios()
    .get(`/deli/orderList/${req.ITEM_SEQ}`, req)
    .then(async (res) => {
      // 특정 아이템의 주문만 필터링
      const filteredData = res.data.filter(item => item.ITEM_SEQ == useDtStore.boardInfo.seq);
      tblItems.value = filteredData;
      pageObj.value.totalCnt = filteredData.length;
    })
    .catch((error) => {
    })
    .finally(() => {
    });
};

// ag-grid 관련 함수들
const onGridReady = (params) => {
  gridApi.value = params.api;
};

const onCellValueChanged = (params) => {
  console.log('셀 값 변경:', params);
};

const chgPage = (page) => {
  pageObj.value.page = page;
  // 페이징이 필요한 경우 여기에 추가 로직 구현
};

const fnRegEvt = () => {
  let param = {
      id: pageId,
      title: pageId,
      content: "주문 내역을 저장하시겠습니까?",
      yes: {
        text: "확인",
        isProc: true,
        event: "FN_INSERT",
        param: "",
      },
      no: {
        text: "취소",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
};

const fnDetail = () => {
  let req = {
    seq: useDtStore.boardInfo.seq,
  };
  useAxios()
    .get(`/item/detail/${req.seq}`)
    .then(async (res) => {
      form.value.formValue1 = res.data.NAME;
      form.value.formValue8 = res.data.STATUS;
      form.value.formValue9 = res.data.SHOW_YN;
      form.value.formValue10 = res.data.ADD_INFO;
      form.value.order_link = res.data.ORDER_LINK;
      form.value.order_start_date = res.data.ORDER_START_DATE;
      form.value.order_end_date = res.data.ORDER_END_DATE;
      form.value.contact_inf = res.data.CONTACT_INF;
      form.value.contact_brd = res.data.CONTACT_BRD;
      
      // contact_inf 값이 있으면 인플루언서 이름 조회
      if (res.data.CONTACT_INF) {
        const infData = await getInfName(res.data.CONTACT_INF);
        if (infData) {
          form.value.contact_inf_display = infData.NICK_NAME 
            ? `${infData.NICK_NAME} (${infData.NAME})`
            : infData.NAME;
        }
      }
      if (res.data.CONTACT_BRD) {
        const brdData = await getBrdName(res.data.CONTACT_BRD);
        if (brdData) {
          form.value.contact_brd_display = brdData.NAME;
        }
      }
      getOrderList();
    })
    .catch((error) => {
    })
    .finally(() => {
    });
};

const fnInsert = async () => {
  try {
    const req = {
      item_seq: useDtStore.boardInfo.seq,
      inf_seq: form.value.contact_inf,
      orderList: tblItems.value || []
    };

    const response = await useAxios().post('/deli/reg', req);
    
    if (response.data) {
      const { message, updated_count, new_count, deleted_count, errors } = response.data;
      
      // 결과 메시지 표시
      const totalProcessed = updated_count + new_count + deleted_count;
      
      if (totalProcessed === 0) {
        $toast.success("주문 내역이 저장되었습니다.");
      } else {
        let message = `주문 내역이 저장되었습니다.`;
        
        $toast.success(message);
      }

      // 에러가 있으면 콘솔에 출력하고 토스트로 표시
      if (errors && errors.length > 0) {
        //console.warn('저장 중 일부 오류 발생:', errors);
        errors.forEach(error => {
          $toast.error(error);
        });
      }

      // 저장 후 페이지 새로고침
      window.location.reload();
    }
  } catch (error) {
    //console.error('주문 내역 저장 중 오류:', error);
    
    // 백엔드 에러 응답 확인
    if (error.response?.data) {
      const errorData = error.response.data;
      
      // 아무 작업 없이 저장 버튼 클릭 시
      if (errorData.messages?.error === "처리할 수 있는 데이터가 없습니다." || 
        errorData.message === "처리할 수 있는 데이터가 없습니다.") {
        $toast.warning("저장할 데이터가 없습니다.");
        return; // 새로고침하지 않음
      }
      
      // 다른 에러 메시지
      if (errorData.message) {
        $toast.error(errorData.message);
      } else if (errorData.messages?.error) {
        $toast.error(errorData.messages.error);
      } else {
        $toast.error('주문번호, 구매자명은 필수로 입력해야 합니다.');
      }
    } else {
      $toast.error('주문번호, 구매자명은 필수로 입력해야 합니다.');
    }
  }
};

/************************************************************************
|    팝업 이벤트버스 정의
************************************************************************/

$eventBus.off("FN_DELETE");
$eventBus.on("FN_DELETE", () => {
  fnDelete();
});

$eventBus.off("FN_CLOSE");
$eventBus.on("FN_CLOSE", () => {
  fnClose();
});

$eventBus.off("FN_INSERT");
$eventBus.on("FN_INSERT", () => {
  fnInsert();
});

$eventBus.off("FN_DELETE_SELECTED");
$eventBus.on("FN_DELETE_SELECTED", (selectedRows) => {
  fnDeleteSelected(selectedRows);
});

/************************************************************************
|    라이프사이클
************************************************************************/
onMounted(() => {
  pageType.value = "D";
  
  if(pageType.value == "I"){
    if(itemType == "G"){
      pageId.value = "공동구매 등록"
    } else {
      pageId.value = "제품 등록"
    }
  } else if(pageType.value == "U"){
    if(itemType == "G"){
      pageId.value = "공동구매 수정"
    } else {
      pageId.value = "제품 수정"
    }
  } else  {
    if(itemType == "G"){
      pageId.value = "공동구매 상세"
    } else {
      pageId.value = "제품 상세"
    }
  }

  //상세 등록 아니 리스트 클릭시 상세 정보로 접근
  if (pageType.value !== "I") {
    fnDetail();
  }
});

</script>

<style scoped>
.cursor-pointer {
  cursor: pointer;
}

.cursor-pointer:hover {
  background-color: #f5f5f5;
}

.order-link {
  color: #1976d2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s;
}

.order-link:hover {
  color: #1565c0;
  text-decoration: underline;
}

.no-link {
  color: #999;
  font-style: italic;
}
</style>