<script setup lang="ts">
import { useStorage } from '@vueuse/core'

const emit = defineEmits<{
  (e: 'resize'): void
}>()

const leftPanelVisible = $ref<boolean>(true)
const leftPanelWidth = useStorage('leftPanelWidth', 400)
const leftPanelWidthText = $computed(() => {
  return `${leftPanelWidth.value}px`
})

// 拖拽改变左侧宽度
// 因为鼠标移动文档和iframe影响不能move
let dragFlag = $ref(false)
function useDrag() {
  const dragDom = document.getElementById('panel-resize')
  if (dragDom) {
    dragDom.addEventListener('mousedown', e => {
      e.preventDefault()
      dragFlag = true
      document.onmousemove = e => {
        leftPanelWidth.value = e.clientX
      }
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
        dragFlag = false
        emit('resize')
      }
    })
  }
}

onMounted(() => {
  useDrag()
})
</script>

<template>
  <section class="drag-panel">
    <div class="drag-panel-left" :class="{ 'is-hidden': !leftPanelVisible }">
      <div class="drag-cover" v-if="dragFlag"></div>
      <slot name="left"></slot>
      <div class="panel-resize" id="panel-resize"></div>
      <div class="panel-icon" @click="leftPanelVisible = !leftPanelVisible">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 86" aria-hidden="true" width="16" height="86">
          <g fill="none" fill-rule="evenodd">
            <path
              class="path-wapper"
              d="M0 0l14.12 8.825A4 4 0 0116 12.217v61.566a4 4 0 01-1.88 3.392L0 86V0z"
              fill="#e1e4eb"></path>
            <path
              class="path-arrow"
              d="M10.758 48.766a.778.778 0 000-1.127L6.996 43l3.762-4.639a.778.778 0 000-1.127.85.85 0 00-1.172 0l-4.344 5.202a.78.78 0 000 1.128l4.344 5.202a.85.85 0 001.172 0z"
              fill="#8D9EA7"
              fill-rule="nonzero"></path>
          </g>
        </svg>
      </div>
    </div>
    <div class="drag-panel-right">
      <div class="drag-cover" v-if="dragFlag"></div>
      <slot name="right"></slot>
    </div>
  </section>
</template>

<style lang="scss">
.drag-panel {
  display: flex;
  height: calc(100vh - 110px);
}
.drag-panel-left {
  position: relative;
  width: v-bind(leftPanelWidthText);
  padding: 20px;
  background-color: #e1e4eb;
  border-radius: 6px;
  box-sizing: border-box;
  transition: all 0.1s;
  &.is-hidden {
    width: 0 !important;
    padding: 0;
    .panel-resize {
      display: none;
    }
    .panel-icon {
      left: -20px;
      right: 0;
    }
    .path-arrow {
      transform-origin: center center;
      transform: rotate(180deg);
    }
  }
  .panel-resize {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    cursor: col-resize;
    z-index: 999;
  }
  .panel-icon {
    position: absolute;
    top: 50%;
    right: -16px;
    width: 16px;
    height: 86px;
    transform: translateY(-50%);
    z-index: 100;
    cursor: pointer;
  }
}
.drag-panel-right {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: 20px;
}
.drag-cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
}
</style>
