<script setup lang="ts">
import { Splitpanes, Pane } from 'splitpanes'

import 'splitpanes/dist/splitpanes.css'
import { onMounted, onUnmounted, ref } from 'vue'

const props = defineProps({
  size: {
    default: '',
    type: String || Number,
  },
  otherSize: {
    default: '20',
    type: String || Number,
  },
})
const domSize = ref<string>('0')

function domResize() {
  const father = document.getElementsByClassName('splitpanes')[0]
  const top = document.getElementById('top')
  if (top && father) {
    const v = ((top.clientHeight / father?.clientHeight) * 100).toFixed(2)

    if (props.size === '') {
      domSize.value = v
    } else {
      domSize.value = props.size
    }
  }
}
onUnmounted(() => {
  window.removeEventListener('resize', domResize)
})
onMounted(() => {
  window.addEventListener('resize', domResize)
  domResize()
})
defineExpose({
  domResize,
})
</script>

<template>
  <splitpanes horizontal style="height: 100%">
    <pane :size="domSize">
      <div id="top">
        <slot name="top"></slot>
      </div>
    </pane>
    <pane style="flex: 1; flex-shrink: 0">
      <div id="bottom">
        <slot name="bottom"></slot>
      </div>
    </pane>
    <pane v-if="$slots.other" :size="otherSize">
      <div id="other-pane">
        <slot name="other"></slot>
      </div>
    </pane>
  </splitpanes>
</template>

<style scoped lang="scss">
#top {
  height: fit-content;
}
#other-pane {
  height: 100%;
}
#bottom {
  height: 100%;
}

#top,
#bottom {
  display: flex;
  flex-direction: column;
}

::v-deep(.splitpanes__splitter) {
  width: 100%;
  border-left: 1px solid #eee;
  margin-left: -1px;
  background-color: #ececec;
  cursor: row-resize;
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0;
  min-width: 1px;
  margin-top: 5px;
  margin-bottom: 5px;

  &::before {
    margin-top: -2px;
    background-color: #00000040;
    transform: translate(-50%);
    width: 30px;
    height: 1px;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transition: background-color 0.3s;
  }

  &::after {
    margin-top: 1px;
    background-color: #00000040;
    transform: translate(-50%);
    width: 30px;
    height: 1px;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transition: background-color 0.3s;
  }
}

::v-deep(.splitpanes__pane) {
  .el-card {
    height: 100%;
  }
}
</style>
