<template lang="pug">
  ul.cpt-step
    li.step(v-for="step in data" @click="activeStep(step.title)" :style="{width:width+'%'}" :class="{active:step._active}")
      span.text {{step.title}}
</template>

<script>
import _ from 'lodash';
export default {
  props: {
    steps: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      data: this.steps
    }
  },
  watch: {
    steps(nv) {
      this.data = nv || [];
    }
  },
  computed: {
    width() {
      return 100 / this.steps.length;
    }
  },
  methods: {
    activeStep(title) {
      this.data = _.map(this.data, item => {
        item._active = false;
        if (item.title === title)
          item._active = true;
        return item;
      })
    }
  }
}
</script>

<style lang="less">
@stepHeight: 40px;
@color: #2FBF50;
@arrowColor: #FFF;
.arrow(@left: 0, @color) {
  content: '';
  position: absolute;
  left: @left;
  top: -10px;
  bottom: 0;
  border-top: 30px solid transparent;
  border-left: 60px solid @color;
  border-bottom: 30px solid transparent;
}

.cpt-step {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #FFF;
  cursor: pointer;
  .step {
    &.active {
      background-color: #ACF;
      &+:not(:first-child)::after {
        .arrow(0, #ACF)
      }
    }
    box-sizing: border-box;
    display: inline-block;
    background-color: @color;
    padding: 0 1rem;
    &:not(:first-child) {
      padding-left: 80px;
    }
    height: @stepHeight;
    line-height: @stepHeight;
    position: relative;
    overflow: hidden;
    &:not(:first-child)::after {
      .arrow(0, @color);
      z-index: 1;
    }
    &:not(:first-child)::before {
      .arrow(10px, @arrowColor);
    }
  }
}
</style>
