<template>
  <div class="steps-box">
    <!-- <div class="businessNavigation">
      <el-steps :active="active" align-center>
        <el-step v-for="(item, index) in stepsData" :key="index" :title="item.formBusinessName"></el-step>
      </el-steps>
    </div> -->
    <div ref="businessNavigation" class="businessNavigation">
      <ul>
        <li v-for="(item, index) in stepsData" :key="index" :title="item.formBusinessName" @click="stepNodeClick(index)">
          <div class="businessCircle">{{ index + 1 }}</div>
          <div class="businessWord">
            <span>{{ item.formBusinessName }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="businessNavigation-empty" :style="{height: getBusinessNavigationHeight + 'px'}" />
  </div>
</template>

<script>
export default {
  props: {
    stepsData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active: 3,
      businessNavigationHeight: 0
    }
  },
  computed: {
    getBusinessNavigationHeight() {
      return this.businessNavigationHeight ? this.businessNavigationHeight : 100
      // if (this.$refs.businessNavigation) {
      //   console.log(this.$refs.businessNavigation.clientHeight, 8888888888)
      //   return this.$refs.businessNavigation.clientHeight
      // } else {
      //   return 100
      // }
    }
  },
  watch: {
    stepsData: {
      handler() {
        this.active = this.stepsData.length
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.businessNavigationHeight = this.$refs.businessNavigation.clientHeight
    this.$store.commit('scrollStore/SET_STEP_HEIGHT', this.getBusinessNavigationHeight)
  },
  methods: {
    // 步骤节点点击
    stepNodeClick(nodeIndex) {
      if (this.$parent.triggerCollapseOpen) {
        this.$parent.triggerCollapseOpen(nodeIndex)
      } else {
        let parentRefMixFun
        while (!parentRefMixFun) {
          if (!this.$parent) return
          if (!this.$parent.triggerCollapseOpen) {
            this.$parent = this.$parent.$parent
          } else {
            parentRefMixFun = this.$parent.triggerCollapseOpen
          }
        }
        if (parentRefMixFun) {
          parentRefMixFun(nodeIndex)
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
<style>
  .businessNavigation {
    text-align:center;
    position: fixed;
    min-height: 100px;
    background: #fff;
    width: calc(100% - 270px);
    z-index: 10;
  }
  .businessNavigation li{
    cursor:pointer;
    display:inline-table;
    width:95px;
    color:#E9423A;
    position:relative;
    font-size:0.8rem;
  }
  .businessNavigation li .businessCircle {
    border-radius:50%;
    background-color:#E9423A;
    color:#fff;
    width:20px;
    height:20px;
    line-height:20px;
    display:inline-block;
    position:relative;
    font-size:0.8rem;
    margin-bottom:8px ;
  }
  .businessNavigation ul{
    border-bottom:0px;
    display:table;
    width:100%;
    padding:16px 0;
    border:none;
    padding:0;
    padding:0.1rem 0.3rem;
  }
  .businessNavigation li:after,
  .businessNavigation li:before{
    content:'';
    display:block;
    position:absolute;
    left:50%;
    width:50%;
    font-size:0px;
    background-color:#E9423A;
    top:0.68rem;
    height:0.02rem;
    line-height:0.02rem;
  }
  .businessNavigation li:before{
    left:0;
  }
  .businessNavigation li:first-child:before{
    width:0;
  }
  .businessNavigation li:last-child:after{
    width:0;
  }
</style>
