@import (reference) '../theme/variables/antdVariables.less';

.hslTextColor(@backgroundColor) {
  @lightness: lightness(@backgroundColor); // 修正:使用传入的backgroundColor参数
  @text-color: if(@lightness >= 80, @text-color-secondary, #fff); // 如果亮度 >= 80，设置为黑色，否则设置为白色
  .ued-arrow-step-item {
    color: @backgroundColor;
    .ued-arrow-step-item-content {
      background-color: @backgroundColor;
      color: @text-color
    }
  }
}

.stepColor(@stepPrefix, @color, @backgroundColor) {
  .ued-arrow-step-item-simple-@{stepPrefix} {
    color: @backgroundColor;
    .ued-arrow-step-item-content {
      color: @color;
      background-color: @backgroundColor;
    }
  }
}

.drawArrowItem(@arrow-height, @arrow-width, @placement) {
  content: '';
  display: inline-block;
  border-left: @arrow-width solid if(@placement = 'before', transparent , currentColor);
  border-top: calc(@arrow-height / 2) solid if(@placement = 'after', transparent , currentColor);
  border-bottom: calc(@arrow-height / 2) solid if(@placement = 'after', transparent , currentColor);
  height: @arrow-height;
}

.drawArrow(@arrow-size, @arrow-height, @arrow-space-size ) {
  .ued-step-arrow {
    // 尖端箭头
    &:not(:last-child) {
      .ued-arrow-step-item-simple,
      .ued-arrow-step-item-color {
        // 绘制箭头
        &::after {
          .drawArrowItem(@arrow-height, 12px, 'after');
        }
      }
  
      .ued-arrow-step-item-colorArrow {
        // 末端大箭头样式
        &::after {
          content: '';
          display: inline-block;
          border-left: @arrow-size solid currentColor;
          border-top: @arrow-size solid transparent;
          border-bottom: @arrow-size solid transparent;
        }
      }
    }
    .ued-arrow-step-item-colorFlag  {
      // 绘制箭头
      &::after {
        .drawArrowItem(@arrow-height, 12px, 'after');
      }
    }
    // 缩进箭头
    &:not(:first-child) {
      .ued-arrow-step-item-simple,
      .ued-arrow-step-item-color,
      .ued-arrow-step-item-colorFlag {
        // 绘制箭头
        &::before {
          .drawArrowItem(@arrow-height, 12px, 'before');
        }
      }
  
      .ued-arrow-step-item-colorArrow {
        // 末端大箭头样式
        &::before {
          .drawArrowItem(@arrow-height, @arrow-space-size, 'before');
        }
      }
    }
  
    &:first-child {
      .ued-arrow-step-item-simple,
      .ued-arrow-step-item-color,
      .ued-arrow-step-item-colorArrow { 
        .ued-arrow-step-item-content {
          border-top-left-radius: 2px;
          border-bottom-left-radius: 2px;
        }
      }
  
      .ued-arrow-step-item-colorFlag {
        &::before {
          .drawArrowItem(@arrow-height, 12px, 'before');
        }
      }
    }
  
    &:last-child {
      .ued-arrow-step-item-simple,
      .ued-arrow-step-item-color,
      .ued-arrow-step-item-colorArrow {
        .ued-arrow-step-item-content {
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
        }
      }
    }
  }
}

/**
  绘制图标-模板步骤条icon样式，根据不同尺寸绘制不同大小的icon
**/
.drawTemplateStepIcon(@size, @border-radius, @line-height:36px, @padding:16px) {
  .ued-step-icon-square,
  .ued-step-icon-square-vertical {
    .ued-tempalate-step-item-icon {
        width: @size;
        height: @size;
        border-radius: @border-radius;
        background-color: currentColor;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        .ued-step-wrap-iconItem-default,
        .ued-step-wrap-iconItem-small {
          color: white;
        }
    }
    .ued-tempalate-step-item-tail {
        top: calc(@size / 2);
        transform: translateY(-50%);
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        min-width: 47px;
        &::after {
          flex: 1;
          content: "";
          height: 2px;
          top: 50%;
          border-top: 2px dashed @primary-color;
          background-color: transparent;
          border-radius: 0;
          transform: translateX(-1px)
        }
        &::before {
          content: "";
          width: 0;
          height: 0;
          border-left: 12px solid @primary-color;
          border-top: 6px solid transparent;
          border-bottom: 6px solid transparent;
        }
    }
  }
  .ued-step-icon-square {
    .ued-tempalate-step-item-tail {
      margin-left: 16px;
    }
  }
  .ued-step-icon-ellipse {
    .ued-tempalate-step-item {
      align-items: center;
      margin-right: 8px;
      min-width: 120px;
    }
    .ued-tempalate-step-item-content {
      border: 1px solid currentColor;
      border-radius: 999px;
      padding: 0 @padding;
      height: @line-height;
      align-items: center;
      width: 100%;
      .ued-tempalate-step-item-icon {
        color: currentColor;
        margin-right: 4px;
        .ued-step-wrap-iconItem-default {
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}
.ued-step-wrap {
  background-color: white;
  &-iconItem-small,
  &-iconItem-default {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-iconItem-default {
    width: 32px;
    height: 32px;
  }

  &-iconItem-small {
    width: 24px;
    height: 24px;
  }

  &-finish {
    border: 1px solid @primary-color; // FIXME:换主题色
    color: @primary-color; // FIXME:换主题色
  }

  &-process {
    border: 1px solid @primary-color; // FIXME:换主题色
    background-color: @primary-color; // FIXME:换主题色
    color: #fff; // FIXME:换主题色
  }

  &-wait {
    border: 1px solid #E5E5E5; // FIXME:换主题色
    color: rgba(28, 36, 46, 0.85);
  }

  &-error {
    border: 1px solid @error-color; // FIXME:换主题色
    color: @error-color; // FIXME:换主题色
  }

  &-numberBox {
    border-radius: 50%;
  }

  &-numberBox-default {
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 16px;
  }

  &-numberBox-small {
    width: 24px;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
  }


  // 点类型样式
  &-dot {
    width: 12px;
    height: 12px;
    opacity: 1;
    border-radius: 50%;
  }

  // 点类型迷你样式
  &-dot-small {
    width: 8px;
    height: 8px;
  }

  &-dot-finish {
    background-color: @primary-color; // FIXME:换主题色
  }

  &-dot-process {
    background-color: @primary-color; // FIXME:换主题色
  }

  &-dot-wait {
    background-color: #e5e5e5; // FIXME:换主题色
  }

  &-dot-error {
    background-color: @error-color; // FIXME:换主题色
  }

  &-container-arrow {
    &.@{ant-prefix}-steps-default {
      @arrow-height: 36px;
      // colorArrow大箭头样式尺寸
      @arrow-size: 24px;
      // 相邻步骤缺口的尺寸
      @arrow-space-size: 18px;
      .ued-arrow-step-item-content {
        height: @arrow-height;
      }
      .drawArrow(@arrow-size, @arrow-height, @arrow-space-size);
    }
    &.@{ant-prefix}-steps-small {
      @arrow-height: 28px;
      // colorArrow大箭头样式尺寸
      @arrow-size: 18px;
      // 相邻步骤缺口的尺寸
      @arrow-space-size: 14px;
      .ued-arrow-step-item-content {
        height: @arrow-height;
      }
      .drawArrow(@arrow-size, @arrow-height, @arrow-space-size);
    }
    &.@{ant-prefix}-steps-horizontal:not(.@{ant-prefix}-steps-label-vertical) .@{ant-prefix}-steps-item.ued-step-arrow {
      padding-left: 0px;
    }
    .ued-step-arrow {
      display: inline-flex;
      align-items: center;
      // 默认使用主题色
      .hslTextColor(@primary-color);
      &.@{ant-prefix}-steps-item:last-child {
        flex: 1;
      }
      .@{ant-prefix}-steps-item-icon {
        display: none;
      }

      .ued-step-wrap-iconItem-default {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
      .ued-step-wrap-iconItem-small {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }

      // 步骤默认间距
      &-color,
      &-colorFlag,
      &-simple {
        &:not(:first-child) {
          margin-left: -10px;
        }
      }
      &-colorArrow {
        &:not(:first-child) {
          margin-left: -16px;
        }
        &-small {
          &:not(:first-child) {
            margin-left: -12px;
          }
        }
      }

      // 箭头内置样式，每个步骤按定制颜色走
      &-simple {
        // 完成
        .stepColor(finish, @primary-color, fade(@primary-color, 20%));
        // 进行中
        .stepColor(process, #ffffff, @primary-color);
        // 等待
        .stepColor(wait,@text-color-secondary, #f0f0f0);
        // 错误
        .stepColor(error, #ffffff, @error-color);
      }

      .@{ant-prefix}-steps-item-content,
      .@{ant-prefix}-steps-item-container {
        width: 100%;
        .@{ant-prefix}-steps-item-title {
          width: 100%;
          padding-right: 0px;
          .ued-arrow-step-item {
            width: 100%;
            display: flex;
            align-items: center;
            .ued-arrow-step-item-content {
              &-light {
                color: #fff;
              }
              &-dark {
                color: @text-color-secondary
              }
              display: flex;
              align-items: center;
              flex: 1;
              padding: 0 20px;
              width: 100%;
              overflow: hidden;
              .ued-arrow-step-item-text {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: break-word;
                flex: 1;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }
  
}

.ued-step-wrap-container-icon {
  // 步骤条模版，自定义title
  .ued-step-icon-square,
  .ued-step-icon-square-vertical,
  .ued-step-icon-ellipse {
    // 在这些模板下，hover时保持原来颜色
    &.@{ant-prefix}-steps-item:not(.@{ant-prefix}-steps-item-active)>.@{ant-prefix}-steps-item-container[role=button]:hover .@{ant-prefix}-steps-item-title {
      color: currentColor;
    }
    &.ued-step-icon > .@{ant-prefix}-steps-item-container {
      & > .@{ant-prefix}-steps-item-icon {
        display: none;
      }
      .@{ant-prefix}-steps-item-content,
      .@{ant-prefix}-steps-item-title {
        color: currentColor;
        padding-right: 0;
        &:hover {
          color: currentColor;
        }
        & > .ued-tempalate-step-item {
          display: flex;
        }
      }
    }
  }
  .ued-step-icon-square,
  .ued-step-icon-square-vertical {
    &.ued-step-icon > .@{ant-prefix}-steps-item-container {
      & > .@{ant-prefix}-steps-item-tail {
        display: none;
      }
    }
    &.ued-step-icon:last-child {
      .@{ant-prefix}-steps-item-container .@{ant-prefix}-steps-item-title > .ued-tempalate-step-item .ued-tempalate-step-item-tail {
        display: none;
      }
    }
    &.ued-step-icon > .@{ant-prefix}-steps-item-container {
      .@{ant-prefix}-steps-item-title,
      .@{ant-prefix}-steps-item-content {
        width: 100%;
        & >.ued-tempalate-step-item {
          .ued-tempalate-step-item-title {
            color: rgba(28, 36, 46, 1);
            line-height: 22px;
            font-size: 14px;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .ued-tempalate-step-item-description {
            color: rgba(144, 146, 163, 1);
            font-weight: normal;
            font-size: 12px;
            line-height: 18px;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
  .ued-tempalate-step-item-content {
    display: flex;
    overflow: hidden;
    .ued-tempalate-step-item-content-inner {
      display: flex;
      justify-content: center;
      flex-direction: column;
      overflow: hidden;
    }
  }
  .ued-tempalate-step-item-icon {
      margin-right: 16px;
  }
  .ued-step-icon-square-vertical {
    .ued-tempalate-step-item-content {
      flex-direction: column;
      margin-right: 16px;
      align-items: center;
      .ued-tempalate-step-item-title,
      .ued-tempalate-step-item-description {
        text-align: center;
      }
      .ued-tempalate-step-item-icon {
        margin-right: 0;
        margin-bottom: 8px;
      }
      .ued-tempalate-step-item-content-inner {
        width: 100%;
      }

    }
  }
  &.@{ant-prefix}-steps-small {
    .drawTemplateStepIcon(40px, 8px, 32px, 12px);
  }
  &.@{ant-prefix}-steps-default {
    .drawTemplateStepIcon(48px, 12px);
  }
  // 椭圆图标型模板
  &.@{ant-prefix}-steps-horizontal:not(.@{ant-prefix}-steps-label-vertical) .@{ant-prefix}-steps-item {
    &.ued-step-icon-ellipse:not(:first-child) {
      padding-left: 8px;
    }
  }
  // 导航型图标步骤条样式
  &.@{ant-prefix}-steps-navigation {
    padding-top: 0;
    & > .ued-step-icon-ellipse {
      display: inline-flex;
      align-items: center;
      &::before {
        display: none;
      }
      &::after {
        right: 0;
        transform: rotate(45deg);
        margin-left: 0;
        margin-top: 0;
        left: unset;
        position: static;
      }
      &:not(:last-child) {
        .ued-tempalate-step-item {
          margin-right: 12px;
        }
      }
      .@{ant-prefix}-steps-item-container {
        padding-bottom: 0;
        margin-left: 0;
        width: 100%;
        .@{ant-prefix}-steps-item-content {
          width: 100%;
          .@{ant-prefix}-steps-item-title {
            width: 100%;
          }
        }
      }
    }
    &.@{ant-prefix}-steps-horizontal:not(.@{ant-prefix}-steps-label-vertical) .@{ant-prefix}-steps-item {
      &.ued-step-icon-ellipse:not(:first-child) {
        padding-left: 20px;
      }
    }
  }
}