<!--
  @description: 机构管理三个步骤容器
  @author: change by sunxinman
  @routerPath: 无
  @date: 2019/11/16-23:33
-->
<template>
  <div class="set-up-project">
    <div class="step-wrapper">
      <stepsBar :list="stepsList" :active="active" />
    </div>
    <div class="p0-16">
      <router-view @stepPage="_stepPage" @lastStep="_lastStep" />
    </div>
  </div>
</template>
<script>
import stepsBar from '@comp/common/stepsBar'
export default {
  name: 'SetUpProject',
  components: {
    stepsBar
  },
  data() {
    return {
      scrollbar: '',
      active: this.$route.meta.step,
      stepsList: [{
        name: '公司基本信息',
        path: '/systemManagement/addOrganization/companyProfile'
      }, {
        name: '联系人信息',
        path: '/systemManagement/addOrganization/contactInformation'
      }, {
        name: '财务信息',
        path: '/systemManagement/addOrganization/financialInformation'
      }]
    }
  },
  watch: {
    $route(to) {
      this.active = to.meta.step
      const step = this.$route.meta.step || 1
      const id = this.$route.query.departId || 1
      if (typeof step === 'string' && typeof id === 'string') {
        const data = {
          departId: id
        }
        this._stepPage(step, data)
      }
    }
  },
  created() {
    const step = this.$route.meta.step || 1
    const id = this.$route.query.id || 1
    if (typeof step === 'string' && typeof id === 'string') {
      const data = {
        departId: id
      }
      this._stepPage(step, data)
    }
  },
  methods: {
    // 上一步
    _lastStep(page) {

    },
    // 步骤页面 1，2，3，4
    _stepPage(page, data) {
      this.stepsList[page].query = data
      const path = {
        path: this.stepsList[page].path,
        query: data
      }
      this.$router.push(path)
    }
  }
}
</script>
<style lang="less" scoped>
  .step-wrapper {
    padding: 20px 16px;
  }
</style>
