<template>
  <div class="signUp">
    <div class="content">
      <div class="signUp_titile">营地报名</div>
      <div>
        <Breadcrumb :statusNum="status"> </Breadcrumb>
      </div>
    </div>
    <Confirm v-if="type == 'examInfo'" :statusNum="status"> </Confirm>
    <Invitation v-else-if="type == 'invitation'"> </Invitation>
    <ReferInfo v-else-if="type == 'referInfo'"> </ReferInfo>
    <Pass v-else-if="type == 'check'"> </Pass>
    <Paying v-else-if="type == 'pay'"> </Paying>
  </div>
</template>

<script>
/* eslint-disable */
import Breadcrumb from "c/breadcrumb";
import Confirm from "c/index/SignUp/confirm";
import Invitation from "c/index/SignUp/invitation";
import ReferInfo from "c/index/SignUp/referInfo";
import Pass from "c/index/SignUp/pass";
import Paying from "c/index/SignUp/paying";
import { signUpInit } from "r/index/signUp";
export default {
  name: "signUp",
  components: {
    Breadcrumb,
    Confirm,
    Invitation,
    ReferInfo,
    Pass,
    Paying,
  },
  data() {
    return {
      type: "examInfo",
      status: "", //进度
    };
  },
  created() {
        this.type = this.$route.params.type;
    // console.log(this.$route);
    this.signUpInit();


  },
  watch: {
    $route: {
      handler(val) {
        const that = this;
        if (val.path.indexOf("signUp") != -1) {
          that.type = val.params.type;
        }
      },
      deep: true,
    },
  },
  methods: {
    signUpInit() {
      // console.log(111);
      signUpInit({}).then((res) => {
        console.log(res);
        if (res.data.code != 200) {
          return this.$message.error(res.data.message);
        }
        this.status = res.data.status;
        if (this.status == 0) {
          this.type = "examInfo";
        }else if (this.status == 1) {
          this.type = "invitation";
        }else if (this.status == 2) {
          this.type = "referInfo";
        }else if (this.status == 3) {
          this.type = "check";
        }else if (this.status == 4) {
          this.type = "pay";
        }
      });
    },
  },
};
</script>

<style lang="scss" >
.flex {
  display: flex;
}

.signUp {
  background: #ffffff;
  width: 856px;
  .signUp_titile {
    font-size: 24px;
    font-weight: 500;
    color: #1b1419;
    line-height: 24px;
    margin-bottom: 40px;
  }
  .content {
    padding: 50px;
  }
}
</style>
