@use '../../style/themes/default.scss' as *;
@use '../../style/util.scss' as *;
@use '../../ele-pro-table/style/css-var.scss' as *;
@use './css-var.scss' as *;

@include set-split-panel-var($ele);

.ele-split-panel {
  display: flex;
  position: relative;
  overflow: hidden;

  /* 边栏 */
  & > .ele-split-panel-wrap {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    transition: all eleVar('split-panel', 'collapse-transition');
    box-sizing: border-box;
    position: relative;
    opacity: 1;
  }

  .ele-split-panel-side {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    border: eleVar('split-panel', 'side-border');
    transition: all eleVar('split-panel', 'collapse-transition');
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
  }

  /* 内容 */
  & > .ele-split-panel-body {
    flex: 1;
    position: relative;
    box-sizing: border-box;
    overflow: auto;
  }

  /* 操作元素容器 */
  .ele-split-panel-tools {
    width: 0;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: calc(#{eleVar('split-panel', 'mask-index')} + 1);
  }

  /* 拉伸线 */
  .ele-split-panel-resize {
    height: 100%;
    width: eleVar('split-panel', 'resize-line-trigger');
    position: absolute;
    top: 0;
    left: calc(#{eleVar('split-panel', 'resize-line-trigger')} / 2 * -1);
    display: flex;
    justify-content: center;
    cursor: e-resize;

    &::after {
      content: '';
      width: eleVar('split-panel', 'resize-line-size');
      height: 100%;
    }

    &:hover::after {
      background: eleVar('split-panel', 'resize-line-hover-bg');
    }
  }

  /* 折叠按钮 */
  .ele-split-panel-collapse-btn {
    width: eleVar('split-panel', 'collapse-btn-width');
    height: eleVar('split-panel', 'collapse-btn-height');
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: calc(#{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1);
    margin-left: calc(#{eleVar('split-panel', 'collapse-btn-width')} / 2 * -1);
    background: eleVar('split-panel', 'collapse-btn-bg');
    box-shadow: eleVar('split-panel', 'collapse-btn-shadow');
    border: eleVar('split-panel', 'collapse-btn-border');
    border-radius: eleVar('split-panel', 'collapse-btn-radius');
    transition: all eleVar('split-panel', 'collapse-transition');
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    .ele-split-panel-collapse-icon {
      font-size: eleVar('split-panel', 'collapse-btn-font-size');
      color: eleVar('split-panel', 'collapse-btn-color');
      transition: all eleVar('split-panel', 'collapse-transition');
      transform: scaleX(1);
    }

    &:hover .ele-split-panel-collapse-icon {
      color: eleVar('split-panel', 'collapse-btn-hover-color');
    }

    /* 最大化按钮 */
    &.is-maximized-btn .ele-split-panel-collapse-icon {
      transform: scaleX(-1);
    }
  }

  /* 折叠按钮组 */
  .ele-split-panel-collapse-btn-group {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(#{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1);

    & > .ele-split-panel-collapse-btn {
      position: static;
      top: auto;
      left: auto;
      margin: 0;
    }
  }

  /* 折叠状态 */
  &.is-collapse > .ele-split-panel-wrap {
    & > .ele-split-panel-side {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;

      * {
        pointer-events: none !important;
      }
    }

    & > .ele-split-panel-tools {
      & > .ele-split-panel-resize {
        visibility: hidden;
        pointer-events: none;
      }

      & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
        transform: scaleX(-1);
      }

      & > .ele-split-panel-collapse-btn-group {
        & > .ele-split-panel-collapse-btn.is-collapse-btn {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;

          * {
            pointer-events: none;
          }
        }
      }
    }
  }

  /* 最大化状态 */
  &.is-maximized > .ele-split-panel-wrap {
    width: 100% !important;
    margin: 0 !important;

    & > .ele-split-panel-tools {
      & > .ele-split-panel-resize {
        visibility: hidden;
        pointer-events: none;
      }

      & > .ele-split-panel-collapse-btn-group > .ele-split-panel-collapse-btn {
        &.is-maximized-btn {
          opacity: 0;
          visibility: hidden;
          pointer-events: none;

          * {
            pointer-events: none;
          }
        }
      }
    }
  }

  /* 垂直 */
  &.is-vertical {
    flex-direction: column;

    & > .ele-split-panel-wrap {
      flex-direction: column;

      & > .ele-split-panel-tools {
        height: 0;
        width: 100%;
        left: 0;
        bottom: 0;
        top: auto;
        right: auto;

        & > .ele-split-panel-resize {
          width: 100%;
          height: eleVar('split-panel', 'resize-line-trigger');
          top: calc(#{eleVar('split-panel', 'resize-line-trigger')} / 2 * -1);
          left: 0;
          flex-direction: column;
          cursor: n-resize;

          &::after {
            width: 100%;
            height: eleVar('split-panel', 'resize-line-size');
          }
        }

        & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
          transform: scaleY(1);
        }

        & > .ele-split-panel-collapse-btn-group {
          flex-direction: column;
          transform: translateY(-50%);
          margin-top: 0;
          margin-left: calc(
            #{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1
          );

          & > .ele-split-panel-collapse-btn.is-maximized-btn {
            .ele-split-panel-collapse-icon {
              transform: scaleY(-1);
            }
          }
        }
      }
    }

    &.is-collapse > .ele-split-panel-wrap > .ele-split-panel-tools {
      & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
        transform: scaleY(-1);
      }
    }

    &.is-maximized > .ele-split-panel-wrap {
      height: 100% !important;
      margin: 0 !important;
    }
  }

  /* 反向 */
  &.is-reverse {
    flex-direction: row-reverse;

    & > .ele-split-panel-wrap {
      flex-direction: row-reverse;

      & > .ele-split-panel-tools {
        left: 0;
        right: auto;

        & > .ele-split-panel-collapse-btn {
          left: auto;
          right: 50%;
          margin-left: 0;
          margin-right: calc(
            #{eleVar('split-panel', 'collapse-btn-width')} / 2 * -1
          );

          .ele-split-panel-collapse-icon {
            transform: scaleX(-1);
          }
        }

        & > .ele-split-panel-collapse-btn-group {
          flex-direction: row-reverse;

          & > .ele-split-panel-collapse-btn {
            .ele-split-panel-collapse-icon {
              transform: scaleX(-1);
            }

            &.is-maximized-btn .ele-split-panel-collapse-icon {
              transform: none;
            }
          }
        }
      }
    }

    &.is-collapse > .ele-split-panel-wrap > .ele-split-panel-tools {
      & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
        transform: scaleX(1);
      }
    }

    &.is-vertical {
      flex-direction: column-reverse;

      & > .ele-split-panel-wrap {
        flex-direction: column-reverse;

        & > .ele-split-panel-tools {
          top: 0;
          left: 0;
          right: auto;
          bottom: auto;

          & > .ele-split-panel-collapse-btn {
            top: auto;
            bottom: 50%;
            margin-top: 0;
            margin-bottom: calc(
              #{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1
            );

            .ele-split-panel-collapse-icon {
              transform: scaleY(-1);
            }
          }

          & > .ele-split-panel-collapse-btn-group {
            flex-direction: column-reverse;
            transform: translateY(-50%);
            margin-top: 0;
            margin-left: calc(
              #{eleVar('split-panel', 'collapse-btn-height')} / 2 * -1
            );

            & > .ele-split-panel-collapse-btn.is-collapse-btn {
              .ele-split-panel-collapse-icon {
                transform: scaleY(-1);
              }
            }
          }
        }
      }

      &.is-collapse > .ele-split-panel-wrap > .ele-split-panel-tools {
        & > .ele-split-panel-collapse-btn .ele-split-panel-collapse-icon {
          transform: scaleY(1);
        }
      }
    }
  }

  /* 拉伸状态 */
  &.is-resizing {
    user-select: none;

    * {
      user-select: none !important;
    }

    & > .ele-split-panel-wrap,
    & > .ele-split-panel-wrap > .ele-split-panel-side {
      transition: none;
    }

    & > .ele-split-panel-wrap > .ele-split-panel-tools {
      & > .ele-split-panel-resize::after {
        background: eleVar('split-panel', 'resize-line-hover-bg');
      }
    }
  }

  /* 遮罩层 */
  .ele-split-panel-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: all eleVar('split-panel', 'collapse-transition');
    background: eleVar('split-panel', 'mask-bg');
    z-index: eleVar('split-panel', 'mask-index');
    display: none;
  }

  /* 内部表格弹性布局 */
  &.is-flex-table {
    flex: 1;

    & > .ele-split-panel-body,
    & > .ele-split-panel-wrap > .ele-split-panel-side {
      display: flex;
      flex-direction: column;

      @include flex-pro-table();
    }
  }

  &.is-flex-auto-table {
    flex: auto;

    & > .ele-split-panel-body,
    & > .ele-split-panel-wrap > .ele-split-panel-side {
      display: flex;
      flex-direction: column;

      @include flex-auto-pro-table();
    }
  }
}

/* 侧栏顶部 */
.ele-split-panel-side-header,
.ele-split-panel-body-header {
  flex-shrink: 0;
  border-bottom: eleVar('split-panel', 'side-header-border');
  padding: eleVar('split-panel', 'side-header-padding');
  box-sizing: border-box;
  overflow: hidden;

  .el-form-item {
    margin-bottom: eleVar('split-panel', 'side-header-form-space');
  }

  & + .ele-pro-table {
    padding: eleVar('split-panel', 'table-padding');

    &.is-default-toolbar {
      padding: eleVar('split-panel', 'table-default-padding');
    }

    &.is-maximized > .ele-toolbar.is-plain {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

/* 主体顶部 */
.ele-split-panel-body-header {
  padding: eleVar('split-panel', 'body-header-padding');
}

/* 小屏幕样式 */
@media screen and (max-width: #{$mobile-max-width}) {
  .ele-split-panel.is-responsive:not(.is-vertical) {
    & > .ele-split-panel-wrap {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background: eleVar('split-panel', 'side-pop-bg');
      z-index: calc(#{eleVar('split-panel', 'mask-index')} + 1);

      & > .ele-split-panel-side {
        border: none;
      }
    }

    & > .ele-split-panel-mask {
      display: block;
    }

    &:not(.is-collapse) {
      & > .ele-split-panel-mask {
        visibility: visible;
        opacity: 1;
      }

      & > .ele-split-panel-body {
        z-index: 1;
      }
    }

    /* 反向 */
    &.is-reverse > .ele-split-panel-wrap {
      right: 0;
      left: auto;
    }
  }
}

@media screen and (max-height: #{$mobile-max-height}) {
  .ele-split-panel.is-responsive.is-vertical {
    & > .ele-split-panel-wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      background: eleVar('split-panel', 'side-pop-bg');
      z-index: calc(#{eleVar('split-panel', 'mask-index')} + 1);

      & > .ele-split-panel-side {
        border: none;
      }
    }

    & > .ele-split-panel-mask {
      display: block;
    }

    &:not(.is-collapse) {
      & > .ele-split-panel-mask {
        visibility: visible;
        opacity: 1;
      }

      & > .ele-split-panel-body {
        z-index: 1;
      }
    }

    /* 反向 */
    &.is-reverse > .ele-split-panel-wrap {
      bottom: 0;
      top: auto;
    }
  }
}