<template>
  <div class="wrap">
    <div class="head">
      <DesignLogo />
      <div class="title"><slot name="title"></slot></div>
      <div class="operation"> <slot name="close"></slot></div>
    </div>
    <div v-if="hasFullSlot" class="full-box"><slot name="full"></slot></div>
    <div class="box" v-else>
      <div class="left-box" ref="left">
        <slot name="left"></slot>
      </div>
      <div class="right-box" ref="right">
        <div
          class="fewer-panel-box"
          @click="changeShowPanel"
          :style="{ right: showPanel ? '10px' : '16px' }"
        >
          <component :is="fewerPanelComponent" />
        </div>
        <div
          v-if="!showPanel"
          style="border-bottom: 1px solid #eee"
          class="absolute left-0 right-0 top-49px"
        ></div>
        <div v-show="showPanel" class="right"><slot name="right"></slot></div
      ></div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { computed, ref, useSlots } from 'vue';
  import { FewerLeft, FewerRight } from '/@/components/ModalPanel';
  import { DesignLogo } from '/@/components/ModalPanel/index';
  let left = ref();
  let right = ref();
  let showPanel = ref(true);
  const hasFullSlot = computed(() => {
    return !!useSlots().full;
  });
  let fewerPanelComponent = computed(() => {
    return showPanel.value ? FewerRight : FewerLeft;
  });
  function showRightBox() {
    left.value.style.width = 'calc(100% - 350px)';
    right.value.style.width = '350px';
  }
  function hideRightBox() {
    left.value.style.width = 'calc(100% - 52px)';
    right.value.style.width = '52px';
  }
  function changeShowPanel() {
    showPanel.value = !showPanel.value;
    if (showPanel.value) {
      showRightBox();
    } else {
      hideRightBox();
    }
  }
</script>
<style lang="less" scoped>
  .wrap {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: #f0f0f0;

    .head {
      height: 70px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      position: relative;
      padding: 0 16px;
      margin-bottom: 12px;

      .title {
        position: absolute;
        left: 0;
        right: 0;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        text-align: center;
      }

      .operation {
        margin-right: 20px;
      }
    }
  }

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

  .full-box {
    padding: 0 20px;
  }

  .box {
    display: flex;
    height: calc(100% - 92px);

    .left-box {
      width: calc(100% - 360px);
      height: 100%;
      border-radius: 16px;
      background: #fff;
      margin: 0 10px 10px;
    }

    .right-box {
      border-radius: 16px;
      background: #fff;
      width: 350px;
      margin-right: 10px;
      position: relative;

      .right {
        height: 100%;
      }
    }

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

  :deep(.button-box) {
    display: flex;
    flex-direction: column;
  }

  :deep(.button-box button) {
    margin: 4px 0;
  }

  :deep(.clean-icon) {
    background-color: @clear-color;
    border-color: @clear-color;
  }
</style>
