<template>
  <div id="step-node">
    <div class="steps-wrap">
      <div v-for="(item, index) in stepsList" class="step">
        <div class="icon-wrap">
          <div class="el-step-line"></div>
          <span class="step-icon">
            <img v-if="item.actived" :src="require('@/assets/img/step/'+ item.iconOn)" />
            <img v-else-if="item.step<currStep" :src="require('@/assets/img/step/'+ item.iconFinish)" />
            <img v-else :src="require('@/assets/img/step/'+ item.iconOff)" />
          </span>
        </div>
        <span class="node">
          <p>{{index+1}}.{{item.name}}</p>
          <p v-if="item.extName">&nbsp;&nbsp;{{item.extName}}</p>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-node',
    mounted() {

    },
    methods: {

    },
    props: {
      currStep: {
        type: Number,
        default: 3,
        required:true
      },
    },
    watch:{
      currStep(newVal, val){
        if(newVal){
          this.stepsList.forEach(item=>{
            if(item.step === newVal){
              item.actived = true;
              this.$parent.stepTitle = item.name + (item.extName ? item.extName : '');
            }else{
              item.actived = false;
            }
          })
        }
      },

    },
    data() {
      return {
        stepsList: [
          // {
          //   step: 1,
          //   name: '检验客户',
          //   iconOff: 'check-off.png',
          //   iconOn: 'check-on.png',
          //   iconFinish: 'check-finish.png',
          //   actived: true,
          // },
          {
            step: 1,
            name: '创建客户',
            iconOff: 'user-off.png',
            iconOn: 'user-on.png',
            iconFinish: 'user-finish.png',
            actived: true,
          },
          {
            step: 2,
            name: '完善详细信息',
            iconOff: 'edit-off.png',
            iconOn: 'edit-on.png',
            iconFinish: 'edit-finish.png',
            actived: false,
          },
          {
            step: 3,
            name: '地址及业务信息',
            iconOff: 'check-off.png',
            iconOn: 'check-on.png',
            iconFinish: 'check-finish.png',
            actived: false,
          },
          // {
          //   step: 4,
          //   name: '完善开票及',
          //   extName: '收单方信息',
          //   iconOff: 'fapiao-off.png',
          //   iconOn: 'fapiao-on.png',
          //   iconFinish: 'fapiao-finish.png',
          //   actived: false,
          // },
          // {
          //   step: 4,
          //   name: '上传文档信息',
          //   iconOff:'document-off.png',
          //   iconOn: 'document-on.png',
          //   iconFinish: 'document-finish.png',
          //   actived: false,
          // },
          {
            step: 4,
            name: '申请正式客户',
            iconOff: 'apply-off.png',
            iconOn: 'apply-on.png',
            iconFinish: 'apply-finish.png',
            actived: false,
          },
        ],

      }
    }
  }
</script>

<style  lang="scss">
#step-node{
  background-color: #fff;
  padding: 30px 0;

  .steps-wrap{
    max-width: 1300px;
    width: 82%;
    margin: 0 auto;
    display: flex;

    .step {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        font-size: 13px;
        line-height: 19px;
        white-space: nowrap;
        &:nth-child(2){
          font-weight: bold;
        }
      }
    }
    .icon-wrap{
      width: 100%;
      display: flex;
      justify-content: center;
      position: relative;
      margin-bottom: 5px;
    }
    .step-icon{
      width: 40px;
      height: 40px;
      background-size: 100% 100%;
      border-radius: 50%;
      z-index: 9;
    }

  }
  .el-step-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50%);
    max-width: 1300px;
    width: 100%;
    height: 2px;
    background: rgba(221, 221, 221, 0.39);
    border-radius: 5px;
    margin: 0 auto;
  }

}

</style>
