<template>
  <div class="flow-containers">
    <div class="resize-head"><slot name="head"></slot></div>
    <div class="resize-layout" :id="layoutId">
      <div class="resize-left" ref="left" :style="{ width: `calc(100% - ${rightBoxWidth} - 10px)` }"
        ><slot name="left"></slot
      ></div>
      <div class="resize-shrink-sidebar" :id="sidebarId" title="收缩侧边栏">
        <span class="shrink-sidebar-text">⋮</span>
      </div>
      <div class="resize-right" :style="{ width: rightBoxWidth }">
        <div class="right-box" v-if="showPanel">
          <slot name="right"></slot>
        </div>
        <div :style="{ borderBottom: showPanel ? '0' : '1px solid #eee', height: '64px' }">
          <div class="fewer-panel-box" @click="changeShowPanel">
            <component :is="fewerPanelComponent" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import FewerLeft from './FewerLeft.vue';
  import FewerRight from './FewerRight.vue';
  import { randomNum } from '/@/views/workflow/design/bpmn/util/random';
  const props = defineProps({
    rightWidth: String,
  });
  let left = ref();

  let showPanel = ref(true);
  let rightBoxWidth = ref(props.rightWidth || '35%');
  let fewerPanelComponent = computed(() => {
    return showPanel.value ? FewerRight : FewerLeft;
  });
  let sidebarId = ref(randomNum());
  let layoutId = ref(randomNum());
  onMounted(() => {
    dragControllerDiv();
  });
  function changeShowPanel() {
    showPanel.value = !showPanel.value;
    if (showPanel.value) {
      showRightBox();
    } else {
      hideRightBox();
    }
  }
  function showRightBox() {
    rightBoxWidth.value = props.rightWidth || '35%';
  }
  function hideRightBox() {
    rightBoxWidth.value = '52px';
  }
  function changeWidth(moveLen: number, boxClientWidth: number) {
    rightBoxWidth.value = boxClientWidth - moveLen - 10 + 'px';
  }
  function dragControllerDiv() {
    let resize = document.getElementById(sidebarId.value) as any;
    let box = document.getElementById(layoutId.value) as any;

    resize.onmousedown = function (e: { clientX: any }) {
      let startX = e.clientX;
      resize.left = resize.offsetLeft;
      document.onmousemove = function (e) {
        let endX = e.clientX;
        let moveLen = resize.left + (endX - startX);
        let maxT = box.clientWidth - resize.offsetWidth;

        if (moveLen < 32) moveLen = 32;
        if (moveLen > maxT - 400) moveLen = maxT - 400;

        resize.style.left = moveLen;
        changeWidth(moveLen, box.clientWidth);
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
        resize.releaseCapture && resize.releaseCapture();
      };
      resize.setCapture && resize.setCapture();
      return false;
    };
  }
</script>

<style scoped>
  .flow-containers {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #f0f0f0;
  }

  [data-theme='dark'] .flow-containers {
    background-color: #151515;
  }

  .resize-layout {
    display: flex;
    height: calc(100% - 82px);
    width: 100%;
  }

  .resize-left {
    width: 65%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    margin: 0 0 10px 10px;
  }

  .resize-shrink-sidebar {
    cursor: col-resize;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10px;
    margin-bottom: 10px;
  }

  .shrink-sidebar-text {
    border-radius: 4px;

    /* color: #fff; */
  }

  .shrink-sidebar:hover {
    color: #666;
  }

  .resize-right {
    width: 35%; /* 右侧初始化宽度 */
    border-radius: 16px;
    background: #fff;
    margin: 0 10px 10px 0;
    position: relative;
  }

  .right-box {
    height: 100%;
  }

  [data-theme='dark'] .right-box:hover {
    border-left: 8px solid #151515;
  }

  .fewer-panel-box {
    position: absolute;
    top: 21px;
    right: 16px;
    z-index: 3;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    text-align: center;
    line-height: 20px;
  }
</style>
