.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 {
    .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;

          // ✨ 存在 drawer 再嵌入一个 TableLayout 组件的场景，需要去除 .table-layout,.table-layout__main padding
          .table-layout,
          .table-layout__main {
            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 {
      }
    }
  }
}

:global {
  .table-layout.table-layout--has-drawer {
    // - 打开抽屉时隐藏一些块
    & > .table-layout__main > .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 上
        // title
        .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);
      }
    }

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

    // // 【暂时舍弃】action
    // .genBlockAction(@n, @i: 1) when (@i =< @n) {
    //   &.tl-block-action--index-@{i} {
    //     .table-layout__table {
    //       // 列组
    //       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 block button
    //     .genBlockButton(@n1, @i1: 1) when (@i1 =< @n1) {
    //       &.tl-block-button--index-@{i1} {
    //         .ant-btn-link:nth-of-type(@{i1}) {
    //           display: block;
    //         }
    //       }
    //       .genBlockButton(@n1, (@i1 + 1));
    //     }
    //     .genBlockButton(5);
    //     // #endregion
    //   }
    //   .genBlockAction(@n, (@i + 1));
    // }
    // .genBlockAction(10);

    // // 【暂时舍弃】action 最有一个元素
    // &.tl-block-action--index-last {
    //   .table-layout__table {
    //     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 block button
    //   .genBlockButton(@n1, @i1: 1) when (@i1 =< @n1) {
    //     &.tl-block-button--index-@{i1} {
    //       .ant-btn-link:nth-of-type(@{i1}) {
    //         display: block;
    //       }
    //     }
    //     .genBlockButton(@n1, (@i1 + 1));
    //   }
    //   .genBlockButton(5);
    //   // #endregion
    // }
  }
}
