@import "../../styles/variable.scss";

%SliderStyle {
  .el-slider__runway {
    margin: 8px 0;
    .el-slider__button-wrapper {
      z-index: auto;
    }
  }
}

.vxe-table {
  //筛选
  .vxe-table--filter-body {
    & > .el-input,
    & > .el-input-number,
    & > .el-autocomplete,
    & > .el-select,
    & > .el-rate,
    & > .el-slider {
      width: 180px;
    }
    & > .el-slider {
      @extend %SliderStyle;
    }
  }

  //单元格编辑
  .edit--visible {
    .vxe-cell {

      .el-form-item:not(.is-error) {
        border-color: transparent;

      }

      & >, .el-form, .is-edit {
        //通用重置(比如 高度 宽度 颜色等)  不适用相邻了 & >, 但为了不受影响, 加一个el选项
        .el-input,
        .el-textarea,
        .el-autocomplete,
        .el-select,
        .en-select,
        .el-cascader,
        .el-date-editor,
        .el-input-number, //计数器 边框有待优化
        .el-slider {
          width: 100%;
          line-height: $vxe-table-cell-height - 3px;

          .el-textarea__inner,
          .el-input__inner{
            font-size: $vxe-font-size;
            // padding: 0 $vxe-table-cell-padding-space;
            border-radius: 0;
            height: $vxe-table-cell-height - 1px;
            background-color: transparent;
            border-color: transparent;

            &:focus {
              border-color: $vxe-input-selected-color;
              background: #fff;
            }
            .el-range-input{
              background-color: transparent;
            }
          }
          不是编辑控件直接使用默认插槽
          .el-input__prefix {
            display: none; //不要图标
          }
        }
        //处理 时间区间控件 在表格中的样式
        .el-range-editor,.date-picker-wrap{
          height: $vxe-table-cell-height - 1px;
          border-color: transparent;
            .el-range-editor{
              height: 100%;
              background-color: transparent;
              border-color: transparent;
              line-height: $vxe-table-cell-height - 3px;
            }
            .el-range-input{
              background-color: transparent;
            }
            .el-range-separator{
              line-height: $vxe-table-cell-height - 10px;
            }
            .static-date{
              line-height: $vxe-table-cell-height - 3px;
            }
        }
        .model-select.is-disabled{
          background-color: transparent;
        }
      }

      //form表单错误
      .el-form {
        .is-error {
          .el-input__inner,.el-input__inner:focus {
            border-color: $vxe-table-validate-error-color;
          }
        }
      }


      //右侧按钮 只有在鼠标移上去/点击才会显示
        .el-select,
        .en-select,
        .el-cascader {
          .el-input:not(.is-focus) { //非聚焦
            .el-input__icon {
              display: none;
            }
          }

          &:hover, .is-focus { //悬浮 聚焦
            .el-input__icon {
              display: inline-block !important;
            }
          }
        }

        .el-input-number {
          .el-input-number__decrease, .el-input-number__increase {
            display: none;
          }

          &:hover, .el-input__inner:focus {
            .el-input-number__decrease, .el-input-number__increase {
              display: inline-block !important;
            }
          }
        }
      }
  }

  .col--valid-error {//暂不使用这个了
    & > .vxe-cell {
      & > .el-input .el-input__inner,
      & > .el-autocomplete .el-input__inner,
      & > .el-input-number .el-input__inner,
      & > .el-select .el-input__inner,
      & > .el-cascader .el-input__inner,
      & > .el-date-picker .el-input__inner {
        border-color: $vxe-table-validate-error-color;
      }
    }
  }
}