<template>
  <div class="flow-picture">
    <div class="flow-content">
      <div v-for="(item, index) in stepList" :key="index" class="flow-box">
        <svg-icon :icon-class="item.icon" style="font-size: 60px;" />
        <div class="title">
          {{ item.title }}
          <div v-if="item.jumpName && !hideJump" class="jump" @click="jumpClick(item.jumpUrl)">{{ item.jumpName }}</div>
        </div>
        <div v-if="item.line" class="line" />
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    hideJump: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      stepList: [
        {
          icon: 'jiaoHangOne',
          title: '提交开户资料',
          jump: '',
          line: true
        },
        {
          icon: 'jiaoHangTwo',
          title: '开通账户',
          jumpName: '立即前往',
          jumpUrl: '/cyAccountManage/index',
          line: true
        },
        {
          icon: 'jiaoHangThree',
          title: '绑定并激活实体账户',
          jump: '',
          line: true
        },
        {
          icon: 'jiaoHangFour',
          title: '账户开通成功',
          jump: '',
          line: false
        }
      ]
    }
  },
  methods: {
    jumpClick(url) {
      this.$router.push({ path: url })
    }
  }
}
</script>

<style lang="scss" scoped>
.flow-picture {
  background: #F5F6F6;
  padding: 20px;
  .flow-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .flow-box {
    display: flex;
    align-items: center;
    .title {
      font-size: 16px;
      font-weight: 700;
      margin-left: 20px;
      .jump {
        color: #FE7D0B;
        cursor: pointer;
        font-size: 12px;
        margin-top: 10px;
      }
    }
    .line {
      width: 100px;
      border-bottom: 1px dashed #FE7D0B;
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}
</style>
