@import '../dao-variables.scss';
@import "./variables.scss";

// $old-seletor: 原来的选择器
// $new-seletors: 需要共用代码的新的选择器，支持 string 格式，如'input'；支持array格式，如('input', 'textarea')
// $new-seletor-ext: 新的选择器需要再次拓展，一般情况是遇到伪类需要将伪类写在最后
// 为了将 dao-input 普通用法脱离成单独的 class 而写的 mixin。兼容之前的用法并新增 .dao-control 用语 input 本身
@mixin e($old-seletor, $new-seletors, $new-seletor-ext: null) {
  // @at-root 回到最外层
  // 新的选择器需要公用原来的样式
  @each $new-seletor in $new-seletors {
    @at-root #{$new-seletor}#{$dao-control-name} {
      @if $new-seletor-ext == null {
        @content;
      } @else {
        // $new-seletor-ext 新的选择器需要再次拓展，一般情况是遇到伪类需要将伪类写在最后
        @each $var in $new-seletor-ext {
          &#{$var} {
            @content;
          }
        }
      }
    }
  }
  // 存在旧样式
  @if $old-seletor != null {
    // 兼容之前的css样式
    #{$old-seletor} {
      @content;
    }
  }
}

@mixin input-icon-background {
  background-size: $input-icon-width $input-icon-height;
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.dao-input {
  &-group-addon {
    display: inline-flex;
    & > *:not(.dao-select) {
      // 不要使用 border-box, 在 ff 28 下会失效
      box-sizing: content-box;
      display: inline-block;
      padding: 7px 10px;
      font-weight: 400;
      line-height: $line-height-base;
      height: $input-height - 2px - (7px * 2);
      background-color: $input-disabled-bg-color;
      color: $input-disabled-color;
      border: $input-border;
      border-radius: $input-border-radius;
      text-align: center;
    }
  }
  &-inner {
    position: relative;
  }
  &,
  &-container {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    input {
      @include e('&', ('input', 'textarea')) {
        margin: 0;
        flex: none;
        outline: none;
        padding: $input-normal-padding;
        width: $input-width;
        height: $input-height;
        color: $input-color;
        transition: all .25s ease;
        font-size: $font-base;
        @include box-shadow(none);
        background-color: $input-bg;
        // 为了防止在 disabled 和 default 之间切换的时候，背景图 icon 也发生 transition 动画
        // 所以需要用到 @include input-icon-background;
        @include input-icon-background;
        border: $input-border;
        border-color: $input-border-color;
        border-radius: $input-border-radius;
        line-height: $line-height-base;
        & + .dao-btn {
          margin-left: $input-btn-blank;
        }
        &::placeholder {
          color: $input-placeholder-color;
        }
      }
    }
    & + .dao-btn {
      margin-left: $input-btn-blank;
    }
    &.no-border {
      input {
        @include e('&', 'input.no-border') {
          border: 1px solid transparent;
        }
      }
      input:hover {
        @include e('&', 'input.no-border', ':hover') {
          border-color: $input-no-border-hover-border-color;
        }
      }
    }
    &.message-bottom {
      flex-direction: column;
      align-items: flex-start;
      .dao-input-message {
        margin: 6px 0 0;
      }
      &.no-message-icon .dao-input-message > .icon {
        display: none;
      }
    }
    &.success {
      input {
        border-radius: 2px;
      }
    }
    &.error {
      input,
      input:hover {
        @include e('&', ('input.error', 'textarea.error'), ('', ':hover')) {
          border: 1px solid $input-error-color;
          border-radius: 2px;
          background-color: $input-error-bg-color;
        }
      }
    }
    // 一定要在 input:focus, input:active 前面才能使用默认样式 :focus, :active
    &.search input {
      @include e('&', 'input.search') {
        padding: 0 10px 0 30px;
        width: 200px;
        background-size: $input-icon-width $input-icon-height;
        background-repeat: no-repeat;
        background-position: left 10px center;
        background-image: url($searchIconActiveSvg);
        &.input-sm, &[size='sm'] {
          padding: 0 10px 0 22px;
          background-position: left 5px center;
        }
        $not-disabled: ':not(.disabled):not([disabled])';
        @each $var in ('.required', '[required]') {
          &#{$var} {
            background-image: url($searchIconSvg);
          }
          &#{$var}:valid {
            @include box-shadow(0 1px 0 0 rgba($white, .8));
          }
          &#{$var}:focus, &#{$var}:active {
            @include box-shadow(0 0 0 2px $input-info-shadow-color);
          }
          @each $behavior in (':valid', ':focus', ':active') {
            &#{$var}#{$behavior}#{$not-disabled} {
              background-image: url($searchIconActiveSvg);
            }
          }
        }
      }
    }
    &.search {
      .input-helper-text {
        font-size: 12px;
        color: $input-search-helper-text-color;
        right: $input-icon-align-blank;
        top: 7px;
        z-index: 2;
        position: absolute;
        margin-right: 0;
        user-select: none;
        pointer-events: none;
      }
      &.can-empty {
        position: relative;
        input {
          padding: $input-icon-padding;
          padding-left: 30px;
        }
        .close-icon {
          z-index: 2;
          position: absolute;
          margin-right: 0;
          width: $input-icon-width;
          height: $input-icon-height;
          right: $input-icon-align-blank;
          top: 8px;
          cursor: pointer;
          svg {
            width: 100%;
            height: 100%;
            fill: $input-close-icon-color;
            &:hover {
              fill: $input-close-icon-active-color;
            }
          }
          &.active svg {
            fill: $input-close-icon-active-color;
          }
        }
      }
      &.input-sm, &[size='sm'] {
        .input-helper-text {
          top: 4px;
        }
        &.can-empty {
          input {
            padding-left: 22px;
            padding-right: 22px;
          }
          .close-icon {
            top: 5px;
            right: 5px;
          }
        }
      }
    }
    input:focus,
    input:active {
      @include e('&', ('input', 'textarea'), (':focus', ':active')) {
        border: 1px solid $input-info-color!important;
        background-color: $input-bg!important;
        @include box-shadow(0 0 0 2px $input-info-shadow-color!important);
      }
    }
    &.disabled input,
    input[disabled],
    &.readonly input,
    input[readonly] {
      @include e('&', ('input', 'textarea'), ('.disabled', '[disabled]', '.readonly', '[readonly]')) {
        // 修正 active 状态下 input 背景颜色会变的问题，所以加上 !important
        background-color: $input-disabled-bg-color!important;
        color: $input-disabled-color;
        border: $input-border;
        border-radius: $input-border-radius;
        cursor: not-allowed;
        // 修正在 disabled 中 focus 以及 active 状态下仍有 box-shadow
        &:focus,
        &:active {
          border: $input-border!important;
          @include box-shadow(none!important);
        }
      }
    }
    &.dao-input-group {
      width: $input-width;
      .dao-popover {
        width: 100%;
      }
      .dao-input-inner,
      input {
        flex: 1;
        width: 100%;
        z-index: 1;
      }
      .dao-select {
        width: auto;
      }
      .dao-input-group-addon.prepend {
        & > *,
        & > .dao-select .dao-select-switch {
          border-right: 0;
        }
      }
      .dao-input-group-addon.prepend > *,
      .dao-input-group-addon.append > *:not(:last-child),
      // 通过兄弟选择器无法选出拥有 append 节点的 .dao-input-inner 中的 input，所以需要多添加一个 class has-append
      .dao-input-inner.has-append input,
      .dao-input-group-addon.prepend .dao-select .dao-select-switch,
      .dao-input-group-addon.append .dao-select:not(:last-child) .dao-select-switch {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        margin-right: 0;
      }
      .dao-input-group-addon.append {
        & > *,
        & > .dao-select .dao-select-switch {
          border-left: 0;
        }
      }
      .dao-input-group-addon.append > *,
      .dao-input-group-addon.prepend > *:not(:first-child),
      .dao-input-group-addon.prepend + .dao-input-inner input,
      .dao-input-group-addon.append .dao-select .dao-select-switch,
      .dao-input-group-addon.prepend .dao-select:not(:first-child) .dao-select-switch {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        margin-left: 0;
      }
    }
    &.block {
      display: flex;
      width: 100%;
      width: 100%;
      .dao-input-group {
        width: 100%;
      }
      input, .dao-input-inner, .dao-input-inner > .dao-popover {
        width: 100%;
      }
    }
    
    &.icon-inside {
      position: relative;
      &.info,
      &.error,
      &.success,
      &.loading {
        input {
          @include e('&', 'input', ('.info', '.error', '.success')) {
            padding: $input-icon-padding;
          }
        }
      }

      .info-icon,
      .error-icon,
      .success-icon,
      .loading-icon {
        z-index: 2;
        position: absolute;
        margin-right: 0;
        width: $input-icon-width;
        height: $input-icon-height;
        right: $input-icon-align-blank;
        top: 8px;
        svg {
          width: 100%;
          height: 100%;
        }
      }
      .info-icon svg {
        fill: $input-info-color;
      }
      .error-icon svg {
        fill: $input-error-color;
      }
      .success-icon svg {
        fill: $input-success-color;
      }
      .loading-icon .dao-spin {
        margin-left: 3px;
      }
    }
    &.input-sm {
      input {
        @include e('&', ('input.input-sm', "input[size='sm']")) {
          padding-top: 5px;
          padding-bottom: 5px;
          height: $input-height-sm;
        }
      }
      &:not(.search) {
        @include e('& input', ('input.input-sm', "input[size='sm']"), (':not(.search)')) {
          padding-left: 5px;
          padding-right: 5px;
        }
      }
      &.icon-inside {
        .info-icon,
        .error-icon,
        .success-icon,
        .loading-icon {
          top: 5px;
        }
      }
      .dao-popover-popper[x-placement='top-end'],
      .dao-popover-popper[x-placement='bottom-end'] {
        transform: translateY(10px);
        .dao-popover-arrow {
          right: 1px !important;
        }
      }
      .dao-popover-popper[x-placement='right-start'] {
        transform: translateX(2px);
        .dao-popover-arrow {
          top: -1px !important;
        }
      }
      .dao-input-group-addon>*:not(.dao-select) {
        padding: 5px 6px;
        height: $input-height-sm;
      }
    }
  }
  &-message {
    // 因为布局是 flex 导致 message 中的 icon 在提示语句较长的时候会变小，所以先暂时将 flex 布局取消掉
    // flex: auto;
    // display: flex;
    // align-items: center;
    word-break: break-all;
    margin-left: 10px;
    > span {
      vertical-align: middle;
    }
    @at-root .no-message-icon & > .icon {
      display: none;
    }
    &.error {
      color: $error-message-color;
    }
    &.success {
      color: $success-message-color;
    }
  }
}
textarea#{$dao-control-name} {
  min-height: $textarea-min-height;
  max-height: $textarea-max-height;
  height: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  line-height: 24px;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

// 解决 input 之后存在 button 但是没有垂直对齐的问题
input ~ .dao-btn ,.dao-input-container ~ .dao-btn{
  vertical-align: top;
}

// TODO
// 因为appendToBody，此处把样式单独抽离出来了，很不优雅，未来需要还原回去。

.dao-input-container.icon-inside .dao-popover:not(.hide) .dao-popover-popper,
.dao-popover-popper:not(.hide).append-to-body.dao-input-popover {
  // 将 display 设置为 table 可解决因为中英文空格、标点符号使得一句话换行问题。
  // 是受到了外层样式是 flex 布局的影响
  display: table!important;
  // 为了解决在 editable-table 中 input with popover 时，popover 多了边框的问题
  border-collapse: collapse;
  .dao-popover-inner {
    color: $white;
  }
}
.dao-input-container.icon-inside .dao-popover.info,
.dao-popover-popper.info.append-to-body.dao-input-popover {
  & .dao-popover-inner {
    background-color: $input-info-color;
  }
  .dao-popover-arrow {
    &:before {
      background-color: $input-info-color;
    }
    & .pt-popover-arrow-border,
    & .pt-popover-arrow-fill {
      fill: $input-info-color;
    }
  }
}
.dao-input-container.icon-inside .dao-popover.error,
.dao-popover-popper.error.append-to-body.dao-input-popover {
  & .dao-popover-inner {
    background-color: $input-error-color;
  }
  .dao-popover-arrow {
    &:before {
      background-color: $input-error-color;
    }
    & .pt-popover-arrow-border,
    & .pt-popover-arrow-fill {
      fill: $input-error-color;
    }
  }
}
.dao-input-container.icon-inside .dao-popover.success,
.dao-popover-popper.success.append-to-body.dao-input-popover {
  & .dao-popover-inner {
    background-color: $input-success-color;
  }
  .dao-popover-arrow {
    &:before {
      background-color: $input-success-color;
    }
    & .pt-popover-arrow-border,
    & .pt-popover-arrow-fill {
      fill: $input-success-color;
    }
  }
}
.dao-input-container .dao-popover-popper[x-placement='top-end'],
.dao-popover-popper[x-placement='top-end'].append-to-body.dao-input-popover {
  top: 12px!important;
  .dao-popover-arrow {
    right: 1px!important;
  }
}
.dao-input-container .dao-popover-popper[x-placement='bottom-end'],
.dao-popover-popper[x-placement='bottom-end'].append-to-body.dao-input-popover {
  top: -12px!important;
  .dao-popover-arrow {
    right: 1px!important;
  }
}
.dao-input-container .dao-popover-popper[x-placement='right-start'],
.dao-popover-popper[x-placement='right-start'].append-to-body.dao-input-popover {
  left: 2px!important;
  .dao-popover-arrow {
    top: 1px!important;
  }
}
