<!--
  @description:注册
  @Modifier:肖文龙/徐媛媛
  @routerPath:/register/registerFinishReg
  @date:2020/8/3-19：34
-->
<template>
  <div class="register-stpe">
    <ul id="" class="clearfix">
      <li
        v-for="(item,index) in list"
        :key="index"
        :style="'width:calc('+100/list.length+'% - '+(index+1===list.length?'0px':'4px')+')'"
        :class="{'accomplish':index<active?item.path!==path:false,'active':item.path === path,'default':index>active?item.path!==path:false}"
        class="fl"
      >
        <dl>
          <dt>
            {{ item.name }}
          </dt>
          <dd>
            <p class="register-stpe-left" />
            <p class="register-stpe-num">
              {{ index+1 }}
            </p>
            <p class="register-stpe-right" />
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 暂存草稿
    save: {
      type: Function,
      default: function() {}
    }
  },
  data() {
    return {
      active: 0, // 索引
      path: this.$route.path // 获取当前路由
    }
  },
  watch: {
    $route(to, from) {
      this.path = this.$route.path
    }
  },
  created() {
    this.stepPage()// 制上一步 下一步跳转页面 子组件传给父组件 自调获取索引
  },
  methods: {
    // 控制上一步 下一步跳转页面 子组件传给父组件
    // prev 上一步 next 下一步 或者是数字直接指定展示第几步的页面
    stepPage(page, query) {
      const stepsListLen = this.list.length
      // 如果传入的不是 prev 和 next 就直接赋值 active
      if (page !== 'prev' && page !== 'next') {
        this.active = page
      }
      for (let i = 0; i < stepsListLen; i++) {
        if (this.list[i].path === this.path && page === 'prev') { // 上一步
          this.active = i - 1
          break
        } else if (this.list[i].path === this.path && page === 'next') { // 下一步
          this.active = i + 1
          break
        } else if (this.list[i].path === this.path) { // 直接查找当前节点索引
          this.active = i
          break
        }
      }
      if (page) {
      // 路由跳转
        this.$router.push({
          path: this.list[this.active].path,
          query: {
            ...query
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
  @import "~@/assets/style/common/public.less";
  //  步骤条
  @stepsH: 72px;//高度
  @register-stpe-num-color:#fff;//步骤条下面步骤圆圈内容颜色
  @register-stpe-num-h:24px;//步骤条数字内容高宽
  @accomplish:#5EAB30;//已完成节点
  @accomplish-bg:#92D768;//已完成节点-步骤条下面步骤圆圈背景色
  @accomplish-line: #DAE9CF; // 已完成节点-横线颜色
  @active:@hyacinthine;//默认色-当前节点
  @default:#D2D2D2;//默认色-未开启
  @default-line: #eee; // 默认横线颜色-未开启
  .register-stpe {
    ul {
      width: 100%;
      // 默认样式
      li {
        position: relative;
        height: @stepsH;
        margin-right: 4px;
        &:last-of-type{
          margin-right: 0px;
        }
        dl{
          //步骤条标题
          dt{
            text-align: center;
            font-size: 16px;
            margin-bottom: 10px;
          }
          // 下边步骤条页数样式
          dd{
            position: relative;
            height: @register-stpe-num-h;
            p{
              float: left;
            }
            // 横线
            .register-stpe-left,.register-stpe-right{
              position: absolute;
              height: 3px;
              width: calc((100% - (@register-stpe-num-h + 10px)) / 2);
              bottom: calc((@register-stpe-num-h - 3px) / 2);
            }
            .register-stpe-left{
              left: 0;
            }
            .register-stpe-right{
              right: 0;
            }
            // 圆圈
            .register-stpe-num{
              font-size: 14px;
              left: calc((100% - (@register-stpe-num-h)) / 2);
              position: absolute;
              bottom: 0;
              color: @register-stpe-num-color;
              width: @register-stpe-num-h;
              height: @register-stpe-num-h;
              line-height: calc(@register-stpe-num-h - 2px);
              text-align: center;
              border-radius: 50px;
            }

          }
        }
    }
        // 已完成
        li.accomplish{
          color: @accomplish;
          dl{
          // 下边步骤条页数样式
            dd{
              // 横线
              .register-stpe-left,.register-stpe-right{
                background: @accomplish-line;
              }
              // 圆圈
              .register-stpe-num{
                background: @accomplish-bg;
              }
            }
          }
        }
        // 当前节点
        li.active{
          color: @active;
          dl{
          // 下边步骤条页数样式
            dd{
              // 横线
              .register-stpe-left,.register-stpe-right{
                background: @active;
              }
              // 圆圈
              .register-stpe-num{
                background: @active;
              }
            }
          }
        }
        // 未开启
        li.default{
        color: @default;
          dl{
          // 下边步骤条页数样式
            dd{
              // 横线
              .register-stpe-left,.register-stpe-right{
              background: @default-line;
              }
              // 圆圈
              .register-stpe-num{
                background: @default;
              }
            }
          }
        }
  }
  }
</style>
