// animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
// @animation-duration-fast: 0.1s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;

.table-layout {
  // 固定模式下的表格布局
  &.fixed {
    :global {
      .ant-spin-nested-loading,
      .ant-spin-container {
        height: 100%;
      }

      .ant-table-wrapper {
        flex: 1;
        height: 0;
      }

      .ant-table {
        flex: 1;
        height: 0;

        display: flex;
        flex-direction: column;
      }
      .ant-table-container {
        /*
        去除左侧的线段，用其他手段补充
        .ant-table-header,.ant-table-body,.ant-table-summary {
          table {
            border-left: 1px solid #f0f0f0;
          }
        }
       */
        border-left: none !important;

        .ant-table-header,
        .ant-table-body,
        .ant-table-summary {
          table {
            border-left: 1px solid #f0f0f0;
          }
        }

        display: flex;
        flex-direction: column;

        flex: 1;
        height: 0;

        .ant-table-body {
          flex: 1;
          height: 0;
        }
      }

      // 暂时舍弃
      // .ant-table-empty {
      //   .ant-table-container {
      //     .ant-table-body {
      //       table {
      //         // 空数据时可以铺满表格
      //         height: 100%;
      //       }
      //     }
      //   }
      // }

      .ant-table-content {
        height: 100%;
      }
      .ant-spin-container {
        display: flex;
        flex-direction: column;
      }
      .ant-pagination {
        margin-bottom: 0;
      }
    }
  }

  // 一些内部组件样式控制
  :global {
    // drawer 动画，右侧滑出
    .drawer-fade-enter-active {
      transition: all @animation-duration-fast @animation-timing-function-enter;
    }
    .drawer-fade-leave-active {
      transition: all @animation-duration-fast @animation-timing-function-leave;
    }
    .drawer-fade-leave-to,
    .drawer-fade-enter-from {
      flex: 0 !important;
      width: 0 !important;
    }

    // filter-second 动画，下拉
    @keyframes slideUpIn {
      0% {
        transform: scaleY(0.8);
        transform-origin: 0% 0%;
        opacity: 0;
      }
      100% {
        transform: scaleY(1);
        transform-origin: 0% 0%;
        opacity: 1;
      }
    }
    @keyframes slideUpOut {
      0% {
        transform: scaleY(1);
        transform-origin: 0% 0%;
        opacity: 1;
      }
      100% {
        transform: scaleY(0.8);
        transform-origin: 0% 0%;
        opacity: 0;
      }
    }

    .filter-second-fade-enter-active:local {
      animation: slideUpIn @animation-duration-fast;
    }
    .filter-second-fade-leave-active:local {
      animation: slideUpOut @animation-duration-fast;
    }

    .filter-second-fade-enter-from,
    .filter-second-fade-leave-to {
      opacity: 0;
    }

    .table-layout {
      &__main {
        // background-color: #fff;
        // padding: 24px 32px;
      }
      &__drawer {
        background-color: #fff;
        margin-left: 24px;
        &-title-wrapper {
          .ant-btn + .ant-btn {
            margin-left: 8px;
          }
          // padding: 32px 32px;
          padding: 16px 32px;
          border-bottom: 1px solid #ebeff5;
        }
        &-title {
          font-size: 20px;
          font-weight: bold;
          color: #20272c;
          margin-right: 16px;
        }
        &-close {
        }
        &-main {
          // margin-top: 24px;
          // margin-bottom: 24px;

          // 1px 避免不该出现滚动条时出现滚动条
          // padding: 1px 32px;

          padding: 24px 32px;

          // ✨ 存在 drawer 再嵌入一个 TableLayout 组件的场景，需要去除 .table-layout,.table-layout__main-inner padding
          .table-layout,
          .table-layout__main-inner {
            padding: 0;
          }
        }
      }
      &__filter {
        margin-bottom: 16px - 8px;
        &,
        &-left {
          .ant-form-inline {
            .ant-form-item {
              margin-bottom: 8px;
              &:not(:last-of-type) {
                margin-right: 8px;
              }
            }
          }
          .ant-btn {
            margin-bottom: 8px;
            &:not(:last-of-type) {
              margin-right: 16px;
            }
          }
        }
        &-right {
          // margin-left: 32px;
        }

        &-second {
          // margin-top: 16px;
          margin-bottom: 16px;
          padding: 24px;
          padding-bottom: 24px - 8px;
          background: #fafbfc;

          .ant-form-inline {
            .ant-form-item {
              .ant-form-item-control-input {
                min-height: auto;
              }
              margin-bottom: 8px;
              &:not(:last-of-type) {
                margin-right: 8px;
              }
            }
          }
        }
      }
      &__table {
      }
    }

    // 舍弃移动到 fakeStyle，更精确的高亮
    // // ✨ 自定义行属性，ant-table-row-selected-custom，用来处理 点击编辑/详情按时 && 拉出抽屉，左边要高亮
    // .ant-table-tbody > .ant-table-row[ant-table-row-selected-custom='true'] {
    //   & > td {
    //     background: #f9fbff;
    //     border-color: rgba(0, 0, 0, 0.03);
    //   }
    // }
  }

  // 打开抽屉的一些控制
  &:global {
    &.table-layout--has-drawer {
      // - 打开抽屉时隐藏一些块
      & > .table-layout__main > .table-layout__main-inner > .table-layout {
        &__filter,
        &__filter-second {
          display: none;
        }
        &__table {
          // 直接隐藏title
          // 直接隐藏头部
          // 直接隐藏底部
          // 直接隐藏总结栏
          .ant-table-title,
          .ant-table-thead,
          .ant-table-footer,
          .ant-table-summary {
            display: none;
          }

          // 直接隐藏总结分页部分
          .ant-pagination {
            .ant-pagination-options {
              display: none;
            }
          }

          // - 表格相关
          // 去除可能存在的超出宽度滚动
          &.tl-table-width-auto {
            .ant-table-body {
              // // 只设置了 scroll:{x:1200,y:undefined} 的场景，暂不考虑
              // .ant-table-content
              & > table {
                width: 100% !important;
              }
            }
          }

          // - 先隐藏所有单元格和操作按钮
          // 列组
          colgroup col {
            display: none;
          }
          .ant-table-tbody {
            tr td {
              display: none;

              // 隐藏所有操作按钮
              .ant-btn-link {
                display: none;
              }
            }
          }

          // - 针对显示一些单元格，tl-visible-column--index-x class 会被添加到 table-layout__table 上
          .genVisibleColumn(@n, @i: 1) when (@i =< @n) {
            &.tl-visible-column--index-@{i} {
              // 列组
              colgroup col:nth-of-type(@{i}) {
                display: table-cell;
              }

              // 表格 body 的单元格
              .ant-table-tbody {
                tr td:nth-of-type(@{i}) {
                  display: table-cell;
                }
              }
            }
            .genVisibleColumn(@n, (@i + 1));
          }
          .genVisibleColumn(10);

          // - 针对显示操作列单元格，tl-visible-action--index-x class 会被添加到 table-layout__table 上
          // 1. action
          .genVisibleAction(@n, @i: 1) when (@i =< @n) {
            &.tl-visible-action--index-@{i} {
              // 列组
              colgroup col:nth-of-type(@{i}) {
                display: table-cell;
              }

              // 表格 body 的单元格
              .ant-table-tbody {
                tr td:nth-of-type(@{i}) {
                  display: table-cell;
                  // 按钮居中，因为只有一个按钮，无论如何都要居中
                  // display: flex;
                  // justify-content: center;
                  // 按钮 margin = 0
                  .ant-btn-link {
                    margin: 0;
                    width: 100%;

                    // position: absolute;
                    // left: 50%;
                    // top: 50%;
                    // transform: translate(-50%, -50%);
                  }
                }
              }

              // #region visible button
              .genVisibleButton(@n1, @i1: 1) when (@i1 =< @n1) {
                &.tl-visible-button--index-@{i1} {
                  .ant-btn-link:nth-of-type(@{i1}) {
                    display: block;
                  }
                }
                .genVisibleButton(@n1, (@i1 + 1));
              }
              .genVisibleButton(5);
              // #endregion
            }
            .genVisibleAction(@n, (@i + 1));
          }
          .genVisibleAction(10);

          // 2. action 最有一个元素
          &.tl-visible-action--index-last {
            colgroup col:last-of-type {
              display: table-cell;
            }
            .ant-table-tbody {
              tr td:last-of-type {
                display: table-cell;
                // 按钮居中，因为只有一个按钮，无论如何都要居中
                // display: flex;
                // justify-content: center;
                // 按钮 margin = 0
                .ant-btn-link {
                  margin: 0;
                  width: 100%;
                  // height: 32px;
                  // position: absolute;
                  // left: 50%;
                  // top: 50%;
                  // transform: translate(-50%, -50%);
                }
              }
            }

            // #region visible button
            .genVisibleButton(@n1, @i1: 1) when (@i1 =< @n1) {
              &.tl-visible-button--index-@{i1} {
                .ant-btn-link:nth-of-type(@{i1}) {
                  display: block;
                }
              }
              .genVisibleButton(@n1, (@i1 + 1));
            }
            .genVisibleButton(5);
            // #endregion
          }
        }
      }

      // // 设置表格的单元格自动分配宽度，暂时舍弃
      // .ant-table-header,
      // .ant-table-body {
      //   & > table {
      //     table-layout: auto !important;
      //   }
      //   colgroup {
      //     col {
      //       width: auto !important;
      //     }
      //   }
      // }
    }
  }
}
