<template>
  <div class='bk-step'>
    <div v-if="direction === 'vertical'" class='vertical-step-wrap'>
      <div class='item' v-for="(item, index) in list" :key='index'>
        <div class='icon' :class="item.icon">
          <image :src="'/static/images/step-' + item.icon + '.svg'" mode='aspectFit' class="img"/>
        </div>
        <div class='title-desc'>
          <div class='step-title'>{{item.title}}</div>
          <div class='step-desc' v-if='item.desc'>{{item.desc}}</div>
        </div>
      </div>
    </div>
    <!-- <div v-if="direction === 'horizontal'" class='horizontal-step-wrap'>
      <div class='item' v-for="(item, index) in list" :key='index'>
        <div class='title-desc'>
          <div class='step-title'>{{item.title}}</div>
          <div class='step-desc' v-if='item.desc'>{{item.desc}}</div>
        </div>
        <div class='icon' :class="{
          frist: index === 0,
          last: (list.length - index- 1) === 0,
          normal:  index !== 0 && (list.length - index- 1) !== 0
        }">
          <div class='line left-line' v-if="index"></div>
          <image :src="'/static/images/step-' + item.icon + '.svg'" mode='aspectFit' class="img"/>
          <div class='line right-line' v-if="list.length - index- 1"></div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    },
    direction: {
      type: String,
      default: 'vertical'
    }
  },
  methods: {}
}
</script>

<style scoped>
.horizontal-step-wrap {
 display: flex;
 /* justify-content: space-around; */
}

.horizontal-step-wrap .icon .img {
 width: 32px;
 height: 32px;;
}
.horizontal-step-wrap .item {
  text-align: center;
  flex: 1;
}
.horizontal-step-wrap .item:first-child {
  text-align: left;
}
.horizontal-step-wrap .item:last-child {
  text-align: right;
}
.horizontal-step-wrap .title-desc {
  margin-bottom: 20px;
}
.horizontal-step-wrap .step-title {
  font-size: 32px;
  color: #222;
  font-weight: 600;
}
.horizontal-step-wrap .step-desc {
  font-size: 24px;
}
.horizontal-step-wrap .icon {
 display: flex;
 align-items: center;
}
.horizontal-step-wrap .line {
  flex: 1;
  height: 2px;
  background:rgba(228,230,240,1);
}
.horizontal-step-wrap .first {
  justify-content: flex-start;
}
.horizontal-step-wrap .normal {
  justify-content: center;
}
.horizontal-step-wrap .last {
  justify-content: flex-end;
}

.vertical-step-wrap .item {
  display: flex;
}
.vertical-step-wrap .title-desc {
  margin-left: 20px;
  padding-bottom: 40px;
}
.vertical-step-wrap .title-desc .step-title {
  font-size: 30px;
  color: #222222;
  font-weight: 600;
  margin-bottom: 14px;
}
.vertical-step-wrap .title-desc .step-desc {
  font-size: 26px;
  color: #666;
}
.vertical-step-wrap .icon .img {
  width: 24px;
  height: 24px;
}
.vertical-step-wrap .icon {
  position: relative;
  width: 32px;
  background: #fff;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.vertical-step-wrap .success .img, .vertical-step-wrap .failed .img {
  width: 32px;
  height: 32px;
}
.vertical-step-wrap .icon::before{
  display: block;
  content: '';
  height: calc(100% - 40px);
  position: relative;
  left: 50%;
  transform: translateX(calc(-50% - 2px));
  top: 24px;
  width: 2px;
  background: rgba(228,230,240,1);
  z-index: 1;
}
.vertical-step-wrap .success::before, .vertical-step-wrap .failed::before {
  left: 50%;
  transform: translateX(calc(-50%));
  top: 30px;
  display: block;
  content: '';
  height: calc(100% - 40px);
  position: relative;
  width: 2px;
  background: rgba(228,230,240,1);
  z-index: 1;
}
</style>

