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

<template>
  <div>
    <div class="inner--headers">
      <h2>{{ pageId }}</h2>
      <div class="bread--crumbs--wrap">
        <span>홈</span>
        <span>{{ pageId }}</span>
      </div>
    </div>
    <div class="data--list--wrap">
      <div class="btn--actions--wrap">
        <div class="left--sections">
          <v-btn class="custom-btn btn-pink bdrs--10"><i class="ico"></i>개별 배송</v-btn>
          <v-btn class="custom-btn bdrs--10 btn-white" @click="deliLocated()"
            ><i class="ico"></i>공동구매 배송</v-btn
          >
        </div>
        <div class="right--sections"></div>
      </div>
      <div class="item--section">
        <div v-if="imgTemp" class="item--thumb">
          <img :src="imgTemp" alt="" />
        </div>
        <div v-else class="item--thumb min--240">NO IMAGE</div>
        <div class="item--info">
          <h2>{{ form.formValue1 }}</h2>
          <p>공급가: {{ Number(form.formValue2).toLocaleString() }}원</p>
          <p>판매가: {{ Number(form.formValue3).toLocaleString() }}원</p>
        </div>
      </div>
      <div class="btn--actions--wrap">
        <div class="left--sections"></div>
        <div class="right--sections">
          <div class="caption--wrap">
            <i class="ico">!</i>
            <div class="caption--box">
              - 주문일은 YYYY.MM.DD 혹은 YYYY-MM-DD 형태로 입력해 주세요.<br />
              - 구매자 정보 입력 후 저장 버튼을 꼭 클릭해 주세요.<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
          >
        </div>
      </div>
      <div class="tbl-wrapper">
        <div class="tbl-wrap">
          <!-- ag grid -->
          <ag-grid-vue
            style="width: 100%; height: calc(10 * 2.94rem)"
            class="ag-theme-quartz"
            :gridOptions="gridOptions"
            rowSelection="multiple"
            :rowData="tblItems"
            :paginationPageSize="pageObj.pageSize"
            :suppressPaginationPanel="true"
            @grid-ready="onGridReady"
          >
          </ag-grid-vue>

          <!-- 페이징 -->
          <div class="ag-grid-custom-pagenations">
            <pagination @chg_page="chgPage" :pageObj="pageObj"></pagination>
          </div>
        </div>
      </div>
      <div class="view-btm-btn">
        <div class="btn-l">
          <v-btn class="custom-btn btn-list" @click="listLocated"
            ><i class="ico"></i>목록</v-btn
          >
        </div>
        <div class="btn-r">
          <v-btn class="custom-btn btn-blue2" @click="fnRegEvt"
            ><i class="ico"></i>저장</v-btn
          >
        </div>
      </div>
    </div>

    <!-- 로딩 오버레이 -->
    <LoadingOverlay :is-loading="isLoading" :loading-message="loadingMessage" />
  </div>
</template>

<script setup>
  import "@vuepic/vue-datepicker/dist/main.css";
  import { AgGridVue } from "ag-grid-vue3";
  import * as XLSX from "xlsx";
  import pagination from "../components/common/pagination.vue";
  /************************************************************************
|    레이아웃
************************************************************************/
  definePageMeta({
    layout: "default",
  });
  /************************************************************************
|   PROPS
 ************************************************************************/
  const props = defineProps({
    propsData: {
      type: Object,
      default: () => {},
    },
  });
  /************************************************************************
|    스토어
 ************************************************************************/
  const useDtStore = useDetailStore();
  const useAtStore = useAuthStore();
  /************************************************************************
|    전역
 ************************************************************************/
  const memberType = useAtStore.auth.memberType;
  const memberSeq = useAtStore.auth.seq;
  const { $toast, $log, $dayjs, $eventBus } = useNuxtApp();
  const router = useRouter();
  const pageId = ref("배송 관리");
  const { isLoading, loadingMessage, withLoading } = useLoading();
  let pageObj = ref({
    page: 1, // 현재 페이지
    pageMaxNumSize: 10, // 페이지 숫자 최대 표현 개수
    pageSize: 10, // 테이블 조회 데이터 개수
    totalCnt: 0, // 전체 페이지
  });
  const imgTemp = ref("");
  const tblItems = ref([]); // stat 데이터
  const form = ref({
    formValue1: "",
    formValue2: "",
    formValue3: "",
    formValue4: "",
    formValue5: null,
    formValue6: "",
    formValue7: "",
    formValue8: "0",
    formValue8Arr: [
      { title: "판매중", value: "0" },
      { title: "품절", value: "1" },
    ],
    formValue9: "Y",
    formValue9Arr: [
      { title: "노출", value: "Y" },
      { title: "비노출", value: "N" },
    ],
    formValue10: "",
  });

  /* eslint-disable */
  /* prettier-ignore */

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

  const remToPx = () => parseFloat(getComputedStyle(document.documentElement).fontSize);
  const rowHeightRem = 2.65; // 원하는 rem 값
  const rowHeightPx = rowHeightRem * remToPx();
  const gridApi = shallowRef();

  // gridOption
  const gridOptions = {
    columnDefs: [
      { checkboxSelection: true, headerCheckboxSelection: true, width: 50 },
      {
        headerName: "No",
        valueGetter: (params) => params.api.getDisplayedRowCount() - params.node.rowIndex,
        sortable: false,
        width: 70,
      },
      {
        headerName: "인플루언서",
        field: "NICK_NAME",
        width: 150,
        hide: memberType == "INFLUENCER",
      },
      {
        headerName: "구매자명",
        field: "BUYER_NAME",
        width: 120,
        editable: true,
      },
      {
        headerName: "주소",
        field: "ADDRESS",
        editable: true,
      },
      {
        headerName: "연락처",
        field: "PHONE",
        width: 140,
        editable: true,
      },
      {
        headerName: "이메일",
        field: "EMAIL",
        editable: true,
      },
      {
        headerName: "구매수량",
        field: "QTY",
        width: 120,
        editable: true,
        cellRenderer: (params) => {
          return Number(params.value).toLocaleString();
        },
      },
      {
        headerName: "총구매금액",
        field: "TOTAL",
        editable: true,
        width: 120,
        cellRenderer: (params) => {
          return Number(params.value).toLocaleString();
        },
      },
      {
        headerName: "배송업체",
        field: "DELI_COMP",
        width: 100,
        editable: true,
      },
      {
        headerName: "송장번호",
        field: "DELI_NUMB",
        editable: true,
      },
      {
        headerName: "주문일",
        field: "ORDER_DATE",
        editable: true,
      },
    ],
    rowData: tblItems.value, // 테이블 데이터
    autoSizeStrategy: {
      type: "fitGridWidth", // width맞춤
    },
    suppressMovableColumns: true,
    headerHeight: rowHeightPx,
    rowHeight: rowHeightPx,
    pagination: true,
    suppressPaginationPanel: true, // 하단 default 페이징 컨트롤 숨김
    rowMultiSelectWithClick: true,
    rowSelection: {
      checkboxes: true,
      headerCheckbox: true,
      enableClickSelection: false,
      mode: "multiRow",
    },
  };

  /************************************************************************
|    함수(METHODS)
************************************************************************/
  const listLocated = () => {
    router.push({
      path: "/view/common/deli/",
    });
  };
  const onGridReady = (__PARAMS) => {
    gridApi.value = __PARAMS.api;
  };

  const chgPage = (__PAGE) => {
    pageObj.value.page = __PAGE;
    gridApi.value.paginationGoToPage(__PAGE - 1);
  };

  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 excelColumnMapping = {
    구매자명: "BUYER_NAME",
    주소: "ADDRESS",
    연락처: "PHONE",
    이메일: "EMAIL",
    구매수량: "QTY",
    총구매금액: "TOTAL",
    배송업체: "DELI_COMP",
    송장번호: "DELI_NUMB",
    주문일: "ORDER_DATE",
  };

  const addEmptyRow = () => {
    const newRow = {
      BUYER_NAME: "",
      ADDRESS: "",
      PHONE: "",
      EMAIL: "",
      QTY: "",
      TOTAL: "",
      DELI_COMP: "",
      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;
    
    // 사용자 타입에 따라 다른 업로드 로직 호출
    if (memberType === 'VENDOR') {
      await handleVendorExcelUpload(file);
    } else {
      await handleInfluencerExcelUpload(file);
    }
    
    // 파일 입력 초기화
    event.target.value = "";
  };

  const handleInfluencerExcelUpload = async (file) => {
    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" });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

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

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

        // 필수 헤더 검증
        const requiredHeaders = ["구매자명", "주소", "연락처"];
        const missingHeaders = requiredHeaders.filter(
          (header) => !headers.includes(header)
        );
        if (missingHeaders.length > 0) {
          $toast.error(`필수 헤더가 누락되었습니다: ${missingHeaders.join(", ")}`);
          return;
        }

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

            headers.forEach((header, index) => {
              const fieldName = excelColumnMapping[header];
              if (fieldName && row[index] !== undefined && row[index] !== "") {
                mappedRow[fieldName] = row[index];
                hasValidData = true;
              }
            });

            // 필수 필드 검증
            if (hasValidData) {
              const missingRequiredFields = [];
              if (!mappedRow.BUYER_NAME) missingRequiredFields.push("구매자명");
              if (!mappedRow.ADDRESS) missingRequiredFields.push("주소");
              if (!mappedRow.PHONE) missingRequiredFields.push("연락처");

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

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

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

        // 기존 주문 데이터와 매칭 검증
        const matchResults = await validateAndMatchOrders(mappedData);
        const { matchedData, unmatchedData, errors } = matchResults;

        // 매칭된 데이터만 그리드에 추가
        tblItems.value = [...matchedData];
        pageObj.value.totalCnt = tblItems.value.length;

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

        // 결과에 따른 사용자 피드백
        if (matchedData.length > 0 && unmatchedData.length === 0) {
          $toast.success(
            `${matchedData.length}건의 데이터가 성공적으로 업로드되었습니다.`
          );
        } else if (matchedData.length > 0 && unmatchedData.length > 0) {
          $toast.warning(
            `${matchedData.length}건 업로드 완료, ${unmatchedData.length}건 매칭 실패`
          );
          showUnmatchedDataModal(unmatchedData, errors);
        } else {
          $toast.error(
            "매칭된 주문 데이터가 없습니다. 구매자명과 연락처를 확인해주세요."
          );
          showUnmatchedDataModal(unmatchedData, errors);
        }
      } catch (error) {
        console.error("엑셀 파일 처리 중 오류:", error);
        $toast.error(
          "엑셀 파일을 읽는 중 오류가 발생했습니다. 파일 형식을 확인해주세요."
        );
      }
    };

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

    reader.readAsArrayBuffer(file);
  };

  const handleVendorExcelUpload = async (file) => {
    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);
      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);
      return;
    }

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

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

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

        // 벤더사용 필수 헤더 검증
        const requiredHeaders = ["구매자명", "연락처", "배송업체", "송장번호"];
        const missingHeaders = requiredHeaders.filter(
          (header) => !headers.includes(header)
        );

        if (missingHeaders.length > 0) {
          $toast.error(`필수 헤더가 누락되었습니다: ${missingHeaders.join(", ")}`);
          return;
        }

        // 벤더사용 컬럼 매핑
        const vendorColumnMapping = {
          "구매자명": "BUYER_NAME",
          "연락처": "PHONE", 
          "배송업체": "DELI_COMP",
          "송장번호": "DELI_NUMB"
        };

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

            headers.forEach((header, index) => {
              const fieldName = vendorColumnMapping[header];
              if (fieldName && row[index] !== undefined && row[index] !== "") {
                mappedRow[fieldName] = String(row[index]).trim();
                hasValidData = true;
              }
            });

            // 필수 필드 검증
            if (hasValidData) {
              const missingRequiredFields = [];
              if (!mappedRow.BUYER_NAME) missingRequiredFields.push("구매자명");
              if (!mappedRow.PHONE) missingRequiredFields.push("연락처");
              if (!mappedRow.DELI_COMP) missingRequiredFields.push("배송업체");
              if (!mappedRow.DELI_NUMB) missingRequiredFields.push("송장번호");

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

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

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

        // 기존 데이터와 매칭하여 업데이트
        await updateDeliveryInfo(uploadData);

      } catch (error) {
        console.error("엑셀 파일 처리 중 오류:", error);
        errorHandler.handleApiError(error, "엑셀 파일 처리");
      }
    };

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

    reader.readAsArrayBuffer(file);
  };

  const updateDeliveryInfo = async (uploadData) => {
    let matchedCount = 0;
    let unmatchedCount = 0;
    const unmatchedItems = [];

    // 기존 데이터와 매칭
    const updatedItems = tblItems.value.map(existingItem => {
      // 구매자명과 연락처로 매칭 (공백 제거 후 비교)
      const matchedUpload = uploadData.find(upload => 
        upload.BUYER_NAME.replace(/\s/g, '') === existingItem.BUYER_NAME.replace(/\s/g, '') && 
        upload.PHONE.replace(/\s/g, '').replace(/-/g, '') === existingItem.PHONE.replace(/\s/g, '').replace(/-/g, '')
      );

      if (matchedUpload) {
        matchedCount++;
        // 배송업체와 송장번호만 업데이트
        return {
          ...existingItem,
          DELI_COMP: matchedUpload.DELI_COMP,
          DELI_NUMB: matchedUpload.DELI_NUMB
        };
      }

      return existingItem;
    });

    // 매칭되지 않은 업로드 데이터 확인
    uploadData.forEach(upload => {
      const matched = tblItems.value.find(existing => 
        existing.BUYER_NAME.replace(/\s/g, '') === upload.BUYER_NAME.replace(/\s/g, '') && 
        existing.PHONE.replace(/\s/g, '').replace(/-/g, '') === upload.PHONE.replace(/\s/g, '').replace(/-/g, '')
      );
      
      if (!matched) {
        unmatchedCount++;
        unmatchedItems.push({
          buyerName: upload.BUYER_NAME,
          phone: upload.PHONE
        });
      }
    });

    // 업데이트된 데이터로 테이블 갱신
    tblItems.value = updatedItems;
    
    // ag-grid 데이터 갱신
    if (gridApi.value) {
      gridApi.value.setGridOption("rowData", tblItems.value);
    }

    // 결과 메시지 표시
    if (matchedCount > 0 && unmatchedCount === 0) {
      $toast.success(`${matchedCount}건의 배송정보가 성공적으로 업데이트되었습니다.`);
    } else if (matchedCount > 0 && unmatchedCount > 0) {
      $toast.warning(
        `${matchedCount}건 업데이트 완료, ${unmatchedCount}건 매칭 실패\n매칭 실패 항목: ${unmatchedItems.map(item => `${item.buyerName}(${item.phone})`).join(", ")}`
      );
    } else {
      $toast.error("매칭되는 주문 정보가 없습니다. 구매자명과 연락처를 확인해주세요.");
    }
  };

  const validateAndMatchOrders = async (uploadData) => {
    try {
      const response = await useAxios().post("/deli/validateOrders", {
        item_seq: useDtStore.boardInfo.seq,
        uploadData: uploadData,
      });

      return {
        matchedData: response.data.matched || [],
        unmatchedData: response.data.unmatched || [],
        errors: response.data.errors || [],
      };
    } catch (error) {
      console.error("주문 매칭 검증 중 오류:", error);
      // API 오류 시 클라이언트에서 기본 매칭 수행
      return performClientSideMatching(uploadData);
    }
  };

  const performClientSideMatching = (uploadData) => {
    // 클라이언트 사이드 매칭 로직 (백업용)
    const matchedData = [];
    const unmatchedData = [];
    const errors = [];

    uploadData.forEach((item, index) => {
      // 기본 검증: 구매자명과 연락처가 있는지 확인
      if (!item.BUYER_NAME || !item.PHONE) {
        unmatchedData.push(item);
        errors.push(`${index + 1}행: 구매자명 또는 연락처 누락`);
      } else {
        matchedData.push(item);
      }
    });

    return { matchedData, unmatchedData, errors };
  };

  const showUnmatchedDataModal = (unmatchedData, errors) => {
    const errorDetails =
      errors.length > 0 ? errors.join("\n") : "매칭 실패 데이터가 있습니다.";

    let param = {
      id: "unmatchedData",
      title: "업로드 실패 항목",
      content: `다음 ${unmatchedData.length}건의 데이터를 처리할 수 없습니다:\n\n${errorDetails}\n\n데이터를 수정 후 다시 업로드해주세요.`,
      yes: {
        text: "확인",
        isProc: false,
      },
    };
    $eventBus.emit("OPEN_CONFIRM_POP_UP", param);
  };

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

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

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

    // 헤더를 첫 번째 행에 추가
    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 fnDetail = () => {
    let req = {
      seq: useDtStore.boardInfo.seq,
    };
    let req2 = {
      item_seq: useDtStore.boardInfo.seq,
    };
    
    // 인플루언서일 경우 본인의 inf_seq값 추가
    if (memberType === 'INFLUENCER') {
      req2.inf_seq = memberSeq;
    }
    useAxios()
      .get(`/item/detail/${req.seq}`)
      .then((res) => {
        form.value.formValue1 = res.data.NAME;
        form.value.formValue2 = res.data.PRICE1;
        form.value.formValue3 = res.data.PRICE2;
        form.value.formValue4 = res.data.DELI_FEE;
        form.value.formValue5 = res.data.THUMB_FILE;
        form.value.formValue6 = res.data.SUB_TITLE;
        form.value.formValue8 = res.data.STATUS;
        form.value.formValue9 = res.data.SHOW_YN;
        form.value.formValue10 = res.data.ADD_INFO;
        //썸네일 파일이 있으면 넣어줌
        if (form.value.formValue5) {
          imgTemp.value = `https://shopdeli.mycafe24.com/writable/uploads/item/thumb/${form.value.formValue5}`;
        }
      })
      .catch((error) => {
        $toast.error("제품 정보를 불러오는 중 오류가 발생했습니다.");
      })
      .finally(() => {});
    // 기 저장된 구매자명 리스트
    // 제품 seq, 인플루언서 seq가 일치하는 리스트만
    useAxios()
      .post(`/deli/list`, req2)
      .then((res) => {
        console.log(res.data);
        tblItems.value = res.data;
        pageObj.value.totalCnt = tblItems.value.length;
      })
      .catch((error) => {
        $toast.error("제품 정보를 불러오는 중 오류가 발생했습니다.");
      })
      .finally(() => {});
  };

  const fnInsert = async () => {
    // 벤더사인 경우 배송정보 업데이트 API 사용
    if (memberType === 'VENDOR') {
      await fnVendorUpdate();
      return;
    }

    // 인플루언서인 경우 기존 로직 사용
    const deliveryData = {
      item_seq: useDtStore.boardInfo.seq,
      inf_seq: memberSeq,
      deliveryList: tblItems.value.map((item) => ({
        buyerName: item.BUYER_NAME,
        address: item.ADDRESS,
        phone: item.PHONE,
        email: item.EMAIL,
        qty: item.QTY,
        total: item.TOTAL,
        deliComp: item.DELI_COMP || '',
        deliNumb: item.DELI_NUMB ? String(item.DELI_NUMB) : '',
        orderDate: item.ORDER_DATE.replaceAll(".", "-"),
      })),
    };

    await withLoading(async () => {
      return useAxios().post("/deli/reg", deliveryData);
    }, "배송 데이터를 저장하는 중...")
      .then((res) => {
        // 송장번호가 등록된 경우 상태를 COMPLETE로 업데이트
        const hasTrackingNumbers = deliveryData.deliveryList.some(
          (item) => item.deliNumb && typeof item.deliNumb === 'string' && item.deliNumb.trim() !== ""
        );

        if (hasTrackingNumbers) {
          // 상태 업데이트 API 호출
          const statusUpdateData = {
            item_seq: useDtStore.boardInfo.seq,
            status: "COMPLETE",
          };

          useAxios()
            .post("/deli/updateStatus", statusUpdateData)
            .then(() => {
              $toast.success(
                "배송 데이터가 성공적으로 저장되었습니다. 상태가 완료로 변경되었습니다."
              );

              // WebSocket을 통해 상태 변경 이벤트 발행
              const { $socket } = useNuxtApp();
              if ($socket) {
                $socket.emit("deliveryStatusUpdate", {
                  itemId: useDtStore.boardInfo.seq,
                  itemName: form.value.formValue1,
                  status: "COMPLETE",
                  updatedBy: memberSeq,
                  updatedAt: new Date().toISOString(),
                });
              }
            })
            .catch(() => {
              $toast.success("배송 데이터가 저장되었으나 상태 업데이트에 실패했습니다.");
            });
        } else {
          $toast.success("배송 데이터가 성공적으로 저장되었습니다.");
        }

        // 저장 완료 후 배송 관리 리스트로 이동하며 업로드 성공 상태 전달
        router.push({
          path: "/view/common/deli",
          query: {
            uploadStatus: "success",
            itemId: useDtStore.boardInfo.seq,
            recordCount: tblItems.value.length,
            statusUpdated: hasTrackingNumbers ? "true" : "false",
          },
        });
      })
      .catch((error) => {
        const errorHandler = useErrorHandler();
        errorHandler.handleApiError(error, "배송 데이터 저장");
      })
      .finally(() => {});
  };

  const fnVendorUpdate = async () => {
    // 배송정보가 있는 항목만 추출 (구매자명과 연락처는 필수)
    const deliveryUpdates = tblItems.value
      .filter(item => item.BUYER_NAME && item.PHONE)
      .map(item => ({
        buyerName: item.BUYER_NAME,
        phone: item.PHONE,
        deliComp: item.DELI_COMP || '',
        deliNumb: item.DELI_NUMB ? String(item.DELI_NUMB) : ''
      }));

    if (deliveryUpdates.length === 0) {
      $toast.error("업데이트할 배송정보가 없습니다.");
      return;
    }

    const updateData = {
      item_seq: useDtStore.boardInfo.seq,
      deliveryUpdates: deliveryUpdates
    };

    await withLoading(async () => {
      return useAxios().post("/deli/updateDeliveryInfo", updateData);
    }, "배송정보를 업데이트하는 중...")
      .then((res) => {
        // 송장번호가 등록된 경우 상태를 COMPLETE로 업데이트
        const hasTrackingNumbers = deliveryUpdates.some(
          (item) => item.deliNumb && typeof item.deliNumb === 'string' && item.deliNumb.trim() !== ""
        );

        if (hasTrackingNumbers) {
          // 상태 업데이트 API 호출
          const statusUpdateData = {
            item_seq: useDtStore.boardInfo.seq,
            status: "COMPLETE",
          };

          useAxios()
            .post("/deli/updateStatus", statusUpdateData)
            .then(() => {
              $toast.success(
                "배송정보가 업데이트되고 상태가 완료로 변경되었습니다."
              );
            })
            .catch((error) => {
              console.error("상태 업데이트 실패:", error);
              $toast.warning("배송정보는 업데이트되었으나 상태 변경에 실패했습니다.");
            });
        } else {
          $toast.success(`${res.data.updated_count}건의 배송정보가 업데이트되었습니다.`);
        }

        // 배송 관리 목록으로 이동
        router.push({
          path: "/view/common/deli",
          query: {
            uploadStatus: "success",
            itemId: useDtStore.boardInfo.seq,
            recordCount: res.data.updated_count,
            statusUpdated: hasTrackingNumbers ? "true" : "false",
          },
        });
      })
      .catch((error) => {
        const errorHandler = useErrorHandler();
        errorHandler.handleApiError(error, "배송정보 업데이트");
      });
  };

  /************************************************************************
|    팝업 이벤트버스 정의
************************************************************************/
  $eventBus.off("FN_INSERT");
  $eventBus.on("FN_INSERT", () => {
    fnInsert();
  });

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

  watch(
    () => props,
    () => {
      searchObj.value = props.propsData;
      fnGetStat();
    },
    { deep: true }
  );

  onMounted(() => {
    fnDetail();
  });
</script>