<template>
  <view :class="[arrow ? 'steps-arrow' : '', className]" :style="style" class="cu-steps">
    <view
      v-for="(item, index) in steps"
      :key="index"
      :class="index < step ? 'text-' + activeColor : ''"
      class="cu-item"
    >
      <text v-if="number" :data-index="index + 1" class="num"></text>
      <text v-else :class="index < step || !point ? 'cuIcon-' + item.icon : 'cuIcon-title'"></text>
      {{ item.title }}
    </view>
  </view>
</template>

<script>
export default {
  name: 'l-step',

  props: {
    step: { default: 0 },
    steps: { default: () => [] },
    activeColor: { default: 'blue' },
    point: {},
    arrow: {},
    number: {}
  }
}
</script>
