/*
 * @OVERVIEW 우측에 나타나는 테이블 생성 객체
 * @PARAMS   테이블 필드값, vue객체
 * @FUNCTION 테이블 생성, 데이터 조회, 행 추가, 데이터 등록, 테이블 데이터에서 폼 데이터로 랜딩
 */

class SimpleTable {
  constructor(com, fields, vueForm) {

    this.com = com;
    this.vueform = vueForm;
    this.compactData = vueForm.compactData[com];


    // ajax
    this.ajaxUrl = "./reg_prod_result.ajax.php";
    this.getMode = this.compactData["getMode"];
    this.putMode = this.compactData["putMode"];

    // data
    this.field = fields;
    this.formData = this.compactData["data"];
    this.addData = this.compactData["addData"];

    // element
    this.container = document.querySelector(`#${com}`);
    this.table = this.container?.querySelector(`.hy-table`);
    this.putBtn = this.container?.querySelector(".put-btn");
    this.inspBtn = this.container?.querySelector(".insp-btn");

    // addCode
    this.addCode = "";

    // breaker (flag)
    this.save_breaker = false;
    this.inspbreaker  = false;

    // listener init
    this.init(); // 리스너 초기화
  }

  // 데이터 조회
  getMainList(compactData) {

    return ajax_json({
      url: this.ajaxUrl,
      data: {
        ...compactData["data"],
        mode: this.getMode,
      },
      success: (data) => {
        if (data.code) {
          // 테이블 데이터 지우기
          this.tbList.clearData();
          // 테이블 데이터 세팅
          this.tbList.setData(data.data);

          // 가동시에 FACLT_OPER_NO 필요
          if (data.data[data.data.length - 1]?.FACLT_OPER_NO) {
            this.addCode = data.data[data.data.length - 1].FACLT_OPER_NO;
          }

          // 작업자, 설비 테이블의 경우 현재 작업자, 현재 설비에 매칭해주기(row select, 해당 행 위치로 이동)
          if(this.com === 'isWorker'){
            this.vueform.callEMP();
          }else if(this.com === 'isFacility'){
            this.vueform.callFACLT();
          }
        }
      },
      error: (request, status, error) => {
        kuls_alert(error.message);
      },
    });
  }

  /* 
   * OVERVIEW : 행추가(DEF_QTY: "", PRD_QTY: "" -> 수량 데이터 초기화)
   * 불량실적 등록, 양품실적 등록 테이블에만 사용된다.
   * PARAMS : vue 클래스 내에서 정의한 각 테이블의 저장될 데이터
   */
  addRow(addData) {
    this.tbList.addRow({ ...addData, DEF_QTY: "", PRD_QTY: "" }, true);
    this.save_breaker = false;
    window.ttt = this;
  }

  /*
   * 검사측정 테이블 데이터 저장
   * this.vueform.formData : 객체의 위치값으로 그때그때 바뀐 값을 적용시킨다. form에 직접적으로 영향을 준다.(최신값)
   * this.compactData : vue데이터의 compactData 객체의 해당 테이블에 해당하는 객체이다. form과 연동되는 값이 아니다. (고정값)
   * this.inspbreaker : 중복저장 방지 플래그
   */
  putInsp(){
    if(this.inspbreaker) { return false; }

    // this.vueform.formData 으로 가져오는 데이터는 객체의 위치값으로 그때그때 바뀐 값을 적용시킨다.
    let postdata = {
      mode: "putInsp",
      wholeData:JSON.stringify(this.tbList.getData().filter((row) => row._STATUS_)),
      EMP_NO : this.vueform.formData.EMP_NO
    };

    this.inspbreaker = true;

    ajax_json({
      url: this.ajaxUrl,
      data: postdata,
      success: (data) => {
        if (data.code) {
          kuls_success("저장되었습니다.");
          this.getMainList(this.compactData);

        }
        this.inspbreaker = false;
      },
      error: (request, status, error) => {
        kuls_alert(error.message);
      },
      complete: function () {

      },
    });
  }

  /*
   * 데이터 저장
   * this.vueform.formData : 객체의 위치값으로 그때그때 바뀐 값을 적용시킨다. form에 직접적으로 영향을 준다.(최신값)
   * this.compactData : vue데이터의 compactData 객체의 해당 테이블에 해당하는 객체이다. form과 연동되는 값이 아니다. (고정값)
   * this.save_breaker : 중복저장 방지 플래그
   */
  putData() {
    // 현재 선택한 설비코드
    this.formData.FACLT_CD = this.vueform.formData.FACLT_CD;

    // 현재 선택한 작업자
    const EMP_NO = this.vueform.formData.EMP_NO;

    // 행은 하나씩 저장된다.
    const tableData = this.tbList.getData().filter((row) => row._STATUS_)[0];
    const addData = this.vueform.compactData[this.com].addData;

    // 설비고장으로 가동을 중지할때
    const isFE = tableData?.STOP_CD === "FE";

    // 가동, 가동중지, 작업완료
    const isRun = this.com === "isRun";
    const isRunTime = this.vueform.formData.OPER_ST_TM;

    // this.formData = comapactData의 data
    const finData = isRun
      ? {
          ...tableData,
          ...this.formData,
          ...addData,
          FACLT_OPER_NO: this.addCode,
          EMP_NO: EMP_NO,
        }
      : {
          ...this.formData,
          ...addData,
          ...tableData,
          EMP_NO: EMP_NO,
        };

    if( !this.save_breaker ){
      if ( isRun || (!isRun && isRunTime) ) {
        const postData = {
          mode: this.putMode,
          reqdata: JSON.stringify([{ ...finData }]),
        };

        /*
         * 1. 테이블 데이터 저장
         * 2. 폼데이터 다시 불러오기
         * 3. 고장 코드 입력시에 설비 고장 등록하기
         */

        this.save_breaker = true;

        ajax_json({
          url: this.ajaxUrl,
          data: postData,
          success: async (data) => {
            if (data.code) {
              kuls_success("저장되었습니다.");

              // form data 재부팅
              // 좌측 폼에 들어갈 데이터 및 버튼 제어용 데이터 조회
              await ajax_json({
                url: "./reg_prod_result.ajax.php",
                data: {
                  mode: "getFormData",
                  OP_SEQ: this.vueform.formData["OP_SEQ"],
                  WO_NO: this.vueform.formData["WO_NO"],
                  WO_SEQ: this.vueform.formData["WO_SEQ"],
                },
                success: async (data) => {
                  if (data.code) {
                    const time = data.time;
                    this.vueform.formData = {
                      ...this.vueform.formData,
                      ...data.data[data.data.length - 1],

                      EMP_NO: this.vueform.formData.EMP_NO,
                      EMP_NM: this.vueform.formData.EMP_NM,

                      // 최소시작시간, 최근 종료시간
                      OPER_ST_TM: time[time.length - 1]?.OPER_ST_TM,
                      OPER_ED_TM:
                        time[time.length - 1] &&
                        time[0]["STOP_CD"] == "ED"
                          ? time[time.length - 1].OPER_ED_TM
                          : "",
                    };


                    // 데이터 조회 -> 빈행추가
                    await this.getMainList(this.compactData).then( async () => {

                      if (this.addData._STATUS_ === "I") {
                        // 입력란 초기화
                        this.vueform.DEF_CD_val = "";
                        this.vueform.STOP_CD_val = "";

                        // 행 초기화
                        this.addData.DEF_CD = "";
                        this.addData.STOP_CD = "";
                      }

                      // 가동, 중지, 작업 완료가 아니면, 모든 테이블에 행추가
                      if (this.com !== "isRun") {
                        this.addRow(this.addData);

                        // 중지, 작업 완료 시에는 작업자 테이블, 설비테이블 나타내기
                      } else if (this.vueform.formData["RUNSTOP_GB"] !== "R") {
                        
                        this.vueform.isComponent["isRun"] = false;
                        this.vueform.showComponent("isFacility");
                        this.vueform.showComponent("isWorker");

                        // <-- 고장 코드 입력시에 고장등록하기
                        if (isFE) {
                          await ajax_json({
                            url: "./reg_prod_result.ajax.php",
                            data: {
                              mode: "putFacilityDef",
                              FACLT_CD: this.vueform.formData["FACLT_CD"],
                              EMP_NO: this.vueform.formData["EMP_NO"],
                            },
                            success: (data) => {
                              if (data.code) {
                                kuls_success("저장되었습니다.");
                              } else {
                                // kuls_alert(data.mesg)
                              }
                            },
                            error: (req, stats, err) => {
                              kuls_alert(err.message);
                            },
                          });
                        }
                        // 고장 코드 입력시에 고장등록하기 -->
                      } else {
                        this.vueform.showComponent("isOperHst");
                      }
                    });
                  } else {
                    kuls_alert(data.mesg);
                  }
                },
                error: (request, status, error) => {
                  kuls_alert(error.message);
                },
              });
            } else {
              kuls_alert(data.mesg);
              this.save_breaker = false;
              
              // 비가동 상태일때
              if (this.com === "isRun" && !this.vueform.formData["FACLT_CD"]) {
                this.vueform.isComponent[this.com] = false;

                // 공정별 가동이력 -> 설비선택 테이블, 작업자별 가동이력 -> 작업자 선택 테이블로 교체된다.
                this.vueform.showComponent("isFacility");
                this.vueform.showComponent("isWorker");
              }
            }
          },
          error: (request, status, error) => {
            kuls_alert(error.message);
          },
          complete: () => {
          },
        });

        // 공정별 오더현황 데이터 다시 불러오기 (팝업 닫았을때, 최신 데이터 반영하기 위함)
        Tb_order.getMainList();
        Tb_preview.getPreviewList({});
      } else {
        kuls_alert("공정시작 이후에만 입력할 수 있습니다.");
      }
    }
  }

  cellEdited(cell) {
    cell.getData()._STATUS_ = cell.getData()._STATUS_ || "U";
  }
  // 초기 시작(테이블 생성 및 소기 데이터 랜딩)
  init() {
    const commonFieldData = {
      headerSort: true,
      vertAlign: "middle",
      hozAlign: "center",
      resizable: "header", //Resize 는 헤더에서만 가능
      headerHozAlign: "center", //헤더 정렬
      headerSortTristate: true, //데이터 정렬 => 정/역/초기화
    };

    this.tbList = new Tabulator(this.table, {
      layout: "fitColumns",
      data: [],
      columns: this.field,
      columnDefaults: commonFieldData,
      headerSortElement: "<i class='bi'></i>", //정렬 아이콘
    });

    this.tbList.on("tableBuilt", () => {
      // 데이터 가져오기 및 세팅
      this.getMainList(this.compactData).then(() => {
        // addData에 값이 있을때(showcomponent 함수가 실행되었을때) 불량, 양품 실적, 비가동 행추가
        if (JSON.stringify(this.addData) !== "{}" && !(this.vueform.formData.RUNSTOP_GB === "R" && this.com === "isRun")) {
          this.addRow(this.addData);
        }
      });
    });

    // 검사측정치 입력시에만 status U로 바꾸기.
    this.tbList.on("cellEdited", (cell) => {
      switch (this.com) {
        case "isInsp":
          this.cellEdited && this.cellEdited(cell);
          break;
        }

    });

    /* 
     * 행클릭 이벤트
     * 설비, 작업자 행 클릭 이벤트
     * 한 행씩 선택 가능
     */
    this.tbList.on("rowClick", (e, tgt) => {
      switch (this.com) {
        case "isFacility":
          if (tgt.isSelected()) {
            // 설비 선택 취소
            tgt.deselect();
            this.vueform.formData["FACLT_NM"] = "";
            this.vueform.formData["FACLT_CD"] = "";

          } else{
            // 설비 선택
            this.tbList.deselectRow();
            tgt.select();

            this.vueform.formData["FACLT_CD"] = tgt.getData()["FACLT_CD"] || this.formData["FACLT_CD"];
            this.vueform.formData["FACLT_NM"] = tgt.getData()["FACLT_NM"] || this.formData["FACLT_NM"];
          }
          break;
        case "isWorker":
          if (!tgt.isSelected()) {
            // 작업자 선택
            this.tbList.deselectRow();
            tgt.select();

            this.vueform.formData["EMP_NO"] = tgt.getData()["EMP_NO"] || this.formData["EMP_NO"];
            this.vueform.formData["EMP_NM"] = tgt.getData()["EMP_NM"] || this.formData["EMP_NM"];
          }
          break;

      }
    });

    // 저장
    this.putBtn?.addEventListener("click", (e) => {
      e.preventDefault();
      this.putData();
    });

    // 검사실적 측정치 저장
    this.inspBtn?.addEventListener("click", (e) => {
      e.preventDefault();
      this.putInsp();
    });
  }

}

/*
 * @OVERVIEW 팝업 생성 객체 (sts_order_prod.js에서 인스턴스 생성)
 * @PARAMS   오더현황 데이터의 일부 데이터
 * @FUNCTION 팝업 생성 및 제어
 */
class FieldPop {
  constructor(bindingData) {
    this.bindingData = bindingData; // 오더현황의 일부 데이터( WO_NO, WO_SEQ, OP_SEQ )
  }
  endTimecheck(time) {
    let data = {};

    // 첫 시작시간
    data.OPER_ST_TM = time[time.length - 1]?.OPER_ST_TM || "";

    // 마지막 가동 상태가 작업완료일때 최근종료시간
    if (time[0]?.STOP_CD == "ED") {
      data.OPER_ED_TM = time[time.length - 1]?.OPER_ED_TM || "";
    }

    return data;
  }
  init() {
    vnLoad("", "./reg_prod_result.php", "", (loadHtml) => {
      this.modal = kuls_modal(loadHtml, { dontclose: true });
      

      // 좌측 폼에 들어갈 데이터 및 버튼 제어용 데이터 조회
      ajax_json({
        url: "./reg_prod_result.ajax.php",
        data: {
          mode: "getFormData",
          ...this.bindingData,
        },
        success: (data) => {
          if (data.code) {
            // 팝업 생성
            this.createVueform(
              data.data,
              this.modal,
              this.endTimecheck(data.time)
            );
          } else {
            kuls_alert(data.mesg);
          }
        },
        error: (request, status, error) => {
          kuls_alert(error.message);
        },
      });
    });
  }

  // 팝업생성 함수 (조회한 초기 데이터, 모달)
  createVueform(bindingData, modal, time) {

    const vueForm = createApp({
      data() {
        return {
          // 기존 데이터 렌딩 및 저장되어야할 데이터 형식 만들어 놓기
          formData: {
            ...time,
            ...bindingData[0],
          },
          // SimpleTable 들어갈 기본 데이터(for getting and putting)
          compactData: {
            isWorker: {},
            isOperHst: {},
            isFacility: {},
            isProd: {},
            isDef: {},
            isInsp: {},
            isRun: {},
            isNoRun: {},
            isFacltBreak: {},
            isDefHst: {},
          },

          // 테이블 객체가 저장됨.
          table: {},

          // vue에서 각 페이지당 필요한 함수 저장 변수 ex) 데이터 업데이트
          callBack: function () {},

          // 버튼을 통한 화면 전환에 필요한 변수들
          isComponent: {
            isDefHst: false,
            // isWorker: false,
            isFacility: false,
            isFacltBreak: false,
            isRun: false,
            isNoRun: false,
            isProd: false,
            isDef: false,
            isInsp: false,
            isDone: false,
          },

          // 상위 버튼 내용 (텍스트 및 id값)
          tabs1: ["작업표준서 조회", "도면 조회"], //popup 띄우기

          tabs2: [
            {
              id: "isDefHst",
              name: "과거불량이력 조회",
            },
            {
              id: "isFacltBreak",
              name: "설비 고장등록",
            },
            {
              id: "isRun",
              name: "공정시작",
            },
            {
              id: "isNoRun",
              name: "공정중지",
            },
            {
              id: "isDone",
              name: "작업완료",
            },
          ],

          activeTab: "", //현제 화면

          checkEvent: "", //테이블이 이미 만들어졌는지 중복 체크용 변수

          // 오늘, 시작시간, 종료 시간
          date: "",
          wrkTime: "",

          // ajax mode
          getMode: "",

          putMode: "",

          delMode: "",


          // 비가동 사유
          STOP_CD: varsSTOP_CD,
          STOP_CD_val: "",

          // 불량 사유
          DEF_CD: varsDEF_CD,
          DEF_CD_val: "",

          // 상태값
          OP_STATUS: varsOP_STATUS,

          // 수량
          prdQty: 0,
          defQty: 0,
          limitQty: 0,

          // 타블레이터 필드 값
          tableField: {
            isDefHst: [
              { field: "DEF_NO", formatter: "rownum", title: "순번", width: 40, },
              { field: "DEF_NM", title: "불량원인", width: "30%" },
              { field: "DEF_TOT", title: "불량수량", width: "30%",
                formatter: "money",
                formatterParams: { decimal: ".", precision: 0 },
                bottomCalc: "sum",
                bottomCalcFormatter: "money",
                bottomCalcFormatterParams: { decimal: ".", precision: 0 },
              },
              { field: "DEF_PRICE", title: "불량단가", width: "30%" },
            ],

            isWorker: [
              { field: "", formatter: "rownum", title: "순번", width: 40 },
              { field: "EMP_NO", title: "사번", minWidth: 100, width: "30%" },
              { field: "EMP_NM", title: "성명", minWidth: 100, width: "40%" },
            ],
            
            isOperHst: [
              { field: "WORKER_WRK_NO", formatter: "rownum",    title: "순번", width: 40 },
              { field: "WORK_EMP_NO", title: "사번",    width: "20%" },
              { field: "EMP_NM",      title: "성명", width: "20%" },
              { field: "ST_TM",       title: "시작시간", width: "20%" },
              { field: "ED_TM",       title: "종료시간", width: "20%" },
            ],

            isFacility: [
              { field: "", formatter: "rownum", title: "순번", width: 40 },
              { field: "WRK_TEAM",   title: "설비그룹", minWidth: 80,  width: "14%",},
              { field: "FACLT_CD",   title: "설비코드", minWidth: 80,  width: "14%",},
              { field: "FACLT_NM",   title: "설비명",   minWidth: 150, width: "26%", },
              { field: "RUNSTOP_GB", title: "상태",     minWidth: 80,  width: "14%",
                formatter: tb_common_funtions.formatterSelect,
                formatterParams: { values: varsRUNSTOP_GB },
              },
              {
                field: "OPER_ST_TM",
                title: "가동<br>시작시간",
                minWidth: 120,
                width: "23%",
              },
            ],

            isRun: [
              { field: "FACLT_OPER_NO", formatter: "rownum", title: "순번", width: 40, },
              { field: "WO_NO", title: "생산 오더", minWidth: 100, width: "18%", },
              { field: "RUNSTOP_GB", title: "구분", minWidth: 80, width: "15%",
                formatter: tb_common_funtions.formatterSelect,
                formatterParams: { values: varsRUNSTOP_GB },
              },
              { field: "STOP_CD", title: "비가동 사유", minWidth: 130, width: "18%",
                formatter: tb_common_funtions.formatterSelect,
                formatterParams: { values: varsSTOP_CD },
                editor: "list",
                editable: (cell) => {
                  return !cell.getData().OPER_ED_TM && cell.getRow().getPosition() == 1;
                },
                editorParams: { values: varsSTOP_CD },
                cssClass: "user-list",
                cellEdited: function (cell) {
                  cell.getData()._STATUS_ = "U";
                },
              },
              { field: "OPER_ST_TM", title: "시작시간", minWidth: 120, width: "20%",
              },
              { field: "OPER_ED_TM", title: "종료시간", minWidth: 120, width: "20%", },
            ],

            isProd: [
              { field: "WRK_DT", title: "작업일", width: 100, editor:"date",
                editable: (cell) => {
                  return cell.getData()._STATUS_ === "I";
                },
                formatter:"datetime",
                formatterParams:{
                  inputFormat:"yyyy-MM-dd",
                  outputFormat:"yyyy.MM.dd",
                },
              },
              { field: "WRK_TM", title: "시간", width: 100,
                editor: "time",
                editable: (cell) => {
                  return cell.getData()._STATUS_ === "I";
                },
              },
              { field: "EMP_NM", title: "작업자", width: 100 },
              { field: "PRD_QTY", title: "수량", width: 80,
                editor: tb_custom_editor.limitQty,
                editorParams:{qty: 'PRD_QTY', vsNum: this, formQty: 'PRV_QTY'},
                editable: (cell) => {
                  return cell.getData()._STATUS_ === "I";
                },
                formatter: "money",
                formatterParams: { decimal: ".", precision: 0 },
                bottomCalc: "sum",
                bottomCalcFormatter: "money",
                bottomCalcFormatterParams: { decimal: ".", precision: 0 },
              },
              { field: "REMARK", title: "비고", width: 100,
                editor: "input",
                editable: (cell) => {
                  return cell.getData()._STATUS_ === "I";
                },
              },
              { field: "", title: "취소", width: 40,
                cellClick: (e, cell) => {
                  this.deleteRow("isProd", cell);
                },
                formatter: tb_custom_formatter.deleteIcon,
              },
            ],

            isDef: [
              { field: "DEF_DT", title: "작업일", width: 100, editor:"date",
                editable: (cell) => {
                  return cell.getData()._STATUS_;
                },
                formatter:"datetime",
                formatterParams:{
                  inputFormat:"yyyy-MM-dd",
                  outputFormat:"yyyy.MM.dd",
                },
              },
              { field: "DEF_TM", title: "시간", width: 100, editor:"time",
                editable: (cell) => {
                  return cell.getData()._STATUS_;
                },
              },
              { field: "EMP_NM", title: "작업자", width: 100 },
              { field: "DEF_QTY", title: "수량", width: 80,
                editor: tb_custom_editor.minNumber,
                editorParams:{
                  min:0,
                },
                editable: (cell) => {
                  return cell.getData()._STATUS_;
                },
                formatter: "money",
                formatterParams: { decimal: ".", precision: 0 },
                bottomCalc: "sum",
                bottomCalcFormatter: "money",
                bottomCalcFormatterParams: { decimal: ".", precision: 0 },
              },
              { field: "DEF_CD", title: "불량사유", width: 120,
                formatter: tb_common_funtions.formatterSelect,
                formatterParams: { values: varsDEF_CD },
                editor: "list",
                editable: (cell) => {
                  return cell.getData()._STATUS_;
                },
                editorParams: { values: varsDEF_CD },
                cssClass: "user-list",
              },
              { field: "DEF_CAUSE", title: "불량원인", width: 100,
                editor: "input",
                editable: (cell) => {
                  return cell.getData()._STATUS_;
                },
              },
              { field: "", title: "취소", width: 40,
                cellClick: (e, cell) => {
                  this.deleteRow("isDef", cell);
                },
                formatter: tb_custom_formatter.deleteIcon,
              },
            ],

            isInsp: [
              { field: "check",       title: "순번",               width: 40,  formatter: "rownum", },
              { field: "OP_SEQ",      title: "공순",               width: 80,  visible:false},
              { field: "OP_CD",       title: "공정",               width: 80,  visible:false },
              { field: "INSP_ITEM",   title: "검사항목",           width: 100, visible:false},
              { field: "OKNG_FLG",                                 width: 100, visible:false},
              { field: "INSP_NAME",   title: "검사항목명",         width: 80, },
              { field: "INSP_METH",   title: "검사방법",           width: 100, formatter: tb_common_funtions.formatterSelect, formatterParams:{ values: varsINSP_METH } },
              { field: "SPEC_VAL",    title: "기준값<br>(mm)",     width: 80,  formatter:"money", formatterParams:{ decimal:".", precision:3 } },
              { field: "TOL_UPPER",   title: "상한값<br>(㎛)",     width: 80,  formatter:"money", formatterParams:{ precision:0 }  },
              { field: "TOL_LOWER",   title: "하한값<br>(㎛)",     width: 80,  formatter:"money", formatterParams:{ precision:0 }  },
              { field: "INSP_TOOL",   title: "측정기",             width: 130, editor: "list", cssClass:"user-list", editorParams:{values: varsINSP_TOOL}, formatter: tb_common_funtions.formatterSelect, formatterParams: {values: varsINSP_TOOL} },
              { field: "FILE_MANAGE", title: "파일관리",           width: 70,
                formatter: this.popIcon,
                cellClick:function(e,cell){
                  let clickData = cell.getData();

                  vnLoad("", "../../insp/reg_insp_qc/reg_insp_qc_pop.inc.php", "", (loadHtml) => {
                    kuls_modal(loadHtml);


                    const popFileUpload = new Tb_file_upload_class("#popup_file_upload",clickData);
                    popFileUpload.init_insp();

                  });
                }
              },
              { field: "SMT_QTY",   title: "시료수",     width: 40, formatter:"money", formatterParams:{ precision:0 } },
              {
                title: "시료번호",
                columns: [
                  { field: "T1",  title: "1",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T2",  title: "2",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T3",  title: "3",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T4",  title: "4",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T5",  title: "5",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T6",  title: "6",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T7",  title: "7",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T8",  title: "8",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T9",  title: "9",  width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T10", title: "10", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T11", title: "11", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T12", title: "12", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T13", title: "13", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T14", title: "14", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T15", title: "15", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T16", title: "16", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T17", title: "17", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T18", title: "18", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T19", title: "19", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                  { field: "T20", title: "20", width: 50, editor: tb_custom_editor.inputOrSelect, editorParams: { checkPoint : 'OKNG_FLG' }, formatter:tb_custom_formatter.checkInspValue, formatterParams:{ checkPoint : 'OKNG_FLG' } },
                ],
              },
              { field: "REMARK", title: "비고",          width: 150, editor: "input" },
            ],

            isFile: [
              { field: "", formatter: "rownum", title: "순번", width: 40 },
              { field: "", title: "다운로드", width: 100 },
              { field: "", title: "파일명",   width: 200 },
              { field: "", title: "등록일",   width: 120 },
              { field: "", title: "등록자",   width: 100 },
            ],
          },
        };
      },
      mounted() {
        // 처음 랜딩되는 화면(작업자 실적 조회)

        // 이미 한번 시작된 공정은 마지막에 작업한 작업자, 처음이면 로그인한 작업자
        this.formData['EMP_NO'] = this.formData['EMP_NO'] ? this.formData['EMP_NO'] : memberId;
        this.formData['EMP_NM'] = this.formData['EMP_NM'] ? this.formData['EMP_NM'] : memberName;

        // 테이블 객체 생성
        this.showComponent("isProd");
        this.showComponent("isDef");
        this.showComponent("isInsp");

        if (this.formData["RUNSTOP_GB"] === "R") {
          // 가동 중일때 생성되는 객체
          this.showComponent("isRun");
          this.showComponent("isOperHst");
        } else {
          // 비가동 중일때 생성되는 객체
          this.showComponent("isWorker");
          this.showComponent("isFacility");
        }


      },
      watch: {
      },
      methods: {
          
        // 설비 조회
        callFACLT(){

          // 테이블에 존재하는 설비인지 확인
          let check = 0;
          const rows = this.table['isFacility']?.tbList.getRows();
          if(rows){
            rows.forEach(row => {
              // 바코드로 입력한 설비코드 테이블에서 찾아서 선택하기
              if(row.getData().FACLT_CD.localeCompare(this.formData['FACLT_CD'], undefined, {sensitivity: 'base'}) === 0){
                this.table['isFacility'].tbList.deselectRow();
                row.select();
                this.formData['FACLT_CD'] = row.getData().FACLT_CD
                this.formData['FACLT_NM'] = row.getData().FACLT_NM
                this.table['isFacility'].tbList.scrollToRow(row, "top", false);
                check++;
              }       
            });

            // 선택할 설비가 테이블에 없을때
            if(this.formData['FACLT_CD'] && check === 0){
              kuls_alert("존재하지 않는 설비 입니다.")
            }

          }
        },
        // 작업자 조회
        callEMP(){
          let check = 0;
          const rows = this.table['isWorker']?.tbList.getRows();
          if(rows){
            rows.forEach(row=>{
              if(row.getData().EMP_NO.localeCompare(this.formData['EMP_NO'], undefined, {sensitivity: 'base'}) === 0){
                this.table['isWorker'].tbList.deselectRow();
                row.select();
                this.formData['EMP_NO'] = row.getData().EMP_NO
                this.formData['EMP_NM'] = row.getData().EMP_NM
                this.table['isWorker'].tbList.scrollToRow(row, "top", false);
                check++;
              }
            })
          }
        },

        /*
         * 양품RSLT_NO, 불량 수량DEF_NO의 행 삭제 메소드
         * tableField에서 불량실적, 양품실적 부분에서 사용
         */
        deleteRow(com, cell) {

          const delMode = this.compactData[com].delMode;
          const table = this.table[com];

          // 양품실적 코드 또는 불량실적 코드
          const delCD =
            cell.getRow().getData()["RSLT_NO"] ||
            cell.getRow().getData()["DEF_NO"];

          if (delCD) {
            const delData = {
              mode: delMode,
              reqdata: JSON.stringify([{ DEL_CD: delCD }]),
            };

            kuls_confirm("삭제", "하시겠습니까?", () => {
              ajax_json({
                url: "./reg_prod_result.ajax.php",
                data: delData,
                success: (data) => {
                  if (data.code) {
                    kuls_success("삭제되었습니다.");
                    table.getMainList(this.compactData[com]).then(() => {

                      // 삭제된 시간으로 새로운 행 추가

                      // 현재 시간으로 날짜 및 시간 변수 초기화
                      const now = new Date();
                      this.today(now);
                      
                      this.compactData[com].addData['DEF_TM'] = this.wrkTime;
                      this.compactData[com].addData['WRK_TM'] = this.wrkTime;

                      table.addRow({
                        ...this.compactData[com].addData,
                        PRD_QTY: "",
                        DEF_QTY: "",
                      });

                      // 삭제 이후 합계값 랜딩
                      const calcResults = table.tbList.getCalcResults(); // 'score' 열의 하단 합계
                      if(com === 'isProd'){
                        // 양품실적일때
                        this.formData["PRD_TOT"] = calcResults.bottom.PRD_QTY || null;
                      }else{
                        // 불량 실적 일때
                        this.formData["DEF_TOT"] = calcResults.bottom.DEF_QTY || null;
                      }
                    });
                  } else {
                    kuls_alert(data.mesg);
                  }
                },
                error: (request, status, error) => {
                  kuls_alert(error.message);
                },
                complete: () => {},
              });
            });
          }
        },

        // 오늘 날짜 계산(날짜, 현재시간)
	        today(today) {
          
          this.date =
            today.getFullYear() +
            "-" +
            (today.getMonth() + 1 < 10
              ? "0" + (today.getMonth() + 1)
              : today.getMonth() + 1) +
            "-" +
            (today.getDate() < 10 ? "0" + today.getDate() : today.getDate());

          this.wrkTime =
            (today.getHours() < 10
              ? "0" + today.getHours()
              : today.getHours()) +
            ":" +
            (today.getMinutes() < 10
              ? "0" + today.getMinutes()
              : today.getMinutes()) +
            ":" +
            (today.getSeconds() < 10
              ? "0" + today.getSeconds()
              : today.getSeconds());
        },

        // 테이블 인스턴스 생성 함수
        // params: 각 페이지의 id값 ex)isRun, isFacility
        callTable(com) {
          return this.$nextTick(() => {
            const tableField = this.tableField[com]; // 테이블 필드
            this.table[com] = new SimpleTable(com, tableField, this);
          });
        },

        /* 각 테이블 인스턴스 객체 생성 함수.
         * compactData : 조회 또는 저장에 사용되는 변수들
         * addData : 테이블 행 추가 될때 미리 들어가 있는 데이터
         */
        showComponent(com, tab) {
          if(com !== "isFacltBreak" && com !== "isDefHst"){
            this.activeTab = tab;
          }

          // 오늘날짜 가져오기
          const today = new Date();
          this.today(today);

          // 가동현황, 설비 테이블 보이는 상태 변환 (isworker는 isfacility와, isoperhst는 isrun과 같이 사라지고 생긴다.)
          Object.keys(this.isComponent).map((key) => {
            if (
              com !== "isNoRun" &&
              com !== "isWorker" &&
              com !== "isOperHst" &&
              com !== "isDone" &&
              com !== "isFacltBreak" &&
              com !== "isDefHst"
            ) {
              this.isComponent[key] = com == key ? true : false;
            }
          });

          switch (com) {
            /* 
             * 작업자 리스트
             */
            case "isWorker":
              this.compactData[com]["data"] = {
                WRK_DT: this.date,
                EMP_NO: this.formData["EMP_NO"],
              };

              this.compactData[com].getMode = "getWokerInfo";
              this.compactData[com].putMode = "";

              this.compactData[com].addData = {};

              this.callTable(com);
              break;

            /* 
             * 공정별 가동 이력
             */
            case "isOperHst":
              this.compactData[com]["data"] = {
                EMP_NO: this.formData["EMP_NO"],
                WO_NO: this.formData["WO_NO"],
                WO_SEQ: this.formData["WO_SEQ"],
              };

              this.compactData[com].getMode = "getOperHst";
              this.compactData[com].putMode = "";

              this.compactData[com].addData = {};

              this.callTable(com);
              break;

            /* 
             * 설비 리스트
             */
            case "isFacility":
              this.compactData[com]["data"] = {
                OP_CD: this.formData["OP_CD"],
                FACLT_CD: this.formData["FACLT_CD"],
              };

              this.compactData[com].getMode = "getFacilityInfo";
              this.compactData[com].putMode = "";

              this.compactData[com].addData = {};

              this.callTable(com);
              break;

            /* 
             * 양품실적 등록
             */
            case "isProd":
              this.compactData[com]["data"] = {
                WO_NO: this.formData["WO_NO"],
                WO_SEQ: this.formData["WO_SEQ"],
                OP_CD: this.formData["OP_CD"],
                FACLT_CD: this.formData["FACLT_CD"],
                EMP_NO: this.formData["EMP_NO"],
              };

              this.compactData[com].getMode = "getProd";
              this.compactData[com].putMode = "putProd";
              this.compactData[com].delMode = "delProd";

              this.compactData[com].addData = {
                WRK_DT: this.date,
                WRK_TM  : this.wrkTime,
                _STATUS_: "I",
              };

              this.callTable(com);

              break;

            /* 
             * 불량실적 등록
             */
            case "isDef":
              this.compactData[com]["data"] = {
                WO_NO: this.formData["WO_NO"],
                WO_SEQ: this.formData["WO_SEQ"],
                OP_CD: this.formData["OP_CD"],
                FACLT_CD: this.formData["FACLT_CD"],
                EMP_NO: this.formData["EMP_NO"],
              };

              this.compactData[com].addData = {
                DEF_DT: this.date,
                DEF_TM: this.wrkTime,
                _STATUS_: "I",
              };

              this.compactData[com].getMode = "getDef";
              this.compactData[com].putMode = "putDef";
              this.compactData[com].delMode = "delDef";

              this.callTable(com);
              break;

            /* 
             * 검사실적등록
             */
            case "isInsp":

              this.compactData[com].getMode = "getInsp";
              this.compactData[com].putMode = "putInsp";

              this.compactData[com]["data"] = {
                WO_NO  : this.formData["WO_NO"],
                OP_CD  : this.formData["OP_CD"],
                OP_SEQ : this.formData["OP_SEQ"],

              };
              this.compactData[com].addData = {};

              this.callTable(com);


              // 검사항목 추가
              ["click", "keypress"].forEach((evt) => {
                const addInsp = document.querySelector(".add-insp");
                addInsp.addEventListener(evt, () => {

                  // 품목 선택행 가져오기
                  // const selectedRows = Tb_order.tbList.getSelectedRows();

                  if (this.formData["WO_NO"]) { //선택행이 있을때
                    const data = this.table;

                    const tbAddInsp = new PopTbAddInspClass(data);
                    tbAddInsp.init();



                  } else {
                    kuls_alert("생산오더를 확인해주세요.");
                  }
                });
              });

              break;

            /* 
             * 공정시작
             */
            case "isRun":

              this.compactData[com]["data"] = {
                WO_NO: this.formData["WO_NO"],
                WO_SEQ: this.formData["WO_SEQ"],
                EMP_NO: this.formData["EMP_NO"],
                FACLT_CD: this.formData["FACLT_CD"],
              };

              this.compactData[com].getMode = "getRunInfo";
              this.compactData[com].putMode = "putRunInfo";

              this.compactData[com].addData = {
                WO_NO: this.formData.WO_NO,
                RUNSTOP_GB: "R",
                OPER_ST_TM: this.wrkTime,
                _STATUS_: "I",
              };

              this.callTable(com).then(() => {
                // 비가동 중일때만 가동할 수 있음.
                if (this.formData.RUNSTOP_GB !== "R") {
                  this.table[com].putData();
                }
              });
              break;

            /* 
             * 인스턴스객체 생성x
             * 공정 중지 버튼 클릭시 공정 시작 테이블 업데이트
             */
            case "isNoRun":

              this.compactData["isRun"].addData = {
                RUNSTOP_GB: "S",
                OPER_ED_TM: this.wrkTime,
                _STATUS_: "U",
              };

              this.$nextTick(() => {
                // 데이터 저장 breaker 열기
                this.table['isRun'].save_breaker = false;
                this.table["isRun"].putData();
              });
              break;

            /* 
             * 인스턴스객체 생성x
             * 작업완료 버튼 클릭시 공정 시작 테이블 업데이트
             */
            case "isDone":
              
              this.compactData["isRun"].addData = {
                RUNSTOP_GB: "S",
                OPER_ED_TM: this.wrkTime,
                STOP_CD: "ED",
                _STATUS_: "U",
              };
              
              this.$nextTick(() => {
                // 데이터 저장 breaker 열기
                this.table['isRun'].save_breaker = false;
                this.table["isRun"].putData();
            });
              break;

            /* 
             * 설비고장 등록 팝업
             */
            case "isFacltBreak":
              const compactData = {
                data:{
                  FACLT_CD: this.formData["FACLT_CD"],
                },
                getMode : "getFacilityHst",
                putMode : "putFacilityDef"
              }
              const breakField = this.tableField['isFacltBreak']; // 설비고장등록 컬럼

              // 팝업 생성
              vnLoad("", "./popComponent/isFacltBreak.php", "", (loadHtml) => {
                this.modal = kuls_modal(loadHtml, { dontclose: true });

                const breakTable = new Tb_Break_class(this, compactData, breakField);
                breakTable.init();

                // 조회 필터링
                document.querySelector("#FACLT_CD_FILT").addEventListener("change",()=>{
                  breakTable.getMainList();
                });
              });
              break;

            /* 
             * 도면조회 팝업
             */
            case "isDefHst":
              this.compactData[com]["data"] = {
                ITEM_CD: this.formData["ITEM_CD"],
                OP_CD: this.formData["OP_CD"],
              };

              this.compactData[com].getMode = "getDefHst";
              this.compactData[com].putMode = "";

              // 팝업 생성
              vnLoad("", "./popComponent/isDefHst.php", "", (loadHtml) => {
                this.modal = kuls_modal(loadHtml), { dontclose: true };

                const Tb_DefHst = new Tb_DefHst_class(this, "isDefHst");
                Tb_DefHst.init();

              });

              break;
          }
        },

        /* 
         * 작업 표준서 팝업
         */
        popDrawSTD(text) {
          const item_cd = document.getElementById("ITEM_CD").value;
          if (text === "작업표준서 조회") {
            vnLoad("", "./sts_order_pop_util.inc.php", "", (loadHtml) => {
              this.modal = kuls_modal(loadHtml, { dontclose: true });

              const std = new Tb_Std_class("#sub_table", item_cd);
              std.init();
            });
          } else {
            vnLoad("", "./sts_order_pop_draw.inc.php", "", (loadHtml) => {
              this.modal = kuls_modal(loadHtml, { dontclose: true });

              const draw = new Tb_Draw_class("#draw_table", item_cd);
              draw.init_draw();
            });
          }
        },

        //팝업 아이콘
        popIcon(cell, formatterParams, onRendered) {
          return "<button class='reverse-btn fa-solid fa-paperclip padding-1-12'></button>";
        }
      },
    }).mount("#popup_field");

    return vueForm;
  }
}
