<template>
  <div class="uif-step-status clearfix">
    <template v-for="(item, idx) in dataList">
      <u-step-status-item :key="idx" :data="item"></u-step-status-item>
    </template>
  </div>
</template>

<script>
import UStepStatusItem from './step-status-item'
import {findIndex} from '@uif/hq/src/utils/array'
export default {
  name: 'u-step-status',
  components: {UStepStatusItem},
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    dataList () {
      const index = findIndex(this.data, item => item.status === -1)
      if (index >= 0) {
        return this.data.slice(0, index + 1)
      }
      return this.data
    }
  }
}
</script>
