<template>
  <Splitter
    :id="splitInfo['layoutNm']"
    class="mb-5"
    :layout="splitInfo['layoutType']"
    @resize="updateSizes"
    :resizable="true"
  >
    <SplitterPanel
      :id="splitInfo['children'][0]['layoutNm']"
      class="flex align-items-center justify-content-center"
      :class="{
        active:
          clickElement == splitInfo['children'][0]['layoutNm'] &&
          splitInfo['children'][0],
        'padding-1': splitInfo['children'][0]['componentNm'] != null,
      }"
      :size="splitInfo['sizes'][0]"
    >
      <!-- <SplitterLayout :is="SplitterLayout" id="SplitterLayout" :clickElement="clickElement" :layoutVal="layoutVal"></SplitterLayout> -->
      <SplitterLayout
        v-if="
          splitInfo['children'][0]['children'] !== null &&
          splitInfo['children'][0]['children'].length > 0
        "
        :is="SplitterLayout"
        :splitInfo="splitInfo['children'][0]['children'][0]"
        :clickElement="clickElement"
        :optionChangeClick="optionChangeClick"
        :componentOptn="componentOptn"
        @parentInfo="parentInfo"
      ></SplitterLayout>

      <!-- <HorizentalThreeData ></HorizentalThreeData> -->
      <!-- <div style="height:100%; width:100%;"> -->
      <component
        v-if="splitInfo['children'][0]['componentNm']"
        :is="splitInfo['children'][0]['componentNm']"
        :parent="splitInfo['children'][0]"
        :optionChangeClick="optionChangeClick"
        :componentOptn="componentOptn"
        @parentInfo="parentInfo"
      >
      </component>
      <!-- </div> -->
    </SplitterPanel>
    <SplitterPanel
      v-if="splitInfo['children'][0]['layoutNm'] !== undefined"
      :id="splitInfo['children'][1]['layoutNm']"
      class="flex align-items-center justify-content-center"
      :class="{
        active:
          clickElement == splitInfo['children'][1]['layoutNm'] &&
          splitInfo['children'][1],
        'padding-1': splitInfo['children'][1]['componentNm'] != null,
      }"
      :size="splitInfo['sizes'][1]"
    >
      <!-- <SplitterLayout :is="SplitterLayout" id="SplitterLayout" :clickElement="clickElement" :layoutVal="layoutVal"></SplitterLayout> -->
      <SplitterLayout
        v-if="
          splitInfo['children'][0]['children'] !== null &&
          splitInfo['children'][0]['children'].length > 0
        "
        :is="SplitterLayout"
        :splitInfo="splitInfo['children'][1]['children'][0]"
        :clickElement="clickElement"
        :optionChangeClick="optionChangeClick"
        :componentOptn="componentOptn"
        @parentInfo="parentInfo"
      ></SplitterLayout>
      <component
        v-if="splitInfo['children'][1]['componentNm']"
        :is="splitInfo['children'][1]['componentNm']"
        :parent="splitInfo['children'][1]"
        :optionChangeClick="optionChangeClick"
        :componentOptn="componentOptn"
        @parentInfo="parentInfo"
      ></component>
    </SplitterPanel>
  </Splitter>
</template>
<script>
import HorizentalThreeData from "./elementComponent/HorizentalThreeData.vue";
import HorizentalTwoData from "./elementComponent/HorizentalTwoData.vue";
import TableData from "./elementComponent/TableData.vue";
import ThreeData from "./elementComponent/ThreeData.vue";
import EquipmentData from "./elementComponent/EquipmentData.vue"; // 2024.02.16 PJH

export default {
  name: "SplitterLayout",
  props: {
    splitInfo: {
      type: Object,
    },
    clickElement: null,
    optionChangeClick: {
      type: Function,
    },
    componentOptn: {
      type: Object,
      required: true,
    },
    inputVal: {
      type: Object,
      required: true,
    },
  },
  components: {
    HorizentalThreeData,
    HorizentalTwoData,
    TableData,
    ThreeData,
    EquipmentData, // 2024.02.16 PJH
    SplitterLayout: () => import("./SplitterLayout.vue"),
  },
  methods: {
    // newSizes는 사용자가 조정한 후의 panel 크기 비율을 배열로 제공합니다.
    updateSizes(newSizes) {
      this.splitInfo["sizes"] = newSizes["sizes"];
    },
    parentInfo: function (parentInfo) {
      this.$emit("parentInfo", parentInfo);
    },
  },
  computed: {
    isReSize() {
      return this.$route.path.includes("customSelectOne") ? false : true;
    },
  },
};
</script>
<style scoped>
.active {
  border: 3px dotted red;
}
.padding-1 {
  padding: 1rem;
}
.p-splitter-gutter-handle,
.p-splitter-gutter {
  pointer-events: none;
}
</style>