<template>
  <div id="orderStateLayout" class="order-state">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'orderState',
  props: {
    active: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    // this.calDashLineWidth()
  },
  methods: {
    calDashLineWidth() {
      let lineEle = document.getElementsByClassName('state-line')
      let width = '88%'
      switch (lineEle.length) {
        case 2:
          width = '90%'
          break
        case 3:
          width = '84%'
          break
        case 4:
          width = '80%'
          break
      }
      for (let index = 0; index < lineEle.length; index++) {
        lineEle[index].style.width = width
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.order-state {
  display: flex;

  /deep/ .state-item {
    flex: 1
  }
}
</style>
