<template>
  <div class="page_main h-100">
    <!-- 头部插槽 -->
    <div v-if="$slots.header" class="page_header">
      <slot name="header" />
    </div>

    <div class="layout_wrap" :style="wrapStyle">
      <!-- 左侧插槽 -->
      <div
        v-if="$slots.page_left"
        class="page_left"
        :class="[isLeft ? 'page_left_true' : 'page_left_false']"
        :style="leftStyle"
      >
        <slot name="page_left" />
      </div>

      <!-- 分隔栏 / 折叠按钮 -->
      <div v-if="props.isleftshow" class="separation">
        <span
          class="left_toggle"
          :title="isLeft ? '点击收起' : '点击展开'"
          @click="leftChange"
        >
          <i :class="isLeft ? 'el-icon-caret-left' : 'el-icon-caret-right'" />
        </span>
      </div>

      <!-- 右侧插槽 -->
      <div v-if="$slots.page_right" class="page_right" :style="rightStyle">
        <slot name="page_right" />
      </div>

      <!-- 默认插槽 -->
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, useAttrs } from 'vue'
import type { CSSProperties } from 'vue'
const props = defineProps({
  isleftshow: {
    type: Boolean,
    default: true,
  },
})

// 获取透传的 attrs，并定义类型
interface CustomAttrs {
  leftStyle?: CSSProperties
  rightStyle?: CSSProperties
  style?: CSSProperties
}
const attrs = useAttrs() as CustomAttrs

const isLeft = ref(true)

const leftChange = () => {
  isLeft.value = !isLeft.value
}

const leftStyle = computed<CSSProperties>(() => {
  const { leftStyle = {} } = attrs
  const { width = '200px', ...rest } = leftStyle
  return {
    ...rest,
    width: isLeft.value ? width : '1px',
  }
})

const rightStyle = computed<CSSProperties>(() => attrs.rightStyle || {})
const wrapStyle = computed<CSSProperties>(() => attrs.style || {})
</script>

<style scoped>
.page_main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  position: relative;
}
.page_main .layout_wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
/* .page_main:not(.mobile) {
  margin-right: 54px;
} */
.page_main.row .layout_wrap {
  flex-direction: row;
  background: #fff;
}
.page_main.wrap .layout_wrap {
  background: #fff;
  box-sizing: border-box;
  border-radius: 10px;
  padding-top: 10px;
}
.page_main.wrap .layout_wrap :deep(form:nth-of-type(1)) {
  margin-left: 10px;
}
.page_main.mobile {
  height: calc(100% - 9.333vw);
}
.page_header {
  background: #fff;
  padding-top: 10px;
  margin-bottom: 10px;
}
.page_left {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100%;
  background: var(--background-color);
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  overflow: auto;
  border-right: 1px solid #ddd;
}
.separation {
  display: none;
  position: relative;
  width: 1px;
}
.row .separation {
  display: block;
}
.separation .left_toggle {
  position: absolute;
  right: -16px;
  width: 17px;
  height: 24px;
  background: #dedede;
  z-index: 1000;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.separation .left_toggle::before {
  position: absolute;
  width: 0px;
  height: 0px;
  content: '';
  top: 10px;
  left: -12px;
  pointer-events: none;
  transform: rotate(45deg);
  border-width: 12px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0) #dedede rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  border-radius: 5px;
}
.separation .left_toggle::after {
  position: absolute;
  width: 0px;
  height: 0px;
  top: -10px;
  left: -12px;
  pointer-events: none;
  content: '';
  transform: rotate(-45deg);
  border-width: 12px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0) #dedede rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  border-radius: 5px;
}
.separation .left_toggle i {
  display: block;
  margin-top: 3px;
  pointer-events: none;
}
.separation:hover .left_toggle {
  display: block;
}
.page_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.page_main:not(.drag) .page_right {
  background: var(--background-color);
  border-radius: 5px 5px 0 0;
  padding-top: 10px;
  box-sizing: border-box;
}
/* 深度选择器 */
.page_main .page_right :deep(form:nth-of-type(1)),
.page_main .page_left :deep(form),
.page_main.drag :deep(form) {
  padding-left: 10px;
}
.page_main.drag .page_right {
  background: transparent;
}
</style>
