<template>
  <Splitter
    v-if="splitInfo['children'].length <= 0"
    :id="splitInfo['layout_nm']"
    class="mb-5"
    :layout="splitInfo['layout_type']"
    @resizeend="updateSizes"
    @Click.stop="clickLayout(splitInfo)"
    :style="this.$createStyleSheet(splitInfo.styleSheet)"
  >
    <SplitterPanel
      v-if="splitInfo['children'][0] != null"
      class="flex align-items-center justify-content-center"
      :size="50"
    >
      11
    </SplitterPanel>
    <SplitterPanel
      v-if="splitInfo['children'][1] != null"
      class="flex align-items-center justify-content-center"
      :size="50"
    >
      22
    </SplitterPanel>
    <BaseComponent
      v-if="splitInfo.se == 'component'"
      :component="splitInfo.component"
      @changeselectLayout="changeselectLayout"
      @Click.stop="clickLayout(splitInfo)"
    ></BaseComponent>
  </Splitter>
  <Splitter
    v-else
    :id="splitInfo['layout_nm']"
    class="mb-5"
    :layout="splitInfo['layout_type']"
    @resizeend="updateSizes"
    @Click.stop="clickLayout(splitInfo)"
    :style="this.$createStyleSheet(splitInfo.styleSheet)"
  >
    <SplitterPanel
      v-if="splitInfo['children'][0] != null"
      :id="splitInfo['children'][0]['layout_nm']"
      class="flex align-items-center justify-content-center"
      :class="{
        active:
          selectLayout['layout_nm'] == splitInfo['children'][0]['layout_nm'] &&
          splitInfo['children'][0],
        'padding-1': splitInfo['children'][0]['component'] != null,
      }"
      :size="splitInfo['layout_size1']"
    >
      <template v-if="splitInfo.children[0]">
        <SplitterLayout
          v-if="splitInfo.children[0].se == 'splitter'"
          :splitInfo="splitInfo.children[0]"
          @changeselectLayout="changeselectLayout"
          :selectLayout="selectLayout"
        ></SplitterLayout>
        <BaseComponent
          v-if="splitInfo.children[0].se == 'component'"
          :component="splitInfo.children[0].component"
          @changeselectLayout="changeselectLayout"
          @Click.stop="clickLayout(splitInfo.children[0])"
        ></BaseComponent>
      </template>
    </SplitterPanel>
    <SplitterPanel
      v-if="splitInfo['children'][1] != null"
      :id="splitInfo['children'][1]['layout_nm']"
      class="flex align-items-center justify-content-center"
      :class="{
        active:
          selectLayout['layout_nm'] == splitInfo['children'][1]['layout_nm'] &&
          splitInfo['children'][1],
        'padding-1': splitInfo['children'][1]['component'] != null,
      }"
      :size="splitInfo['layout_size2']"
    >
      <template v-if="splitInfo.children[1]">
        <SplitterLayout
          v-if="splitInfo.children[1].se == 'splitter'"
          :splitInfo="splitInfo.children[1]"
          @changeselectLayout="changeselectLayout"
          :selectLayout="selectLayout"
        ></SplitterLayout>
        <BaseComponent
          v-if="splitInfo.children[1].se == 'component'"
          :component="splitInfo.children[1].component"
          @changeselectLayout="changeselectLayout"
          @Click.stop="clickLayout(splitInfo.children[1])"
        ></BaseComponent>
      </template>
    </SplitterPanel>
  </Splitter>
</template>


<script>
import BaseComponent from "./elementComponent/BaseComponent.vue";

export default {
  name: "SplitterLayout",
  props: {
    splitInfo: {
      type: Object,
    },
    selectLayout: {
      type: Object,
      default: function () {
        return {
          layout_nm: "",
          layout_type: "",
          children: [],
        };
      },
    },
    createChartData: {
      type: Object,
    },
  },
  data() {
    return {
      currentSelectLayout: this.selectLayout,
    };
  },

  components: {
    BaseComponent: BaseComponent,
  },

  methods: {
    updateSizes(newSizes) {
      // newSizes는 사용자가 조정한 후의 panel 크기 비율을 배열로 제공합니다.
      this.splitInfo["layout_size1"] = newSizes.sizes[0];
      this.splitInfo["layout_size2"] = newSizes.sizes[1];
      this.splitInfo["sizes"] = newSizes.sizes;
    },
    parentInfo: function (parentInfo) {
      this.$emit("parentInfo", parentInfo);
    },

    clickLayout: function (splitInfo) {
      this.$emit("changeselectLayout", splitInfo);
    },

    changeselectLayout: function (layout) {
      this.$emit("changeselectLayout", layout);
    },
  },

  watch: {
    splitInfo: {
      handler: function (newVal, oldVal) {},
      deep: true,
    },
    selectLayout: {
      handler: function (v, old) {
        this.currentSelectLayout = v;
      },
      deep: true,
    },
  },
};
</script>
<style scoped>
.active {
  border: 3px dotted red;
}
.padding-1 {
  padding: 1rem;
}
</style>