<!--
  @description:注册页面
  @Modifier:徐媛媛
  @routerPath:/register/registerFinishReg
  @date:2020/8/3-19：34
-->
<template>
  <div class="register">
    <headerBar />
    <div class="register-body">
      <el-scrollbar class="register_scrollbar">
        <div class="content">
          <registerStpe ref="registerStpe" :list="stepsList" class="registerStpe" />
          <router-view @stepPage="_stepPage" />
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import registerStpe from '@/components/common/registerStpe'
import headerBar from '@/components/layout/components/headerBar'

export default {
  name: 'SupplierRegisterContent',
  components: {
    registerStpe,
    headerBar
  },
  data() {
    return {
      stepsList: [{
        // 注册身份选择
        name: '注册身份选择',
        path: '/register/registerType'
      }, {
        // 注册须知
        name: '阅读注册须知',
        path: '/expert/register/expertRegisterRules'
      }, {
        // 注册
        name: '填写基本信息',
        path: '/expert/register/expertRegisterInfo'
      }, {
        // 注册完成
        name: '完成注册登录',
        path: '/expert/register/expertRegisterFinishReg'
      }]
    }
  },
  destroyed() {
    sessionStorage.clear()// 清除缓存
  },
  methods: {
    // 控制上一步 下一步跳转页面 子组件传给父组件
    // prev 上一步 next 下一步 或者是数字直接指定展示第几步的页面
    _stepPage(page, pageData) {
      // 路由携带参数
      const query = {
        id: pageData.id// 项目Id
      }
      // 调用步骤条-组件方法
      this.$refs.registerStpe.stepPage(page, query)
    }
  }
}
</script>
<style lang="less" scoped>
.register {
  .register-body {
    .register_scrollbar {
      height: calc(100vh - 60px) !important;
    }
    .content {
      width: 900px;
      margin: 0 auto;
      .registerStpe{
        padding: 40px 0px;
      }
    }
  }
}
</style>
