<template>
  <div class="grid-container">
    <div class="grid-item-1">
      <Navbar
        :title="$t('lang.RetrievePassword.retrievePassword')"
        :is-go-back="true"
      />
      <a-divider />
      <section>
        <a-steps :current="pageInformation.currentStep">
          <a-step :title="$t('lang.RetrievePassword.authentication')" />
          <a-step :title="$t('lang.RetrievePassword.resetPassword')" />
          <a-step :title="$t('lang.RetrievePassword.complete')" />
        </a-steps>
      </section>
      <a-divider />
      <section>
        <retrieve-password-step1
          v-if="pageInformation.showPage == 0" :current-step="pageInformation"
          :user-dto-prop="userDto" @update-user-dto="updateUserDto" @next="nextStep"
        />
        <retrieve-password-step2
          v-if="pageInformation.showPage == 1" :current-step="pageInformation"
          :user-dto-prop="userDto" @next="nextStep"
        />
        <retrieve-password-step3 v-if="pageInformation.showPage == 2" />
      </section>
    </div>
  </div>
</template>

<script>

import RetrievePasswordStep1 from './RetrievePasswordStep1.vue';
import RetrievePasswordStep2 from './RetrievePasswordStep2.vue';
import RetrievePasswordStep3 from './RetrievePasswordStep3.vue';
export default {
  components: {
    'retrieve-password-step1': RetrievePasswordStep1,
    'retrieve-password-step2': RetrievePasswordStep2,
    'retrieve-password-step3': RetrievePasswordStep3,
  },
  data: function () {
    return {
      pageInformation: {
        currentStep: 0,
        showPage: 0,
      },
      userDto: {
        loginName: null,
        email: null,
        verificationCode: null,
        newPassword: null,
        newPassword2: null,
      },
    };
  },

  methods: {
    nextStep: function (data) {
      var _self = this;
      _self.pageInformation = data;
      Object.assign(this.pageInformation, data);
    },
    previousStep: function (data) {
      var _self = this;
      _self.pageInformation = data;
    },
    /**
       * 修改数据
       */
    updateUserDto: function (userDto) {
      Object.assign(this.userDto, userDto);
    },


    mounted: function () { },
  },
};
</script>
<style scoped>
  .grid-container {
    display: grid;
    grid-template-rows: 8% 8% 84%;
    grid-template-columns: 100%;
    width: 100%;
    /*视口被均分为 100 单位的 vh 占据整个窗口，扣掉顶部 topNav 的距离后，计算得到 responseOrganizationSelect 的高度*/
    height: calc(100vh - 130px);
    margin-top: 10px;
  }

  .grid-item-1 {
    grid-row: 1/2;
  }

  .grid-item-2 {
    grid-row: 2/3;
  }

  .grid-item-3 {
    grid-row: 3/4;
  }

  .box {
    border: 1px #ccc solid;
    margin-bottom: 15px;
    padding-top: 10px;
    border-radius: 5px;
    background-color: #ffffff;
  }

  .label {
    float: left;
  }

  .div-form {
    margin-bottom: 10px;
  }
</style>