<template>
  <group
    :title="title"
    class="steps"
  >
    <cell
      v-for="(step, index) in steps"
      :key="index"
      :bd-start="true"
      class="steps_item"
    >
      <div
        slot="icon"
        class="step_status"
      >
        <i
          class="status_line"
          :class="{'status_line_blue': step.status !== 'not_started'}"
        />
        <i
          class="icon"
          :class="iconClass[step.status]"
        />
      </div>
      <div
        slot="after-title"
        class="step_info"
      >
        <div class="step_title_info">
          <span class="step_title">{{ step.title }}</span>
          <span
            v-if="frKey"
            class="step_frKey"
          >{{ step[frKey] }}</span>
        </div>
        <slot :step="step" />
      </div>
    </cell>
  </group>
</template>
<script>
import Group from '../group'
import Cell from '../cell'
export default {
  components: {
    Group,
    Cell
  },
  props: {
    frKey: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: '审核流程'
    },
    steps: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      iconClass: {
        pending_review: 'status_waiting',
        approved: 'status_ok',
        rejected: 'status_no',
        not_started: 'original'
      }
    }
  }
}
</script>
