<template>
  <view class="">
    <view
      class="u-steps"
      :style="{
        flexDirection: direction,
      }"
    >
      <view class="u-steps__item" :class="['u-steps__item--' + direction]" v-for="(item, index) in list" :key="index">
        <view
          class="u-steps__item__num"
          v-if="mode == 'number'"
          :style="{
            backgroundColor: current < index ? 'transparent' : activeColor,
            borderColor: current < index ? unActiveColor : activeColor,
          }"
        >
          <text
            v-if="current < index"
            :style="{
              color: current < index ? unActiveColor : activeColor,
            }"
          >
            {{ index + 1 }}
          </text>
          <u-icon v-else size="22" color="#ffffff" :name="icon"></u-icon>
        </view>
        <view
          class="u-steps__item__dot"
          v-if="mode == 'dot'"
          :style="{
            backgroundColor: index <= current ? activeColor : unActiveColor,
          }"
        ></view>
        <view class="u-steps__item__icon" v-if="mode == 'icon'">
          
           <u-icon v-if="current==-1&&index==0" size="48" :name="icon" :color="activeColor"></u-icon>
          <u-icon v-else size="48" :name="icon" :color="index <= current ? activeColor : unActiveColor"></u-icon>
          
        </view>
        <text
          class="u-line-1"
          :style="[{
            color: index <= current ? activeColor : unActiveColor,
          },textStyle]"
          :class="['u-steps__item__text--' + direction]"
        >
          {{ item.name }}
        </text>
        <view class="u-steps__item__line" :class="['u-steps__item__line--' + mode]" v-if="index < list.length - 1">
          <u-line class="cu-line" :direction="direction" length="100%" :hair-line="false" :color="index <= current ? activeColor : unActiveColor"></u-line>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * steps 步骤条
 * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
 * @tutorial https://www.uviewui.com/components/steps.html
 * @property {String} mode 设置模式（默认dot）
 * @property {Array} list 数轴条数据，数组。具体见上方示例
 * @property {String} type type主题（默认primary）
 * @property {String} direction row-横向，column-竖向（默认row）
 * @property {Number String} current 设置当前处于第几步
 * @property {String} active-color 已完成步骤的激活颜色，如设置，type值会失效
 * @property {String} un-active-color 未激活的颜色，用于表示未完成步骤的颜色（默认#606266）
 * @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
 */
export default {
  name: 'u-steps',
  props: {
    // 步骤条的类型，dot|number|icon
    mode: {
      type: String,
      default: 'dot',
    },
    // 步骤条的数据
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    // 主题类型, primary|success|info|warning|error
    type: {
      type: String,
      default: 'primary',
    },
    // 当前哪一步是激活的
    current: {
      type: [Number, String],
      default: 0,
    },
    // 激活步骤的颜色
    activeColor: {
      type: String,
      default: '#2979ff',
    },
    // 激活步骤文字的颜色
    activeTextColor: {
      type: String,
      default: '',
    },
    // 未激活的颜色
    unActiveColor: {
      type: String,
      default: '#909399',
    },
    // 未激活文字的颜色
    unActiveTextColor: {
      type: String,
      default: '',
    },
    // 自定义图标
    icon: {
      type: String,
      default: 'checkmark',
    },
    // step的排列方向，row-横向，column-竖向
    direction: {
      type: String,
      default: 'row',
    },
    textStyle:{
      type:Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    textColor() {
      return this.activeTextColor ? this.activeTextColor : this.activeColor;
    },
    unTextColor() {
      return this.unActiveTextColor ? this.unActiveTextColor : this.unActiveColor;
    },
  },
};
</script>

<style>
  
</style>
<style lang="scss" scoped>
@import 'uview-ui/libs/css/style.components.scss';

$u-steps-item-number-width: 40rpx;
$u-steps-item-dot-width: 20rpx;

.cu-line{
    border-width:3rpx !important

  }
.u-steps {
  @include vue-flex;

  .u-steps__item {
    flex: 1;
    text-align: center;
    position: relative;
    min-width: 100rpx;
    font-size: 26rpx;
    color: #8799a3;
    @include vue-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    &--row {
      @include vue-flex;
      flex-direction: column;

      .u-steps__item__line {
        position: absolute;
        z-index: 0;
        left: calc(50% + 10px);
        width:calc(100% - 20px);

        &--dot {
          top: calc(#{$u-steps-item-dot-width} / 2);
        }

        &--number {
          top: calc(#{$u-steps-item-number-width} / 2);
        }

        &--icon {
          top: calc(#{$u-steps-item-number-width} / 2);
        }
      }
    }

    &--column {
      @include vue-flex;
      flex-direction: row;
      justify-content: flex-start;
      min-height: 120rpx;

      .u-steps__item__line {
        position: absolute;
        z-index: 0;
        height: 50%;
        top: 75%;

        &--dot {
          left: calc(#{$u-steps-item-dot-width} / 2);
        }

        &--number {
          left: calc(#{$u-steps-item-number-width} / 2);
        }

        &--icon {
          left: calc(#{$u-steps-item-number-width} / 2);
        }
      }
    }

    &__num {
      @include vue-flex;
      align-items: center;
      justify-content: center;
      width: $u-steps-item-number-width;
      height: $u-steps-item-number-width;
      border: 1px solid #8799a3;
      border-radius: 50%;
      overflow: hidden;
    }

    &__icon {
      @include vue-flex;
      align-items: center;
      justify-content: center;
      width: $u-steps-item-number-width;
      height: $u-steps-item-number-width;
      border-radius: 50%;
      overflow: hidden;
    }

    &__dot {
      width: $u-steps-item-dot-width;
      height: $u-steps-item-dot-width;
      @include vue-flex;
      border-radius: 50%;
    }

    &__text--row {
      margin-top: 14rpx;
    }

    &__text--column {
      margin-left: 14rpx;
    }
  }
}
</style>
