<template>
    <el-steps :active="clickIndex" finish-status="success" process-status="finish" align-center :class="isView ? 'step-view' : ''">
      <el-step :title="item.title" v-for="(item,index) in stepArr" :key="index"
               :class="'plStep_'+index"
               @click.native="stepClick(index)"></el-step>
    </el-steps>
</template>

<script>
export default {
  name: "plStep",
  props:{
    stepArr:{
      type:Array,
      defalut:[]
    },
    value:{type:String},
    checkIndex:{type:String},
    isView:{type:Boolean,default:false},
    noCheckIndex:{type:String},
    formData:{type:Object,defalut:()=>{}},
    defalutIndex:{type:Number,defalut:0},
  },
  data(){
    return {
      clickIndex:0,
      currentIndex:0,// 当前节点默认值
      sfbhcjdMap:[
          'f87ceec3477711eca2efe30edf8a1f12', // 是否包含商机立项
          'f8855334477711eca2efa71b72b8dbb9', // 是否包含需求引导
          'f88ec915477711eca2ef3704d4f9f35b', // 是否包含建议书阶段
          'f897c9c6477711eca2efddb8474118c1', // 是否包含可研阶段
          'f89fe017477711eca2ef4ded624653ea', // 是否包含初设阶段
          'f8a6bde8477711eca2efdf9ea609a560', // 是否包含招标阶段
          'f8ade9d9477711eca2effb572b0d9e3e', // 是否包含投标阶段
          'f8b6755a477711eca2ef7d74c70b998c', // 是否包含中标公示
          'f8bed9cb477711eca2ef93716fe2b53b' // 是否包含合同签订
      ],
    }
  },
  watch:{
    "clickIndex"(){
      this.$emit('input', this.clickIndex+'');
    },
  },
  created() {
    this.setNodesIndex(this.formData);
  },
  methods:{
    setNodesIndex(formData){
      /* 当前节点 */
      if(!formData[this.checkIndex]){
        this.currentIndex = 0;
        formData[this.checkIndex] = '0';
      }else{
        this.currentIndex = Number(formData[this.checkIndex]);
      }

      /* 选中节点 */
      this.clickIndex=this.currentIndex;

      this.$emit('input', this.clickIndex +'');
    },
    stepClick(index){
        if(this.isView){
            return;
        }
        this.clickIndex = index;
    },
  }
}
</script>

<style scoped>
  .el-steps{
    cursor:pointer;
  }
  .el-steps /deep/.el-step-hover:hover{
    border-color:red;
    color:red;
  }
  .el-steps /deep/ .el-step__head{
      top: 15px !important;
  }
  .el-steps /deep/ .el-step__icon{
      margin-top: 3px !important;
  }
    .step-view{
        cursor: default!important;
    }
</style>