<template>
  <div class="container">
    <div class="page-titleZone flex justify-between align-start">
      <p class="main-title">데이터 현황관리 차트 등록</p>
      <!-- <button @click="test">test</button> -->
      <PageNavigation />
    </div>
    <div class="content-wrap content">
      <div class="row">
        <JobContainer :jobGroup="jobGroup" @getDataTable="getResult" />
      </div>
      <div class="row custom-tab">
        <div class="content-box flex justify-between align-start">
          <div
            :class="{
              'tab-zone': true,
              flex40: accordion === false,
              flex5: accordion === true,
            }"
          >
            <div class="tab-nav flex justify-between align-center">
              <ul
                class="flex justify-start"
                :style="accordion === true ? { display: 'none' } : {}"
              >
                <li
                  v-for="(tab, idx) in tabMenu"
                  :key="idx"
                  @click="showTab(tab.tabNic)"
                >
                  <a :class="{ activeTab: activeTab === tab.tabNic }">{{
                    tab.tabName
                  }}</a>
                </li>
              </ul>
              <button @click="accordionToggle">
                <svg-icon type="mdi" :path="path" :color="'#333'"></svg-icon>
              </button>
            </div>
            <div
              class="tab-content"
              :style="accordion === true ? { display: 'none' } : {}"
            >
              <div class="content-box flex" v-show="activeTab === 'columnList'">
                <div
                  class="content-list layout flex-column justify-between flex40"
                >
                  <div class="layout-tree">
                    <span class="section-title mb10">레이아웃 리스트</span>
                    <ul class="" style="height: 30%"></ul>
                  </div>
                  <div class="layout-zone">
                    <span class="section-title mb10">레이아웃</span>
                    <ul class="layout-content flex justify-center align-center">
                      <li
                        id="horizontal-btn"
                        class="cursor"
                        @click="addSplitterLayout"
                        title="수직레이아웃"
                      >
                        <!-- 레이아웃 id 부여 -->
                        <p
                          class="vertical-icon flex justify-around align-center"
                        >
                          <span></span>
                          <span></span>
                        </p>
                      </li>
                      <li
                        id="vertical-btn"
                        class="cursor"
                        @click="addSplitterLayout"
                        title="수평레이아웃"
                      >
                        <!-- 레이아웃 id 부여 -->
                        <p
                          class="flex-column justify-around align-center horizental-icon"
                        >
                          <span></span>
                          <span></span>
                        </p>
                      </li>
                    </ul>
                  </div>
                  <div class="btn-wrap">
                    <button @click="optionModal" class="blue-btn large-btn">
                      레이아웃 옵션
                    </button>
                  </div>
                </div>
                <div class="layout-option flex-column justify-between flex60">
                  <div class="modal-title">
                    <div class="flex justify-between align-center">
                      <span class="section-title">레이아웃 옵션</span>
                      <button class="close-btn" @click="closeModal">
                        <svg-icon
                          type="mdi"
                          :width="20"
                          :height="20"
                          :path="closePath"
                        ></svg-icon>
                      </button>
                    </div>
                  </div>
                  <div class="modal-content-monthly">
                    <CellOption />
                    <BackgroundOption />
                  </div>
                  <div class="modal-end flex justify-end">
                    <button class="gray-border-btn small-btn">취소</button>
                    <button class="blue-border-btn small-btn">적용</button>
                  </div>
                </div>
              </div>
              <div class="content-box" v-show="activeTab === 'viewSetting'">
                <div class="content-list">
                  <div class="component-zone">
                    <details>
                      <summary>요소 선택</summary>
                      <ul class="component-content">
                        <li
                          id="HorizentalTwoData"
                          class="flex align-center cursor"
                          @click="addComponent"
                        >
                          <img
                            src="../../../resources/img/componentIcon/icon2.png"
                          />
                        </li>
                        <li
                          id="ThreeData"
                          class="flex align-center cursor"
                          @click="addComponent"
                        >
                          <img
                            src="../../../resources/img/componentIcon/icon1.png"
                          />
                        </li>
                        <li
                          id="HorizentalThreeData"
                          class="flex align-center cursor"
                          @click="addComponent"
                        >
                          <img
                            src="../../../resources/img/componentIcon/icon5.png"
                          />
                        </li>
                        <li
                          id="TableData"
                          class="flex align-center cursor"
                          @click="addComponent"
                        >
                          <img
                            src="../../../resources/img/componentIcon/icon3.png"
                          />
                        </li>
                        <li class="flex align-center cursor">
                          <img
                            src="../../../resources/img/componentIcon/icon4.png"
                          />
                        </li>
                        <!-- 2024.02.16 PJH -->
                        <li
                          id="equipmentData"
                          class="flex align-center cursor"
                          @click="reOption"
                        >
                          <img
                            src="../../../resources/img/componentIcon/equipment.png"
                          />
                        </li>
                      </ul>
                    </details>
                  </div>
                  <div class="chart-zone">
                    <details>
                      <summary>chart 선택</summary>
                      <ul class="component-content flex justify-between">
                        <li class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/bar_b.png"
                          />
                        </li>
                        <li id="HorizentalTwoData" class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/rowbar_b.png"
                          />
                        </li>
                        <li id="ThreeData" class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/line_b.png"
                          />
                        </li>
                        <li id="HorizentalThreeData" class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/pie_b.png"
                          />
                        </li>
                        <li id="TableData" class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/dounet_b.png"
                          />
                        </li>
                        <li class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/colbarline_b.png"
                          />
                        </li>
                        <li class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/barline_b.png"
                          />
                        </li>
                        <li class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/brokenline_b.png"
                          />
                        </li>
                        <li class="flex30">
                          <img
                            src="../../../resources/img/chartIcon/line2_b.png"
                          />
                        </li>
                      </ul>
                    </details>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 미리보기  -->
          <div
            :class="{
              'preview-zone': true,
              flex60: accordion === false,
              flex95: accordion === true,
            }"
          >
            <div
              id="splitter-container"
              ref="splitterContainer"
              @click="handleSplitterComponentClick"
              :class="{ active: clickElement === 'splitter-container' }"
            >
              <SplitterLayout
                v-if="showSplit"
                id="SplitterLayout"
                :splitInfo="splitInfo"
                :clickElement="clickElement"
                :optionChangeClick="optionChangeClick"
                :componentOptn="componentOptn"
                :inputVal="inputVal"
                @parentInfo="parentInfo"
              >
              </SplitterLayout>
            </div>
            <div class="flex justify-end" id="buttonZone">
              <button
                class="blue-border-btn small-btn"
                id="registerButton"
                @click="registerLayout"
              >
                등록
              </button>
              <button
                class="orange-border-btn small-btn"
                id="editButton"
                style="display: none"
              >
                수정
              </button>
              <button
                class="darkg-border-btn small-btn"
                id="resetButton"
                @click="resetLayout"
              >
                초기화
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SplitterLayout from "../../component/SplitterLayout.vue";
import JobContainer from "../../component/connection/jobContainer.vue";
import axios from "axios";
import store from "../AppStore";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiChevronLeftBox, mdiChevronRightBox, mdiClose } from "@mdi/js";
import BackgroundOption from "../../component/style/BackgroundOption.vue";
import CellOption from "../../component/style/CellOption.vue";

export default {
  openPopup: {
    type: Boolean,
    default: false,
  },
  data() {
    return {
      closePath: mdiClose,
      // store: store,
      tabMenu: [
        { tabName: "레이아웃", tabNic: "columnList" },
        { tabName: "컴포넌트", tabNic: "viewSetting" },
      ],
      activeTab: "columnList",
      showSplit: false, // splitterLayout 태그 렌더링 여부
      clickElement: null, // 클릭한 요소의 id 값 들어가는 변수
      layoutVal: null, // 레이아웃 클릭에 따른 layoutNm 값을 위한 변수
      option2: false,
      option1: true,
      // 최상위 레이아웃 정보 담는 객체
      splitInfo: {
        splitterId: null, // splitter 고유 id
        layoutNm: null, // splitter 고유 id
        type: null, // s, p
        parentId: null, // 부모 splitterId, 없는 경우 null
        children: [], // 자식 splitter, panel 정보
        index: null, // 위치 index
        minWidth: 0,
        minHeight: 0,
        layoutType: null, // horizontal, vertical
        sizes: [], // splitter 사이즈
        componentNm: null, // 컴포넌트 이름
        componentOption: {}, // 컴포넌트 옵션 정보
      },
      // 레이아웃 기본 정보 담는 객체
      splitChildInfo: {
        layoutNm: null, // splitter 고유 id
        type: null, // s, p
        parentId: null, // 부모 splitterId, 없는 경우 null
        children: [], // 자식 splitter, panel 정보
        index: null, // 위치 index
        minWidth: 0,
        minHeight: 0,
        layoutType: null, // horizontal, vertical
        sizes: [], // splitter 사이즈
        componentNm: null, // 컴포넌트 이름
        componentOption: {}, // 컴포넌트 옵션 정보
      },
      splitDepth: 0, // splitter 고유 id 생성을 위한 깊이

      // 요소 옵션 정보
      componentOptn: {
        key: null,
        parent: null,
        textData: "new title",
        columnData: 0,
        unitData: "%",
        textSize: 16,
        textAlign: null,
        textStyle: null,
        backColor: null,
      },
      clickComponentParentInfo: null,
      jobGroup: {},
      getDataTable: {},
      columnList: [],

      // 게시판 정보
      customTitle: null, // 제목
      customComment: null, // 설명

      // 클릭한 요소의 data-type 값
      selectedOptionDataset: null,
      selectedLayout: null,
      isbackColor: false,
      istextCk: true,

      // 2024.02.16 PJH
      // Unity project 호출 정보
      projectInfo: {
        command: "getProject",
        projectId: "project1",
        objectList: [
          {
            command: "getObj",
            projectId: "project1",
            objectId: "object1",
            presetId: "preset5",
            position: { x: 0, y: 0.5, z: 0 },
            rotation: { x: 0, y: 0, z: 0 },
            pointList: [],
          },
        ],
      },
      projects: [],
      objects: [],
      points: [],
      sensors: [],
      message: {},
      changeInfo: null,
      selectPointId: null,
      nowSensorId: null,
      pageId: null,

      selectPointId: null,
      nowSensorId: null,
      path: mdiChevronLeftBox,
      accordion: false,
    };
  },
  methods: {
    showTab: function (tabName) {
      this.activeTab = tabName;
    },
    accordionToggle: function () {
      this.accordion = !this.accordion;
      if (!this.accordion) {
        this.path = mdiChevronLeftBox;
      } else {
        this.path = mdiChevronRightBox;
      }
    },
    // 2024.02.16 PJH
    fetchData: function () {
      let projectData = [
        { projectId: "project1", projectName: "모델1" },
        { projectId: "project2", projectName: "모델2" },
      ];
      this.projects = projectData;

      let objectData = [
        {
          projectId: "project1",
          objectId: "object1",
          objectName: "오브젝트1",
          presetId: "preset5",
          position: { x: 0, y: 0.5, z: 0 },
          rotation: { x: 0, y: 0, z: 0 },
        },
        {
          projectId: "project2",
          objectId: "object2",
          objectName: "오브젝트2",
          presetId: "preset1",
          position: { x: 0, y: 0.5, z: 0 },
          rotation: { x: 0, y: 0, z: 0 },
        },
      ];
      this.objects = objectData;

      let sensorData = [
        { sensorId: "component5", sensorName: "PM2 평량", sensorUse: false },
        { sensorId: "component6", sensorName: "PM2 수분", sensorUse: false },
        {
          sensorId: "component7",
          sensorName: "PM2 사용스팀",
          sensorUse: false,
        },
        { sensorId: "component8", sensorName: "PM2 보류제", sensorUse: false },
        {
          sensorId: "component9",
          sensorName: "PM2 벤토나이트",
          sensorUse: false,
        },
        { sensorId: "component10", sensorName: "PM2 지력제", sensorUse: false },
        { sensorId: "component13", sensorName: "PM3 평량", sensorUse: false },
        { sensorId: "component14", sensorName: "PM3 수분", sensorUse: false },
        {
          sensorId: "component15",
          sensorName: "PM3 사용스팀",
          sensorUse: false,
        },
        { sensorId: "component16", sensorName: "PM3 보류제", sensorUse: false },
        {
          sensorId: "component17",
          sensorName: "PM3 벤토나이트",
          sensorUse: false,
        },
        { sensorId: "component18", sensorName: "PM3 지력제", sensorUse: false },
      ];
      this.sensors = sensorData;
    },
    reOption(e) {
      this.selectedLayout = this.clickElement;

      const clickBtn = e.currentTarget.id;
      if (!this.showSplit) {
        alert("요소를 삽입할 레이아웃을 선택해주세요");
        return;
      }
      this.addComponentRecursiveFunc(this.splitInfo, clickBtn);

      this.option1 = !this.option1;
      this.option2 = true;
    },
    // 클릭한 요소의 부모 정보를 받아오는 이벤트
    parentInfo: function (parentInfoq) {
      this.clickComponentParentInfo = parentInfoq;
    },

    // 레이아웃 아이콘 클릭에 따른 이벤트
    addSplitterLayout: function (e) {
      const vm = this;

      // vertical-btn, Horizon-btn 클릭에 따른 layoutVal 값 변경
      const clickBtn = e.currentTarget.id;

      // 기존 active 제거
      if (this.activeElement) {
        this.activeElement.classList.remove("active-layout");
      }

      // 클릭된 요소에 active-layout 클래스 추가
      const targetClass = e.currentTarget.classList;
      targetClass.add("active-layout");
      this.activeElement = e.currentTarget;

      if (clickBtn == "horizontal-btn") {
        vm.layoutVal = "horizontal";
      } else if (clickBtn == "vertical-btn") {
        vm.layoutVal = "vertical";
      }

      // 첫 요소가 생기지 않은 상태
      if (!vm.showSplit) {
        const createParentId = "split" + vm.splitDepth;
        //부모의 정보 담기
        vm.splitInfo["layoutNm"] = createParentId;
        vm.splitInfo["type"] = "s";
        vm.splitInfo["parentId"] = null;
        vm.splitInfo["index"] = 1;
        vm.splitInfo["minWidth"] = 0;
        vm.splitInfo["minHeight"] = 0;
        vm.splitInfo["layoutType"] = vm.layoutVal;
        vm.splitInfo["sizes"] = [50, 50];
        vm.splitInfo["componentNm"] = null;
        vm.splitInfo["componentOption"] = [];
        for (let i = 0; i < 2; i++) {
          const createChileId = createParentId + "-panel-" + (i + 1);
          vm.splitChildInfo["layoutNm"] = createChileId;
          vm.splitChildInfo["type"] = "s";
          vm.splitChildInfo["parentId"] = createParentId;
          vm.splitChildInfo["index"] = i + 1;
          vm.splitChildInfo["minWidth"] = 0;
          vm.splitChildInfo["minHeight"] = 0;
          vm.splitChildInfo["layoutType"] = null;
          vm.splitChildInfo["sizes"] = [];
          vm.splitChildInfo["componentNm"] = null;
          vm.splitChildInfo["componentOption"] = [];
          vm.splitInfo["children"].push(
            JSON.parse(JSON.stringify(vm.splitChildInfo))
          );
          vm.resetChildrenInfo();
        }
        vm.showSplit = true;
        vm.splitDepth++;
      } else {
        // 최상위 레이아웃 변경 적용
        // SplitterLayout 하위가 있는지 확인
        if (
          vm.clickElement === null ||
          vm.clickElement == "splitter-container"
        ) {
          vm.splitInfo["layoutType"] = vm.layoutVal;
          return;
        }
        //  재귀함수 호출
        this.recursiveFunc(vm.splitInfo);
      }
    },
    // 재귀함수 정의
    recursiveFunc: function (info) {
      const vm = this;
      //클릭된 요소가 '나'고 자식이 존재하면 layoutNm 변경
      if (
        info["layoutNm"] === this.clickElement &&
        info["children"].length !== 0
      ) {
        const childLayout = info["children"][0];
        childLayout["layoutType"] = vm.layoutVal;
        return;
      }
      //클릭된 요소가 '나'고 자식이 없으면 자식을 추가
      if (
        info["layoutNm"] === this.clickElement &&
        info["children"].length === 0
      ) {
        if (info["componentNm"] !== null) {
          if (
            confirm(
              "삽입된 요소가 있습니다. 레이아웃을 변경하시겠습니까? /n 변경하면 삽인된 요소는 삭제됩니다."
            ) === false
          ) {
            return;
          }
        }
        const myId = "split" + vm.splitDepth;

        // 값을 추가해줘야함
        vm.splitChildInfo["layoutNm"] = myId;
        vm.splitChildInfo["type"] = "s";
        vm.splitChildInfo["parentId"] = vm.clickElement;
        vm.splitChildInfo["index"] = 1;
        vm.splitChildInfo["minWidth"] = 0;
        vm.splitChildInfo["minHeight"] = 0;
        vm.splitChildInfo["layoutType"] = vm.layoutVal;
        vm.splitChildInfo["sizes"] = [50, 50];
        vm.splitChildInfo["componentNm"] = null;
        vm.splitChildInfo["componentOption"] = [];
        info["children"].push(JSON.parse(JSON.stringify(vm.splitChildInfo)));

        const myInfo = info["children"][0];
        for (let n = 0; n < 2; n++) {
          const childId = myId + "-panel-" + (n + 1);
          vm.splitChildInfo["layoutNm"] = childId;
          vm.splitChildInfo["type"] = "p";
          vm.splitChildInfo["parentId"] = myId;
          vm.splitChildInfo["index"] = n + 1;
          vm.splitChildInfo["children"] = [];
          vm.splitChildInfo["minWidth"] = 0;
          vm.splitChildInfo["minHeight"] = 0;
          vm.splitChildInfo["layoutType"] = null;
          vm.splitChildInfo["sizes"] = [];
          vm.splitChildInfo["componentNm"] = null;
          vm.splitChildInfo["componentOption"] = [];
          myInfo["children"].push(
            JSON.parse(JSON.stringify(vm.splitChildInfo))
          );
          vm.resetChildrenInfo();
        }
        vm.splitDepth++;
        return;
      }
      for (let i = 0; i < info["children"].length; i++) {
        this.recursiveFunc(info["children"][i]);
      }
    },
    // 요소 삽입을 위한 재귀 함수
    addComponentRecursiveFunc: function (info, clickBtn) {
      //클릭된 요소 componentName 변경
      if (
        info["layoutNm"] === this.clickElement &&
        info["children"].length === 0
      ) {
        info["componentNm"] = clickBtn;
      } else if (
        info["layoutNm"] === this.clickElement &&
        info["children"].length !== 0
      ) {
        return;
      }

      for (let i = 0; i < info["children"].length; i++) {
        this.addComponentRecursiveFunc(info["children"][i], clickBtn);
      }
    },
    // 요소 선택 이벤트 구현
    addComponent: function (e) {
      // 요소를 넣을 레이아웃 id값 저장 TODO: 레이아웃 영역만 저장되는가?
      this.selectedLayout = this.clickElement;

      const clickBtn = e.currentTarget.id;
      if (!this.showSplit) {
        alert("요소를 삽입할 레이아웃을 선택해주세요");
        return;
      }

      //클릭된 element 에 요소 컴포넌트 추가
      this.addComponentRecursiveFunc(this.splitInfo, clickBtn);

      this.option2 = !this.option2;
      this.option1 = true;
    },
    // input 값 저장
    saveInput: function (key, value) {
      this.parentInfo["componentOption"][this.clickElement] = {};
      this.componentOptn[key] = value;
      let isExist = this.parentInfo["componentOption"].hasOwnProperty(
        this.clickElement
      );

      if (isExist) {
        let currentOption =
          this.parentInfo["componentOption"][this.clickElement];
        currentOption.textData = this.componentOptn.textData;
        currentOption.columnData = this.componentOptn.columnData;
        currentOption.unitData = this.componentOptn.unitData;
        currentOption.unitCk = this.componentOptn.unitCk;
        currentOption.textSize = this.componentOptn.textSize;
        currentOption.textAlign = this.componentOptn.textAlign;
        currentOption.textStyle = this.componentOptn.textStyle;
        currentOption.backColor = this.componentOptn.backColor;
      } else {
        this.parentInfo["componentOption"][this.clickElement] =
          this.componentOptn;
      }

      this.parentInfo["componentOption"][this.clickElement] =
        this.componentOptn;
    },

    // 미리보기 내부 splitter / component 클릭 이벤트
    handleSplitterComponentClick: function (e) {
      const eventTarget = e.target.id;
      this.clickElement = eventTarget;
    },
    registerLayout: function () {
      const vm = this;

      if (this.customTitle === null || this.customTitle === "") {
        alert("제목을 입력해주세요");
        return;
      }
      if (!this.showSplit) {
        alert("레이아웃 추가해 주세요");
        return;
      }

      axios({
        url: "/custom/insert",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          ttl: vm.customTitle,
          cn: vm.customComment,
          wrt_id: store.state.loginUser.user_id,
          /* jobGroup:this.jobGroup,
                    getDataTable: this.getDataTable,*/
          splitInfo: vm.splitInfo,
        },
      })
        .then(function (response) {
          alert("등록되었습니다.");
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    optionChangeClick: function (e) {
      // 요소 내 input 클릭 시 옵션 선택 탭으로 이동
      this.showTab("option");
      this.option2 = !this.option2;
      this.option1 = true;

      //배경색상 커스텀
      if (e.target.dataset.isback) {
        this.isbackColor = true;
      } else {
        this.isbackColor = false;
      }
      //텍스트 여부 체크
      if (e.target.dataset.type === "text") {
        this.istextCk = true;
      } else {
        this.istextCk = false;
      }
      const targetId = e.target.id;

      // 클릭한 요소의 데이터를 input에 적용
      // key를 통해 있으면 데이터 가져와 적용 / 없으면 새로운 데이터 생성
      let isExist = this.parentInfo["componentOption"].hasOwnProperty(targetId);
      // 요소 옵션 초기값으로 설정
      if (!isExist) {
        this.componentOptn = {
          columnData: "",
          textData: "new Title",
          textSize: null,
          textAlign: "",
          textStyle: "",
          unitData: "%",
          unitCk: true,
        };
      } else {
        // 있으면 해당 위치 찾아서 데이터 대입
        const currentOption = this.parentInfo["componentOption"][targetId];
        this.componentOptn = {
          columnData: currentOption.columnData,
          textData: currentOption.textData,
          textSize: currentOption.textSize,
          textAlign: currentOption.textAlign,
          textStyle: currentOption.textStyle,
          unitData: currentOption.unitData,
          unitCk: currentOption.unitCk,
        };
      }
    },
    // 초기화 버튼 클릭 시 최상위 splitInfo 초기화 이벤트
    resetLayout: function () {
      this.showSplit = false;
      this.splitInfo = {
        layoutNm: null,
        parentId: null,
        type: null, // s, p
        children: [],
        index: null,
        componentNm: null,
        componentOption: [],
      };
      this.splitDepth = 0;
      this.clickElement = "";
    },
    resetChildrenInfo: function () {
      let vm = this;
      vm.splitChildInfo.layoutNm = null;
      vm.splitChildInfo.type = null;
      vm.splitChildInfo.parentId = null;
      vm.splitChildInfo.children = [];
      vm.splitChildInfo.index = null;
      vm.splitChildInfo.minWidth = 0;
      vm.splitChildInfo.minHeight = 0;
      vm.splitChildInfo.layoutType = null;
      vm.splitChildInfo.sizes = [];
      vm.splitChildInfo.componentNm = null;
      vm.splitChildInfo.componentOption = {};
    },
    // jobContainer에서 받은 데이터 테이블 정보
    getResult: function (table) {
      this.columnList = [];
      for (let i = 0; i < table.columnDatas.length; i++) {
        // rowData와 columnNm을 포함한 객체 생성
        let obj = {
          rowData: table.rowData[0][i],
          columnNm: table.columnDatas[i].columnNm,
        };
        this.columnList.push(obj);
      }
    },
    selectJobGroup: function () {
      let vm = this;
      axios({
        url: "/job/selectJobGroup.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: JSON.stringify({ group_id: "JOBGROUP_2024020517352987547982" }),
      })
        .then(function (response) {
          vm.jobGroup = response.data.resultData.jobGroup;
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    optionModal: function () {
      this.isModal = !this.isModal;
    },
  },
  components: {
    SplitterLayout,
    JobContainer: JobContainer,
    SvgIcon: SvgIcon,
    BackgroundOption: BackgroundOption,
    CellOption: CellOption,
  },
  mounted() {
    this.activeTab;
    this.jobGroup = this.$getDefaultJobGroup().jobGroup;
    this.pageId = this.$route.query.pageId;
  },
};
</script>

<style scoped>
#splitter-container {
  width: 100%;
  height: calc(100% - 50px);
  border: 1px solid #aaa;
  margin-bottom: 20px;
}
#SplitterLayout {
  width: 100%;
  height: 100%;
}
#splitter-container.active {
  border: 3px dotted red;
}
#customComment {
  height: 99px;
}
.table-padding {
  padding: 15px 0;
}
.paletteLi {
  display: inline-block;
  margin-right: 10px;
}
</style>