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

<script>
export default {
  name: "plStepOA",
  props:{
    stepArr:{
      type:Array,
      defalut:[]
    },
    value:{type:String},
    checkIndex:{type:String},
    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+'');
      // 改数据时解除注释
      // this.formData[this.checkIndex] = 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;

      // 改数据时解除注释
      // if(!this.value){
      // }else{
      //   this.clickIndex = this.value;
      // }

      this.$emit('input', this.clickIndex +'');

      this.$nextTick(()=>{
        this.setCurrentNode();
      });
    },
    stepClick(index){
      // 改数据时注释
      if(index>this.currentIndex){
        return;
      }

      this.clickIndex = index;

      setTimeout(()=>{
        this.setStepNodeStyle(index);
      },100);
    },
    setStepNodeStyle(index){
        let num = this.currentIndex - index;
        for(let i=0;i<num;i++){
            if(index < this.currentIndex){
                let $centerNode = $.find('.plStep_'+(Number(index)+i))[0]; // 默认节点
                $($centerNode).find('.el-step__head').removeClass('is-wait').addClass('is-success');
                $($centerNode).find('.el-step__head .el-step__icon .el-step__icon-inner').html('');
                $($centerNode).find('.el-step__head .el-step__icon .el-step__icon-inner').addClass('is-status').addClass('el-icon-check');
                $($centerNode).find('.el-step__main .el-step__title').removeClass('is-wait').addClass('is-success');
                $($centerNode).find('.el-step__head .el-step__icon').css({"width":"24px","height":"24px"});
            }
        }

        this.setCurrentNode();
    },
    setCurrentNode(){
        console.log(this.formData);
        /* 更改默认节点样式 */
        let $currentNode = $.find('.plStep_'+this.currentIndex)[0]; // 默认节点
        $($currentNode).find('.el-step__head .el-step__icon').css({"color":"#409EFF","border-color":"#409EFF"});
        $($currentNode).find('.el-step__head .el-step__icon .el-step__icon-inner').css('font-size','30px');
        $($currentNode).find('.el-step__main .el-step__title').css("color","#409EFF");

        for(let i=0;i<this.currentIndex;i++){
            let no = 'cd6a70197cbd11eb9864cbcc2773cb26';
            if(this.formData[this.sfbhcjdMap[i]] == no){
                let $noNode = $.find('.plStep_'+i)[0];
                $($noNode).find('.el-step__head').removeClass('is-wait').removeClass('is-success');
                $($noNode).find('.el-step__head .el-step__icon .el-step__icon-inner').html('');
                $($noNode).find('.el-step__head .el-step__icon .el-step__icon-inner').removeClass('el-icon-check').addClass('el-icon-close');
                $($noNode).find('.el-step__main .el-step__title').css('color','#606266');
                $($noNode).find('.el-step__head .el-step__icon').css('color','#606266');
            }
        }
        // let $currentNextNode = $.find('.plStep_'+(this.currentIndex+1)); // 默认节点
        // let $currentUpNode = $.find('.plStep_'+(this.currentIndex-1)); // 默认节点
        // if($currentNextNode.length){
        //     $($currentNextNode[0]).find('.el-step__head .el-step__icon').removeAttr('style');
        //     $($currentNextNode[0]).find('.el-step__main .el-step__title').removeAttr('style');
        // }
        // if($currentUpNode.length){
        //     $($currentUpNode[0]).find('.el-step__head .el-step__icon').removeAttr('style');
        //     $($currentUpNode[0]).find('.el-step__main .el-step__title').removeAttr('style');
        // }
    }
  }
}
</script>

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