@import "../../style/index.less";
@import "../../style/mixin/textrequired";
@import "../../formcontrols/checkbox/style/mixin.less";

@ui-prefix-table: yyui-table;
@ui-prefix-table-icon: yyui-icon;
@table-prefix-cls: ant-table;
@table-head-background-color: #f7f7f7;

.yyui-table-wrapper {
  position: relative;
  .table-resizer-line {
    top: 0;
    position: absolute;
    cursor: col-resize;
    border-right-style: solid;
    border-right-width: 1px;
    box-sizing: border-box;
    z-index: 10;
    border-color: @success-color;
  }
  .ant-table-thead {
    th {
      position: relative;
      .table-resizer-label:hover{
        border-left:1px solid @success-color;
        border-right:1px solid @success-color;
        cursor: ew-resize;
      }

      > span {
        white-space: nowrap;
      }
    }
    .table-resizer-label {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 5px;
    }
  }
}
//@table-border-color-split:#e2e2e2;
.@{ui-prefix-table} {
  //  修复edittabel下文本框清除按钮错位的问题
  .yyui-input{
    .yyui-input-clear{
      display: none;
      padding:0
    }
    &:hover{
      .yyui-input-clear{
        display:inline-block;
      }
    }
  }
  .yyui-select,
  .yyui-autoselect,
  .yyui-enumselect{
    width:100%;
  }
  .yyui-inputnumber .ant-input-number{
    width: 100%;
  }

  &.row-break{
    //单元格内容换行显示
    .@{table-prefix-cls} {
      td {
        white-space: pre-wrap;
      }
    }
  }


  .@{table-prefix-cls}-fixed-header .@{table-prefix-cls}-body-inner {
    overflow: auto;
  }

  .@{table-prefix-cls}-fixed-header .@{table-prefix-cls}-scroll .@{table-prefix-cls}-header {
    overflow: hidden;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

  .@{table-prefix-cls}-fixed-header .@{table-prefix-cls}-scroll .@{table-prefix-cls}-bottom {
    overflow: hidden;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

  .@{table-prefix-cls}-content .@{table-prefix-cls}-fixed-right{
    box-shadow: none;
  }
  .@{table-prefix-cls}-content.has-scroll-x .@{table-prefix-cls}-fixed-right{
    box-shadow: @shadow-1-left;
  }

  .@{table-prefix-cls}.@{table-prefix-cls}-scroll-position-left .@{table-prefix-cls}-fixed-left {
    box-shadow: none;
  }
  .@{table-prefix-cls}.@{table-prefix-cls}-scroll-position-right .@{table-prefix-cls}-fixed-right {
    box-shadow: none;
  }

  .@{table-prefix-cls} {
    &-thead {
      //标题文本必填
      th.title-required::before{
        .text-required;
      }
      //标题文本右对齐
      th.title-right{
        text-align: right;
      }
      //标题文本居中对齐
      th.title-center{
        text-align: center;
      }
    }
    .checkbox;
    font-size: @font-size-normal;
    color: @text-color;
    overflow: hidden;
    position: relative;
    border-radius: 0;


    &-body {
      background-color: #fff;
      transition: opacity 0.3s ease;
    }

    &-tbody,tfoot.yyui-table-inner-total{
      //内容文本右对齐
      td.text-right{
        text-align: right;
      }
      //内容文本居中对齐
      td.text-center{
        text-align: center;
      }
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      text-align: left;
      border-radius: 0;
      overflow: hidden;
      table-layout:fixed
    }

    th {
      background: @table-head-background-color;
      font-weight: normal;
      color:#666;
      transition: background .3s ease;
      text-align: left;
      //超长文本显示...
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: pre;
      //.anticon-filter {
      //  margin-left: 4px;
      //  .iconfont-size-under-12px(10px);
      //  cursor: pointer;
      //  color: #aaa;
      //  transition: all 0.3s ease;
      //  &:hover {
      //    color: #666;
      //  }
      //}
      .@{table-prefix-cls}-filter-selected.anticon-filter {
        color: @primary-color;
      }

    }

    td {
      border-bottom: 1px solid @border-color-split;
      //超长文本显示...
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: pre;
      position: relative;
    }

    tr {
      transition: all .3s ease;
      //斑马线
      //&:nth-child(even){
      //  background-color: #f3fbfb;
      //}
      .yyui-table-row-menu{
        display: none;
        position: absolute;
        right: 6px;
        top:0px;
        height: 100%;
        .yyui-popover{
          width: 26px;
          height: 26px;
          border: 1px solid @border-color-split;
          border-radius: 13px;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      &.yyui-table-row-selected,
      &:hover{
        .yyui-table-row-menu{
          display: inline-flex;
          align-items: center;
        }
      }

      &.@{table-prefix-cls}-row-hover,
      //展开行时不提供hover
      &:hover:not(.@{table-prefix-cls}-expanded-row):not(.yyui-table-inner-filter-row):not(.yyui-table-inner-total-row):not(.yyui-table-row-selected){
        background: tint(@primary-color, 75%);
      }
    }

    thead tr:hover {
      background: none;
    }

    &-footer {
      padding: 16px 8px;
      background: @table-head-background-color;
      position: relative;
      top: -1px;
      border-radius: 0;
    }

    &.@{table-prefix-cls}-bordered &-footer {
      border: 1px solid @border-color-split;
    }

    &-title {
      padding: 16px 8px;
      position: relative;
      top: 1px;
      border-radius: 0;
    }

    &.@{table-prefix-cls}-bordered &-title {
      border: 1px solid @border-color-split;
    }

    &-title + &-content {
      position: relative;

      table {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }

    tr.@{ui-prefix-table}-row-selected {
      background: #fbf6aa;
      //&:hover {
    //  background: tint(@primary-color, 75%);
      //}
      .YYTableRowMenu {
        display: block !important;
      }
    }

    th.@{table-prefix-cls}-column-sort {
      background: #eaeaea;
    }

    th,
    td {
      padding: 16px 8px;
      word-break: break-all;
    }

    th.@{table-prefix-cls}-selection-column,
    td.@{table-prefix-cls}-selection-column {
      text-align: center;
      width: 60px;
      background: @table-head-background-color;
      label{
        margin: 0;//解决外部（bootstrap等）全局label样式撑开勾选框导致表格行错位问题
      }
    }
    th.@{table-prefix-cls}-rownum,
    td.@{table-prefix-cls}-rownum {
      text-align: center;
      width: 50px;
      background: @table-head-background-color;
    }

    &-header {
      background: @table-head-background-color;
      overflow: hidden;
      border-radius: 0;
      table {
        border:0;
        border-radius: 0;
      }
    }

    &-loading {
      position: relative;
      .@{table-prefix-cls}-body {
        background: #fff;
        opacity: 0.5;
      }
      .@{table-prefix-cls}-spin-holder {
        height: 20px;
        line-height: 20px;
        left: 50%;
        top: 50%;
        margin-left: -30px;
        position: absolute;
      }
      .@{table-prefix-cls}-with-pagination {
        margin-top: -20px;
      }
      .@{table-prefix-cls}-without-pagination {
        margin-top: 10px;
      }
    }

    //内嵌列合计统计
    tfoot.yyui-table-inner-total{
      background: @table-head-background-color;
      :hover{
        background: @table-head-background-color;
      }
      //采用 代替
      //.empty{
      //  text-indent: -100%;
      //  text-align: initial;//防止right冲突
      //}
    }

    &-middle {
      th,
      td {
        padding: 10px 8px;
      }
    }

    &-small {
      border: 1px solid @border-color-split;
      border-radius: 0;

      table {
        border: 0;
        padding: 0 8px;
      }

      th {
        padding: 10px 8px;
        background: #fff;
        border-bottom: 1px solid @border-color-split;
      }

      td {
        padding: 6px 8px;
      }

      .@{table-prefix-cls}-header {
        background: #fff;
        table {
          border-bottom: 1px solid @border-color-split;
        }
        th {
          border-bottom: 0;
        }
      }

      .@{table-prefix-cls}-row:last-child td {
        border-bottom: 0;
      }
    }

    &-column-sorter {
      margin-left: 4px;
      display: inline-block;
      width: 12px;
      height: 15px;
      vertical-align: middle;
      text-align: center;
      &-up,
      &-down {
        line-height: 4px;
        height: 6px;
        display: block;
        width: 12px;
        cursor: pointer;
        &:hover .anticon {
          color: #666;
        }
        &.on {
          .anticon-caret-up,
          .anticon-caret-down {
            color: @primary-color;
          }
        }
      }
      //.anticon-caret-up,
      //.anticon-caret-down {
      //  .iconfont-size-under-12px(6px);
      //  line-height: 6px;
      //  height: 6px;
      //  color: #aaa;
      //  &:before {
      //    -moz-transform-origin: 53% 50%; /* fix firefox position */
      //  }
      //}
    }

    &-bordered {
      &.@{table-prefix-cls}-fixed-header {
        //table {
        //  border: 0;
        //}
        .@{table-prefix-cls}-fixed-left {
          border-width: 0 1px 0 0;
        }
        .@{table-prefix-cls}-fixed-right {
          border-width: 0 0 0 1px;
        }
      }

      //.@{table-prefix-cls}-center .@{table-prefix-cls}-header {
      //  table:not(.yyui-titlegroup){
      //    border-left: 1px solid @border-color-split;
      //    border-top: 1px solid @border-color-split;
      //    border-right: 1px solid @border-color-split;
      //  }
      //  .@{table-prefix-cls}-thead > tr > th {
      //    border-bottom: 0;
      //  }
      //}

      .@{table-prefix-cls}-fixed-left {
        //box-shadow: @shadow-1-right;
        border-left: 1px solid @border-color-split;
        border-top: 1px solid @border-color-split;
        border-bottom: 1px solid @border-color-split;
      }
      .@{table-prefix-cls}-fixed-right {
        //box-shadow: @shadow-1-left;
        border-right: 1px solid @border-color-split;
        border-top: 1px solid @border-color-split;
        border-bottom: 1px solid @border-color-split;
      }


      //内嵌列合计统计带边框
      tfoot.yyui-table-inner-total{
        td{
          border-top: 1px solid @border-color-split;
        }
      }
      th {
        border-bottom: 1px solid @border-color-split;
      }

      tbody tr:last-child {
        th,
        td {
          border-bottom: 1px solid @border-color-split;
        }
      }
      //解决多表头里面的单元格缺失线的问题
      .yyui-titlegroup th{
          &:last-child {
            border-right: 1px solid @border-color-split;
          }
      }
      th,
      td {
        border-right: 1px solid @border-color-split;
        &:last-child {
          border-right: 0;
        }
      }
    }

    &-empty {
      position: relative;
      margin-bottom: 16px;
    }

    &-empty &-body {
      height: 150px;
    }

    &-placeholder {
      min-height: 100px;
      line-height: 100px;
      text-align: center;
      //font-size: 12px;
      padding: 0;
      color: #999;
      //border-bottom: 1px solid @border-color-split;
      //position: relative;
      //top: 0px;
      //left: 0;
      width: 100%;
      //.anticon {
      //  margin-right: 4px;
      //}
    }

    &-pagination {
      margin: 0;
      padding: 10px 5px;
      //解决分页栏未撑开高度，导致遮罩层遮挡不全的问题
      float: none;
      display: flex;
      justify-content: flex-end;
      .ant-pagination{
        &-item:hover{
          border-color: @primary-color;
          a{
            color: @primary-color;
          }
        }
        &-item-active{
          background-color: @primary-color;
          border-color: @primary-color;
          &:hover a{
            color:#fff;
          }
        }
        &-prev,
        &-next {
          &:hover {
            border-color: @primary-color;
            a {
              color: @primary-color;
            }
          }
        }
        &-disabled {
          &:hover {
            border-color: @border-color-base;
            a {
              color: #ccc;
              cursor: not-allowed;
            }
          }
          cursor: not-allowed;
          a {
            color: #ccc;
          }
        }
      }
    }

    &-filter-dropdown {
      min-width: 96px;
      margin-left: -8px;
      background: #fff;
      border-radius: @border-radius-base;
      border: 1px solid @border-color-base;
      box-shadow: @box-shadow-base;

      .ant-dropdown-menu {
        border: 0;
        box-shadow: none;
        border-radius: @border-radius-base @border-radius-base 0 0;

        &-item > label + span {
          margin-left: 8px;
        }

        &-sub {
          border-radius: @border-radius-base;
          border: 1px solid @border-color-base;
          box-shadow: @box-shadow-base;
        }

        .ant-dropdown-submenu-contain-selected {
          .ant-dropdown-menu-submenu-title:after {
            color: @primary-color;
            font-weight: bold;
            text-shadow: 0 0 2px tint(@primary-color, 80%);
          }
        }
      }

      .ant-dropdown-menu-item {
        overflow: hidden;
      }

      > .ant-dropdown-menu > .ant-dropdown-menu-item:last-child,
      > .ant-dropdown-menu > .ant-dropdown-menu-submenu:last-child .ant-dropdown-menu-submenu-title {
        border-radius: 0;
      }

      &-btns {
        overflow: hidden;
        padding: 7px 15px;
        border-top: 1px solid @border-color-split;
      }

      &-link {
        color: @link-color;
        &:hover {
          color: @link-hover-color;
        }
        &:active {
          color: @link-active-color;
        }
        &.confirm {
          float: left;
        }
        &.clear {
          float: right;
        }
      }
    }

    &-expand-icon-th {
      width: 34px;
    }

    &-row {
      &-expand-icon {
        cursor: pointer;
        display: inline-block;
        width: 17px;
        height: 17px;
        text-align: center;
        line-height: 14px;
        border: 1px solid @border-color-split;
        user-select: none;
        background: #fff;
        &-cell {
          width: 18px;
        }
      }

      &-expanded:after {
        content: '-';
      }

      &-collapsed:after {
        content: '+';
      }

      &-spaced {
        visibility: hidden;
        &:after {
          content: '.';
        }
      }

      &[class*="@{table-prefix-cls}-row-level-0"] .@{table-prefix-cls}-selection-column > span {
        display: inline-block;
      }
    }

    tr&-expanded-row {
      &,
      &:hover {
        background: #fbfbfb;
      }
    }

    .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
      margin-right: 8px;
    }


    &-content{
      display: flex;
    }

    &-scroll {
      //overflow: auto;
      overflow: hidden;
      table {
        //width: auto;
        min-width: 100%;
      }
    }

    &-body-inner {
      height: 100%;
    }

    &-center{
      flex:1;
    }
    &-fixed-left,
    &-fixed-right {
      position: relative;
      //position: absolute;
      //top: 0;
      //overflow: hidden;
      //z-index: 1;
      //transition: box-shadow .3s ease;
      //border-radius: 0;
      table {
        width: auto;
        background: #fff;
      }
    }

    &-fixed-header &-fixed-left &-body-outer &-fixed,
    &-fixed-header &-fixed-right &-body-outer &-fixed {
      border-radius: 0;
    }
    //左侧固定列
    &-fixed-left {
      //left: 0;
      box-shadow: @shadow-1-right;
      .@{table-prefix-cls}-header {
        overflow-y: hidden;
      }
      // hide scrollbar in left fixed columns
      //.@{table-prefix-cls}-body-inner {
      //  margin-right: -20px;
      //  padding-right: 20px;
      //}
      .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner {
        padding-right: 0;
      }
      &,
      table {
        border-radius: 0;
      }
    }
    //右侧固定列
    &-fixed-right {
      //right: 0;
      box-shadow: @shadow-1-left;
      &,
      table {
        border-radius: 0;
      }
      // hide expand row content in right-fixed Table
      // https://github.com/ant-design/ant-design/issues/1898
      .@{table-prefix-cls}-expanded-row {
        color: transparent;
        pointer-events: none;
      }
    }


    &-column-hidden {
      display: none;
    }

    th&-column-has-prev {
      position: relative;
    }

    th&-column-has-prev,
    td&-column-has-prev {
      padding-left: 24px;
    }

    &-prev-columns-page,
    &-next-columns-page {
      cursor: pointer;
      color: #666;
      z-index: 1;
      &:hover {
        color: @primary-color;
      }
      &-disabled {
        cursor: not-allowed;
        color: #bbb;
        &:hover {
          color: #bbb;
        }
      }
    }
    //&-prev-columns-page {
    //  position: absolute;
    //  left: 8px;
    //  &:before {
    //    content: '\e601';
    //    .iconfont-size-under-12px(9px);
    //    font-weight: bold;
    //    font-family: anticon;
    //  }
    //}
    //
    //&-next-columns-page {
    //  float: right;
    //  margin-left: 8px;
    //  &:before {
    //    content: '\e600';
    //    .iconfont-size-under-12px(9px);
    //    font-weight: bold;
    //    font-family: anticon;
    //  }
    //}
  }
  ////修正：固定表头多余滚动条一直显示的问题，参照下有问题
  //.@{table-prefix-cls}-fixed-header .@{table-prefix-cls}-scroll .@{table-prefix-cls}-header {
  //  overflow: auto;
  //}
  //表格中的图标样式
  .@{ui-prefix-table-icon}{
    display: inline-block;
    font-size: 14px;
    padding: 2px;
    &:hover{
      color:@primary-color;
    }
  }

  //表格单元格包装样式
  .yyui-table-cell-wrapper{
    display: inline-flex;
    align-items: center;
    &.editing{
      display: flex;
      //修正多行文本框在编辑表格必填报错时的宽度样式问题
      >.yyui-input{
        flex:1;
      }
    }
  }
  //表格内嵌行输入框筛选
  .yyui-table-inner-filter{
    background: @table-head-background-color;
    .selection-column{
      height: 39px;
    }
    td{
      padding: 5px;
    }
  }
}

//行操作菜单的悬浮层样式
.yyui-table-row-menu-overlay{
  .ant-popover-inner{
    min-width: 60px;
    .ant-popover-inner-content{
      padding: 0;
      .ant-menu-item{
        padding: 0 12px;
        font-size: 14px;
      }
    }
  }
}