@import "../../style/index.less";
@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;
//  修复edittabel下文本框清除按钮错位的问题
.@{ui-prefix-table}{
  .yyui-input{
    .yyui-input-clear{
        display: none;
        padding:0
    }
    &:hover{
      .yyui-input-clear{
        display:inline-block;
      }
    }
  }
  .yyui-select,
  .yyui-enumselect{
    width:100%; 
  }
  .yyui-inputnumber .ant-input-number{
    width: 100%;
  }

}
.yyui-table-resizer {
  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;
      &:hover .table-resizer-label{
        visibility: visible;
        cursor: ew-resize;
      }
    }
    .table-resizer-label {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 5px;
      background: #666;
      visibility: hidden;
    }
  }
}
//@table-border-color-split:#e2e2e2;
.@{ui-prefix-table} {
  .@{table-prefix-cls} {
    &-thead {
    }
    &-fixed-left{
      .ant-table-placeholder{
        display: none;
      }
    }
    .checkbox;
    font-size: @font-size-normal;
    color: @text-color;
    overflow: hidden;
    position: relative;
    border-radius: 0;

    //文本右对齐
    .text-right{
      text-align: right;
    }
    //文本居中对齐
    .text-center{
      text-align: center;
    }

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

    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: nowrap;
      //.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: nowrap;
    }

    tr {
      transition: all .3s ease;
      //斑马线
      //&:nth-child(even){
      //  background-color: #f3fbfb;
      //}
      &.@{table-prefix-cls}-row-hover,
      //展开行时不提供hover
      &:hover:not(.@{table-prefix-cls}-expanded-row ) {
        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%);
      //}
    }

    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;
    }

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

    &-header table {
      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;
      }
    }

    &-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 {
        border: 1px solid @border-color-split;
      }

      &.@{table-prefix-cls}-fixed-header {
        border: 1px solid @border-color-split;
        table {
          border: 0;
        }
        .@{table-prefix-cls}-fixed-left {
          border-right: 1px solid @border-color-split;
        }
        .@{table-prefix-cls}-fixed-right {
          border-left: 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: 0;
        }
      }

      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 {
      height: 100px;
      line-height: 100px;
      text-align: center;
      font-size: 12px;
      color: #999;
      //border-bottom: 1px solid @border-color-split;
      position: relative;
      top: 0px;
      //left: 0;
      width: 100%;
      //.anticon {
      //  margin-right: 4px;
      //}
    }

    &-pagination {
      margin: 16px 0;
      float: right;
      .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;
    }

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

    &-body-inner {
      height: 100%;
    }
    &-fixed-header &-body {
      position: relative;
      background: #fff;
    }

    &-fixed-header &-body-inner {
      overflow: scroll;
    }

    &-fixed-left,
    &-fixed-right {
      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;
      }
    }

    &&-scroll-position-left &-fixed-left {
      box-shadow: none;
    }

    &&-scroll-position-right &-fixed-right {
      box-shadow: 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: 5px;
    &:hover{
      color:@primary-color;
    }
  }
}