// animation
@animation-duration-base: 0.3s;
// TODO:0.15s ?
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;
// @animation-timing-function-enter: linear;
// @animation-timing-function-leave: linear;

.table-layout {
  // 解决 card 模式下 tl 没有 main 的时莫名出现滚动条问题
  padding-bottom: 1px;

  :global {
    .ant-table-small .ant-table-selection-column {
      // antd 不知道为什么要固定 width 46px，这里放开，避免抽屉展开时变窄
      width: auto;
    }
  }

  :global {
    // ✨ ✨ ✨ 设置动画以平滑过度，否则会太突兀（因为是用浮动进行布局），需要等待抽屉收起
    .filter-fade-enter-active {
      // transition: opacity @animation-duration-base @animation-duration-fast
      //   ease-out;
      transition: opacity @animation-duration-base 0.3s ease-out;
    }
    .filter-fade-enter-from {
      opacity: 0;
    }
  }

  // 固定模式下的表格布局
  &:global {
    &.table-layout--fixed {
      // ⚠️ 严格使用 ”>“ 子集，不影响更深的子集

      // #region ✨ ✨ ✨ scrollBar 相关处理，.table-layout--not-scrollbar
      // 当外层有 <tl-main/> 的话，会有两个样式.table-layout__main和.table-layout__main-inner，还需要处理没有 tl-main 的场景
      &.table-layout--not-scrollbar > .table-layout__main > .table-layout__main-inner > .table-layout__table,
      // 处理没有 <tl-main/> 的场景
      &.table-layout--not-scrollbar > .table-layout__table {
        .ant-table-header {
          // ✨ 隐藏 .ant-table-cell.ant-table-cell-scrollbar，因为在抽屉打开时，colgroup 最后一个 col 的隐藏并不会有效果
          .ant-table-cell.ant-table-cell-scrollbar {
            display: none;
          }
        }
      }
      // #endregion

      // #region 修复表格 scrollbar 问题开关，需要开启 table-layout--fix-table-scrollbar 类名
      &.table-layout--fix-table-scrollbar > .table-layout__main > .table-layout__main-inner > .table-layout__table,
      // 处理没有 tl-main 的场景
      &.table-layout--fix-table-scrollbar > .table-layout__table {
        // ✨ 处理在 table-layout 固定模式下的滚动条问题
        // [table 表，scroll 同时使用 x 和 y 时，表头与列错位--如 demo #1658](https://github.com/vueComponent/ant-design-vue/issues/1658)
        // [antd y 轴设置 scroll 应该和表头固定有关系，详细看评论](https://github.com/vueComponent/ant-design-vue/issues/1658)
        // [表格组件，滚动设置 y 时，下拉条出现的不合理 #1697](https://github.com/vueComponent/ant-design-vue/issues/1697)
        // ✨ ✨ ✨ 已实现
        .ant-table-body {
          overflow-y: auto !important;
        }
      }
      // #endregion

      // 当外层有 <tl-main/> 的话，会有两个样式.table-layout__main和.table-layout__main-inner，还需要处理没有 tl-main 的场景
      & > .table-layout__main > .table-layout__main-inner > .table-layout__table,
      // 处理没有 tl-main 的场景
      & > .table-layout__table {
        // TableTop
        .table-layout__table-top {
          padding-bottom: 18px;
          color: #20272c;
          font-weight: bold;
          font-size: 20px;
        }

        .ant-spin-nested-loading {
          height: 100%;
          & > .ant-spin-container {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
        }
        .ant-table-wrapper {
          flex: 1;
          height: 0;
        }
        .ant-table {
          flex: 1;
          height: 0;

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

          // 📝 去掉注册的 wheel 事件（左右滚动），antdv 有 bug。对比 element-plus 表格的左右滚动也仅限在 table body 区域
          // ❌ 会导致子元素也无法点击
          // ✅ patch antd 的包，不要注册 wheel 事件
          // .ant-table-header,
          // .ant-table-summary {
          //   pointer-events: none;
          // }

          display: flex;
          flex-direction: column;

          flex: 1;
          height: 0;
          .ant-table-body {
            flex: 1;
            height: 0;
          }
        }
        .ant-table-content {
          height: 100%;
        }
        .ant-pagination {
          margin-bottom: 0;
        }

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

    // ✨ ✨ ✨ card mode
    &.table-layout--card {
      // #region card 模式下一些间距调整
      // .table-layout__filter {
      //   margin-bottom: 20px - 8px;
      // }

      .table-layout__filter-second {
        margin-bottom: 12px;
        // padding: 22px - 8px 22px 22px - 8px * 2;
        background: #ffffff;
      }
      // #endregion

      // 有 main 的场景下（有 drawer 就肯定有 main）
      // ⚠ ⚠ ⚠  main 中没有表格的场景，不需要做这个处理
      & > .table-layout__main:not(.not-table) {
        background-color: transparent;
      }
      & > .table-layout__main > .table-layout__main-inner:not(.not-table) {
        padding: 0 0 !important;
      }

      // 有 main 的场景下
      &
        > .table-layout__main
        > .table-layout__main-inner
        > .table-layout__table,
        
      // 没有 main 的场景下
      & > .table-layout__table {
        background-color: white;
        padding: 24px 32px;
        // padding: 26px 30px;
      }
    }
  }

  // 一些内部组件样式控制
  :global {
    // drawer 动画，右侧滑出
    .drawer-fade-enter-active {
      transition: flex @animation-duration-fast @animation-timing-function-enter;
    }
    .drawer-fade-leave-active {
      transition: flex @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;
      }

      // 📝 或者使用 antd 原来的 drawer，antd 的 drawer 在布局外部，所以是全局样式 drawer--origin
      &__drawer {
        background-color: #fff;
        margin-left: 24px;

        // drawer 下的 loading 高度100%
        & > .ant-spin-nested-loading {
          height: 100%;
          & > .ant-spin-container {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
        }

        &-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;
          }
        }
        &-buttons {
          .ant-btn + .ant-btn {
            margin-left: 16px;
          }
          // 用样式使 a-button 符合 UI，不在乎外部的 button size
          .ant-btn {
            height: auto !important;
            padding: 4px 15px !important;
          }
        }
      }
      &__filter {
        margin-bottom: 16px - 8px;

        // renderCustom 自定义渲染
        &.table-layout__filter-render-custom {
          // tabs 场景
          &.tabs {
            // 去掉原本的 mb，使用 a-tabs 的 mb 刚好这里的 mb=16px 符合 UI
            margin-bottom: 0;
            .ant-tabs {
              width: 100%;
              .ant-tabs-extra-content {
                flex: unset;
              }
            }

            // 默认在根部还是会有 a-form（目的是为了保持 a-form-item 外层有 a-form 的结构） ，但是要对 a-form-inline 进行样式上的修改
            .ant-form-inline {
              width: 100%;
            }

            // 相当于 a-tabs 的右侧扩展代替了 a-form
            .ant-tabs-extra-content {
              display: flex;
              flex-wrap: wrap;

              // ✨ 保持表单组件和按钮设置成 size=small 的时候可以垂直对齐
              // align-items: center;
            }
          }

          // 其他...
        }

        &,
        &-left {
          .ant-form-inline {
            // ✨ 保持表单组件和按钮设置成 size=small 的时候可以垂直对齐
            // align-items: center;

            // 预留可以为表单项设置 label
            .ant-form-item-label > label {
              color: #1c2125;
              &::after {
                content: '';
              }
            }

            // [last-of-type not working?](https://segmentfault.com/q/1010000041717737?utm_source=sf-hot-question)
            .ant-form-item {
              margin-bottom: 8px;
              &:not(:last-of-type) {
                margin-right: 8px;
              }
              // // 去掉最小高，方便控制垂直对齐
              // .ant-form-item-control-input {
              //   min-height: auto;
              // }
            }
          }
          .ant-btn {
            margin-bottom: 8px;
            &:not(:last-of-type) {
              margin-right: 16px;
            }
          }
        }
        &-right {
        }

        // ”更多按钮“
        &-button {
          .table-layout__filter-button-icon {
            transition: transform @animation-duration-fast linear;
            &.open {
              transform: rotate(180deg);
            }
          }
        }

        &-second {
          margin-bottom: 16px;
          // padding: 24px;

          // second 里的表单元素需要手动设置成 small，这里迎合 UI 间距，做了 padding 处理
          padding: 24px - 8px 24px 24px - 8px * 2;
          background: #fafbfc;

          .ant-form-inline {
            // ✨ 保持表单组件和按钮设置成 size=small 的时候可以垂直对齐
            // align-items: center;

            // 预留可以为表单项设置 label
            .ant-form-item-label > label {
              color: #1c2125;
              &::after {
                content: '';
              }
            }

            .ant-form-item {
              margin-bottom: 8px;
              &:not(:last-of-type) {
                margin-right: 8px;
              }
              // // 去掉最小高，方便控制垂直对齐
              // .ant-form-item-control-input {
              //   min-height: auto;
              // }
            }
          }
          .ant-btn {
            margin-bottom: 8px;
            &:not(:last-of-type) {
              margin-right: 16px;
            }
          }
        }
      }
      &__table {
      }
    }
  }

  // 打开抽屉的一些控制
  &:global {
    &.table-layout--has-drawer {
      // - 打开抽屉时隐藏一些块
      & > .table-layout__main > .table-layout__main-inner > .table-layout {
        // ✨ &__filter 改用 vue 动画平滑处理
        // &__filter,
        &__filter-second {
          display: none;
        }
        &__table {
          // 直接隐藏title
          // 直接隐藏底部
          // 直接隐藏总结栏
          .ant-table-title,
          .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;
          }

          // 表格 head 的单元格
          // 📝 表格头部 antd 有做了兼容滚动条宽度的处理，会判断当前是否有滚动条，并在 .ant-table-thead tr 后面追加 一个th
          .ant-table-thead {
            // tr th {
            //   display: none;
            // }
            // 不对最后的 ant-table-cell-scrollbar 隐藏
            tr th:not(.ant-table-cell-scrollbar) {
              display: none;
            }

            tr th.ant-table-cell-scrollbar {
              width: 0;
              // 目前自定义的滚动条大小宽度为 8，加上 important
              // padding: 4px 4px;
              padding: 4px 4px !important;
            }

            // ✨ 抽屉展开时，不展示 soter，filter，还有自定义的 table-columns-operate
            .ant-table-column-sorter,
            .ant-table-filter-trigger,
            .table-columns-operate__trigger-icon {
              display: none;
            }

            // 处理不能调整表格大小
            .ant-table-resize-handle {
              pointer-events: none;
            }
          }

          .ant-table-tbody {
            tr td {
              display: none;

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

          // 隐藏 border-right
          // ✨ 由于 antd 表格的一些机制问题，当表格出现滚动条时，打开抽屉。会导致列头与内容不对齐的现象，这里做简单处理，直接隐藏表头的 th border-right
          // 📝 暂时不做处理了，目前应该没有问题了
          // .ant-table.ant-table-bordered
          //   > .ant-table-container
          //   > .ant-table-header
          //   > table
          //   > thead
          //   > tr
          //   > th {
          //   border-right: none;
          // }

          // // 当 columns 配置 fixed:right 要另外配置
          // .ant-table.ant-table-bordered
          //   > .ant-table-container
          //   > .ant-table-header
          //   > table
          //   > thead
          //   > tr
          //   > .ant-table-cell-fix-right-first::after {
          //   border-right: 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;
              }

              // 表格 head 的单元格
              .ant-table-thead {
                tr th: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;
              }

              // 表格 head 的单元格
              .ant-table-thead {
                tr th: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.1 action 最后一个元素
          // 📝 ref：https://stackoverflow.com/questions/8168720
          &.tl-visible-action--index-last {
            colgroup col:last-of-type {
              display: table-cell;
            }

            .ant-table-thead {
              tr th:last-of-type {
                display: table-cell;
              }
              // tr th:nth-last-child(2) {
              //   display: table-cell;
              // }
              // tr th:nth-last-of-type(2) {
              //   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
          }
          // 2.2 action 倒数第二个元素，内部通过计算的结果
          &.tl-visible-action--index-nth-last-of-type-2 {
            // 只需要更改头部的位置，下面保持取最后一个元素
            colgroup col:nth-last-of-type(2) {
              display: table-cell;
            }

            // 只需要更改头部的位置，下面保持取最后一个元素
            .ant-table-thead {
              tr th:nth-last-of-type(2) {
                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
          }

          // // #region 有复选框直接隐藏列组，及对应的单元格，先舍弃，后续看情况再定
          // colgroup col.ant-table-selection-col {
          //   display: none !important;
          // }
          // .ant-table-thead {
          //   tr th.ant-table-selection-column {
          //     display: none !important;
          //   }
          // }
          // // 表格 body 的单元格
          // .ant-table-tbody {
          //   tr td.ant-table-selection-column {
          //     display: none !important;
          //   }
          // }
          // // #endregion
        }
      }

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

// 全局样式，这里的样式与 __drawer 样式类似
:global {
  .table-layout__drawer--ant {
    .ant-drawer-body {
      height: 100%;
      padding: 0;
      .table-layout__drawer {
        background-color: #fff;
        margin-left: 0 !important;
        height: 100%;
        & > .ant-spin-nested-loading {
          height: 100%;
          & > .ant-spin-container {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
        }
        &-main {
          padding: 24px 32px;
          // ✨ 存在 drawer 再嵌入一个 TableLayout 组件的场景，需要去除 .table-layout,.table-layout__main-inner padding
          .table-layout,
          .table-layout__main-inner {
            padding: 0;
          }
        }
        &-buttons {
          .ant-btn + .ant-btn {
            margin-left: 16px;
          }
          // 用样式使 a-button 符合 UI，不在乎外部的 button size
          .ant-btn {
            height: auto !important;
            padding: 4px 15px !important;
          }
        }
      }
    }
  }

  @unity-screen-md-max: 1366px;
  // 📝 mini版本，也把样式写在这里，g.less 也有，因为 mini版本会在业务项目中移除 g.less
  @media screen and (max-width: @unity-screen-md-max) {
    // ant 自带 drawer，控制小屏下最小宽度
    .table-layout__drawer--ant {
      .ant-drawer-content-wrapper {
        min-width: 80%;
      }
    }
  }
}
