<template>
  <!-- 登陆模块 -->
  <div class="login-warp" :class="!needFootInform ? 'login-main-no-footer' : ''">
    <div class="login-main">
      <!-- 左侧图片模块 -->
      <LeftImage :leftImg="leftImg" />
      <div class="login-right">
        <!-- 右侧边框 -->
        <div class="login-right-warp">
          <div class="right-content">
            <!-- 标题模块 -->
            <div class="reset-password-title">重置密码</div>
            <!-- 选择模块 -->
            <CheckModeReset v-if="resetModelNum > 1" :componentName.sync="componentName" />
            <!-- 重置密码模块 -->
            <component
              :key="componentName"
              :is="componentName"
              :loading.sync="loading"
              :hidenAgreement="hidenAgreement"
              :areaCodeData="areaCodeData"
              :mailboxSuffix="mailboxSuffix"
              @getCode="getCode"
              @reset="reset"
              @gobackLogin="gobackLogin"
            ></component>
          </div>
        </div>
      </div>
    </div>
    <LoginFooter v-if="!needFootInform" />
  </div>
</template>
    
    <script>
import LeftImage from '../../fireflyLogin/src/components/leftImage.vue';
import LoginFooter from '../../fireflyLogin/src/components/loginFooter.vue';
import ResetPasswordPhone from './components/resetPasswordPhone.vue';
import ResetPasswordEmail from './components/resetPasswordEmail.vue';
import CheckModeReset from './components/checkModeReset.vue';
export default {
  name: 'fireflyResetPassword',
  components: {
    LeftImage, //登录左侧图片
    LoginFooter, //底部备案信息
    ResetPasswordPhone, //通过手机验证码重置
    ResetPasswordEmail, //通过邮箱验证码重置
    CheckModeReset //通过邮箱验证码重置
  },
  props: {
    //重置方式多少种
    resetModelNum: {
      type: Number,
      default: 1
    },
    //左侧主图
    leftImg: {
      type: String,
      default: () => require('../../fireflyLogin/src/image/left.png')
    },
    //初始模块显示
    initialModule: {
      type: String,
      default: 'ResetPasswordPhone'
    },
    //登录loadgin
    loading: {
      type: Boolean,
      default: false
    },
    //是否隐藏协议
    hidenAgreement: {
      type: Boolean,
      default: false
    },
    //是否需要底部信息
    needFootInform: {
      type: Boolean,
      default: false
    },
    //区号下拉框
    areaCodeData: {
      type: Object,
      default: () => {}
    },
    //邮箱后缀
    mailboxSuffix: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    lolginModelNum: {
      handler(newVal) {
        const lolginModelNum = ['OneModeLogin', 'TwoModeLogin', 'ThreeModeLogin'];
        this.loginNumName = lolginModelNum[newVal - 1];
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      componentName: this.initialModule, //动态模块
      loginNumName: 'oneModeLogin'
    };
  },
  methods: {
    //切换重置方式
    checkComponentName(name) {
      this.componentName = name;
    },
    //统一返回登录操作
    gobackLogin() {
      this.$emit('gobackLogin');
    },
    //统一登录方法
    reset(data) {
      this.$emit('reset', data);
    },
    //统一获取手机邮箱验证码
    getCode(data) {
      this.$emit('getCode', data);
    },
    //统一清除邮箱手机定时器
    clearTimer() {
      this.$emit('clearTimer');
    }
  }
};
</script>
    <style lang="scss" scoped>
@import '../../../css/fireflyLogin.scss';
.reset-password-title {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}
</style>
    