<template>
  <PageWrapper dense contentFullHeight fixedHeight :listPageMode="listPageMode">
    <div class="form-container relative">
      <div class="form-left relative" :style="{ width: formLeft }" v-if="props.hasLeft">
        <slot name="resizeLeft"></slot>
      </div>
      <div
        class="resize-shrink-sidebar"
        id="resize-form-left"
        title="收缩侧边栏"
        @mousedown="handleResize"
        v-if="props.hasLeft"
      >
        <span class="shrink-sidebar-text">⋮</span>
      </div>
      <div class="form-right" :style="{ width: formRight }">
        <slot name="resizeRight"></slot>
      </div>
      <slot></slot>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';
  import PageWrapper from './PageWrapper.vue';
  const props = defineProps({
    hasLeft: {
      type: Boolean,
      default: true,
    },
    formLeftWidth: {
      type: Number,
      default: 220,
    },
    listPageMode: {
      type: String,
    },
    searchHeight: {
      type: Number,
      default: 0,
    },
  });
  let formLeft = ref(props.formLeftWidth + 'px' || '220px');
  let formRight = ref(`calc(100% - ${props.formLeftWidth + 'px' || '220px'})`);
  const treeTop = computed(() => {
    return props.searchHeight + 'px';
  });

  function handleResize(e) {
    let resize = document.getElementById('resize-form-left') as any;
    let startX = e.clientX;
    let left = resize?.offsetLeft || 0;

    document.onmousemove = function (e) {
      let endX = e.clientX;
      let moveLen = left + (endX - startX);
      formLeft.value = moveLen + 'px';
      formRight.value = 'calc(100% - ' + moveLen + 'px)';
    };
    document.onmouseup = function () {
      document.onmousemove = null;
      document.onmouseup = null;
      resize.releaseCapture && resize.releaseCapture();
    };
  }
</script>

<style lang="less" scoped>
  .form-container {
    flex: 1;
    display: flex;
    width: 100%;
    height: 100%;
  }

  .resize-shrink-sidebar {
    cursor: col-resize;
    display: flex;
    justify-content: center;
    align-items: center;

    .shrink-sidebar-text {
      padding: 0 2px;
      background: #f2f2f2;
      border-radius: 10px;
    }
  }

  .form-left {
    width: 100%;
    background-color: #fff;
    border-radius: 16px;
    height: 100%;
  }

  .form-right {
    flex: 1;
    height: 100%;
  }

  .listmode-horizontal-tree {
    .form-left {
      top: v-bind('treeTop');
      height: auto;
    }
  }
</style>
