<!--
  @description: 立项步骤条
  @Modifier: haoFx
  @routerPath:
  @date: 2019/12/21-17:18
-->
<template>
  <div class="steps-bar">
    <ul id="" class="clearfix">
      <li
        v-for="(item,index) in list"
        :key="index"
        :style="'width:'+100/list.length+'%'"
        :class="{'active':item.path === path, 'complete': index<active&& item.path !== path || parentPageData.id &&
          item.path !== path}"
        class="fl pointer"
        @click="step(item,index)"
      >
        <span v-text="index+1" />
        {{ item.name }}
        <em v-if="(index+1)<list.length" />
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 在没有保存时，前几active可以点击进行切换
    active: {
      type: Number,
      default: 0
    },
    // 在 所有步骤条都打开的情况下才会生效 stepIndex 只有cureated时候执行
    stepIndex: {
      type: Number,
      default: 0
    },
    // 暂存草稿
    save: {
      type: Function,
      default: function() {}
    },
    // 接收步骤条父页面信息
    parentPageData: {
      type: Object,
      default: function() {
        return {
          id: ''
        }
      }
    }
  },
  data() {
    return {
      path: this.$route.path // 获取当前路由
    }
  },
  watch: {
    $route(to) {
      // 判断是否存在当前跳转的路径
      let isStep = false // true 存在 false 不存在
      this.list.forEach(step => {
        if (to.path === step.path) {
          isStep = true
        }
      })
      if (!isStep) {
        // 设置索引
        this.path = this.list.length > 0 && this.list[0].path
        this.$router.push(this.path)
      } else {
      // 设置索引
        this.path = to.path
      }
    }
  },
  created() {
    // 初始化页面-判断是否已将所有节点可操作 如果非则跳转到第一步 如果已打开则跳转到指定节点
    if (!this.parentPageData.id) {
      this.$router.push(this.list[0].path)
    } else {
      this.$router.push(this.list[this.stepIndex].path)
    }
  },
  methods: {
    // 控制上一步 下一步跳转页面 子组件传给父组件
    // prev 上一步 next 下一步 或者是数字直接指定展示第几步的页面
    stepPage(page) {
      const stepsListLen = this.list.length
      let active = 0// 下标
      for (let i = 0; i < stepsListLen; i++) {
        if (this.list[i].path === this.path && page === 'prev') {
          active = i - 1
          break
        }
        if (this.list[i].path === this.path && page === 'next') {
          active = i + 1
          break
        }
      }
      // 如果传入的不是 prev 和 next 就直接赋值 active
      if (page !== 'prev' && page !== 'next') {
        active = page
      }
      // 路由跳转
      this.$router.push({
        path: this.list[active].path
      })
    },
    // 步骤条点击跳转
    step(item, index) {
      // 调用暂存草稿
      // 当前点击index 小于路由传值active 并且 当点击的item.path路径和当前展示页面的path路径不同 或者
      // 获取有id 可以随意点击步骤条 并且 当点击的item.path路径和当前展示页面的path路径不同
      if (index < this.active && item.path !== this.path || this.parentPageData.id && item.path !== this.path) {
        this.save('draft')// draft 点击步骤条切换-进行保存草稿
        this.$router.push({
          path: item.path
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
  //  步骤条
  @stepsH: 40px;//高度
  @border:#DBE2F1;//边框颜色
  .steps-bar {
    background: @french-grey;

    ul {
      width: 100%;

      div.complete {
        padding-left: 24px;
        position: relative;
        height: @stepsH;
        line-height: @stepsH - 2px;
        text-align: center;
        border: 1px solid @border;
        border-right: none;
        color: @hyacinthine;

        span {
          background: @hyacinthine;
          color: @white;
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          line-height: 20px;
          margin-right: 8px;
        }

        em {
          position: absolute;
          top: -1px;
          right: -19px;
          display: block;
          width: 19px;
          height: @stepsH;
          overflow: hidden;

          &:before {
            content: "";
            position: absolute;
            top: 1px;
            left: 0;
            height: 0;
            width: 0;
            border-left: 11px solid @french-grey;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            z-index: 2;
          }

          &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 0;
            width: 0;
            border-left: 12px solid @border-gray;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            z-index: 1;
          }
        }
      }

      li {
        padding-left: 24px;
        position: relative;
        height: @stepsH;
        line-height: 38px;
        text-align: center;
        border: 1px solid @border-gray;
        border-right: none;
        color: @gray;
        font-size: 14px;
        white-space: nowrap;
        span {
          background: @gray;
          color: @white;
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          line-height: 20px;
          margin-right: 8px;
        }

        em {
          position: absolute;
          top: -1px;
          right: -19px;
          display: block;
          width: 19px;
          height: @stepsH;
          overflow: hidden;

          &:before {
            content: "";
            position: absolute;
            top: 1px;
            left: 0;
            height: 0;
            width: 0;
            border-left: 11px solid @french-grey;
            border-top: 19px solid transparent;
            border-bottom: 19px solid transparent;
            z-index: 2;
          }

          &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 0;
            width: 0;
            border-left: 12px solid @border-gray;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            z-index: 1;
          }
        }

        &:last-child {
          border-right: 1px solid @border-gray;
        }
      }

      .active {
        background: @hyacinthine;
        border: 1px solid @hyacinthine;
        border-right: none;
        color: @white;

        span {
          background: @white;
          color: @hyacinthine;
        }

        em {
          &:before {
            border-left: 18px solid @hyacinthine;
          }

          &:after {
            border-left: 18px solid @hyacinthine;
          }
        }
      }

      .complete {
        color: @hyacinthine;

        span {
          background: @hyacinthine;
          color: @white;
        }
      }

      .select {
        border: 1px solid @hyacinthine;
      }
    }
  }
</style>
