<template>
  <div class="steps">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="steps-step">
      <div class="steps-step-head">
        <div
          v-if="index < list.length-1"
          class="steps-step-line"
          style="width: 1px;"
          :class="[lineColor(item.status || 0)]">
        </div>
        <div
          class="steps-step-icon"
          :style="{backgroundImage: item.isLight
            ? `url('http://store.sdbao.com/insure/images/seleced.png')`
          : `url('http://store.sdbao.com/product/progress-out.png')`}"></div>
      </div>
      <div class="steps-step-main">
        <div
          class="steps-step-title"
          :class="{'steps-step-title-now': item.isLight,
                   'steps-step-orange': item.status}"
          v-text="item.title"></div>
        <div
          class="steps-step-description"
          v-text="item.desc"></div>
        <div
          class="steps-step-tip"
          v-text="item.tip">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import create from '../utils/create';
export default create({
  name: 'steps',
  props: {
    list: {
      type: Array
    },
    orderType: {
      type: Number,
      default: 0
    }
  },
  methods: {
    lineColor (status) {
      const onColor = this.orderType
        ? 'steps-top'
        : 'steps-bottom'
      switch (status) {
        case 0: // 改步骤未完成,默认灰色
          return 'steps-gray'
          break
        case 1:  // 该步骤正在进行
          return onColor
          break
        case 2:  // 该步骤已完成
          return 'steps-orange'
          break
      }
    }
  }
})
</script>
