@import '../variables/default.scss';
@import '../mixins/index.scss';

$at-list-item-horizontal-padding: 24px;

@mixin active {
  &:active {
    background-color: $color-white;
  }
}

@mixin squareImg($size: 56px) {
  width: $size;
  height: $size;

  &__info {
    width: 100%;
    height: 100%;
  }
}

.at-list--padding-left {
  padding-left: 24px;
}

.at-personnel-selector,
.at-car-number-picker {
  .item-extra {
    .item-extra__info {
      text-align: left !important;
    }
  }
}

.at-list {
  background-color: #fff;
  @include hairline-top-bottom();

  /** 左右布局 */
  .at-list__item.at-list__item--horizontal-layout-left {
    .item-extra {
      @include flex(0, 0, 505px);
    }
  }

  .at-list__item-container.at-list__item-container-vertical {
    display: block;

    .at-list__item-extra--align-left,
    .at-list__item-extra {
      flex: none;
      width: auto;
      text-align: left;
    }
  }

  /* elements */
  &__item-container {
    @include display-flex;
    @include align-items(center);

    .item-icon {
      margin-right: $at-list-item-horizontal-padding;
    }
  }

  &__header {
    @include hairline-bottom();

    padding: $spacing-v-lg $spacing-h-lg $spacing-v-md $spacing-h-lg;
    font-size: $font-size-base;
    color: $color-text-caption;
    width: 100%;
    box-sizing: border-box;
  }

  &__footer {
    @include hairline-top();

    padding: $spacing-v-md $spacing-h-lg $spacing-v-lg $spacing-h-lg;
    font-size: $font-size-base;
    color: $color-text-caption;
  }

  &__item {
    background-color: $color-bg;
    padding: $spacing-v-lg $spacing-h-lg;
    position: relative;
    box-sizing: border-box;
    color: $at-list-text-color;
    font-size: $font-size-lg;
    line-height: $line-height-zh;
    @include active;
    @include hairline-bottom-relative($left: $spacing-h-lg);

    &--required {
      position: absolute;
      left: 6px;
      height: 28px;
      color: $color-error;
      font-size: 28px;
      font-family: SimSun, sans-serif;
      line-height: 1;
    }

    &--top {
      .item-icon {
        line-height: 2.5;
      }

      .at-list__item-container {
        align-items: flex-start;
      }

      .at-list__item--required {
        top: 32px;
      }
    }

    &--middle {
      .at-list__item-container {
        align-items: center;
      }

      .at-list__item--required {
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }

    &--bottom {
      .item-icon {
        line-height: 2.5;
      }

      .at-list__item-container {
        align-items: flex-end;
      }
    }

    &--multiple {
      padding: 16px * $hd $spacing-h-lg 16px * $hd $spacing-h-lg;
    }

    &--wrap {
      .at-list__item-container {
        .item-content__info-title,
        .item-extra__info {
          white-space: normal;
        }

        .item-extra__info.item-extra__info-without-arrow {
          padding-right: 0;
        }
      }
    }

    &--thumb {
      .item-thumb {
        margin-right: $at-list-item-horizontal-padding;
        @include squareImg($at-list-thumb-size);
      }
    }

    &--disabled {
      .at-list__item-container {
        opacity: $form-opacity-disabled;
      }

      &:active {
        background-color: transparent !important;
      }
    }

    &--no-border::after {
      content: initial;
      border: none;
    }

    .item-content {
      &__info {
        &-title {
          @include line(1);

          color: inherit;
          font-size: inherit;
          line-height: $line-height-zh;
        }

        &-note {
          color: $at-list-content-color;
          font-size: $font-size-base;
          line-height: $line-height-zh;
        }
      }
    }

    .item-extra {
      position: relative;

      &__info,
      &__icon,
      &__image,
      &__switch {
        display: inline-flex;
      }

      &__info {
        @include line(1);

        max-width: 100%;
        color: $at-list-extra-color;
        padding-right: 30px;
        font-size: $font-size-lg;
        box-sizing: border-box;
      }

      // &__icon {
      //   margin-right: -12px;

      //   &-arrow {
      //     color: $at-list-arrow-color;
      //     font-size: 48px;
      //   }
      // }

      &__icon {
        right: -12px;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;

        &-image {
          width: 36px;
          height: 36px;
        }

        &-arrow {
          color: $at-list-arrow-color;
          font-size: 36px;
        }
        // margin-left: $spacing-h-sm;
        // margin-right: -$spacing-h-sm;
      }

      &__switch {
        vertical-align: middle;
      }

      &__image {
        @include squareImg($at-list-thumb-size);

        vertical-align: middle;
        margin-right: 30px;

        &-info {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  &__item-content {
    @include flex(1);

    overflow: hidden;
    margin-right: 40px;
  }

  &__item-content.item-content-left {
    margin-right: 0;
  }

  &__item-extra {
    @include flex(0, 0, $at-list-extra-width);

    width: $at-list-extra-width;
    text-align: right;
  }

  /* 个性化样式 */
  &__item-extra--align-left {
    display: flex;
    @include flex(0, 0, 505px);

    width: 505px;
    text-align: left;

    .item-extra__icon {
      right: 0;
    }

    .item-extra__info {
      width: 100%;
      box-sizing: border-box;
      text-align: left;
    }
  }

  /* modifiers */
  &--no-border {
    &::after,
    &::before {
      content: initial;
      border: none;
    }
  }

  &--no-editable {
    .at-list__item:not(.at-list__item-editable) {
      .item-extra {
        .item-extra__info {
          flex-direction: row-reverse;
          padding-right: 0;
          text-align: right;
          color: $color-black-1;
        }
      }
    }
  }

  .at-list__item--no-editable {
    .item-extra {
      .item-extra__info {
        flex-direction: row-reverse;
        padding-right: 0;
        text-align: right;
        color: $color-black-1;
      }
    }
  }
}