<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="[showCutQRIcon ? 'right-content-show-QR-icon' : 'right-content']">
            <!-- 二维码Icon模块 -->
            <CutQRIcon v-if="showCutQRIcon" :componentName.sync="componentName"></CutQRIcon>
            <!-- 标题模块 -->
            <LoginContentTitle :title="title" :logoImg="logoImg" />
            <!-- 登录模块 -->
            <component
              :key="componentName"
              :areaCodeData="areaCodeData"
              :tenantId="tenantId"
              :tenantList="tenantList"
              :is="componentName"
              :loading.sync="loading"
              :componentName.sync="componentName"
              :showCode="showCode"
              :base64Code="base64Code"
              :hidenAgreement="hidenAgreement"
              :QRlink="QRlink"
              :consent="consent"
              :mailboxSuffix="mailboxSuffix"
              @updateCode="updateCode"
              @login="login"
              @getCode="getCode"
              @clearTimer="clearTimer"
              @forgetPassword="forgetPassword"
            ></component>
            <!-- 多种登录方式选择 -->
            <component v-if="lolginModelNum > 1" :key="lolginModelNum" :componentName.sync="componentName" :is="loginNumName"></component>
            <!-- 注册账号 -->
            <AccountNumber v-if="!hidenAccount"></AccountNumber>
          </div>
        </div>
      </div>
    </div>
    <LoginFooter v-if="!needFootInform" />
  </div>
</template>
  
  <script>
import LoginContentTitle from './components/loginContentTitle.vue';
import LoginFooter from './components/loginFooter.vue';
import LeftImage from './components/leftImage.vue';
import TwoModeLogin from './components/twoModeLogin.vue';
import ThreeModeLogin from './components/threeModeLogin.vue';
import AccountNumber from './components/accountNumber.vue';
import CustomLogin from './components/customLogin.vue';
import AccountLogin from './components/customLogin.vue';
import VerificationCode from './components/verificationCode.vue';
import EmailLogin from './components/emailLogin.vue';
import ScanCodeLogin from './components/scanCodeLogin.vue';
import CutQRIcon from './components/cutQRIcon.vue';
export default {
  name: 'fireflyLogin',
  components: {
    LoginContentTitle, //登录模块标题
    LoginFooter, //底部备案信息
    LeftImage, //登录左侧图片
    TwoModeLogin, //两种登录模块登录
    ThreeModeLogin, //三种登录模块登录
    AccountNumber, //注册账号
    CustomLogin, //域登录
    AccountLogin, //账号登录
    VerificationCode, //验证码登录
    EmailLogin, //邮件登录
    ScanCodeLogin, //扫码登录
    CutQRIcon //切换账号登录以及扫码登录
  },
  props: {
    //显示icon切换扫码以及域账号登录模块
    showCutQRIcon: {
      type: Boolean,
      default: false
    },
    //同意协议
    consent: {
      type: Boolean,
      default: false
    },
    //二维码扫码后地址
    QRlink: {
      type: String,
      default: '扫码登录模块需传递QRlink参数'
    },
    //登录方式多少种
    lolginModelNum: {
      type: Number,
      default: 1
    },
    //设置默认当前租户id
    tenantId: {
      type: String,
      default: () => null
    },
    //租户列表
    tenantList: {
      type: Array,
      default: () => []
    },
    //系统标题
    title: {
      type: String,
      default: '系统管理后台'
    },
    //系统logo
    logoImg: {
      type: String,
      default: () => require('./image/logo.png')
    },
    //左侧主图
    leftImg: {
      type: String,
      default: () => require('./image/left.png')
    },
    //初始模块显示
    initialModule: {
      type: String,
      default: 'CustomLogin'
    },
    //登录loadgin
    loading: {
      type: Boolean,
      default: false
    },
    //是否开启验证码
    showCode: {
      type: Boolean,
      default: false
    },
    //验证码图片
    base64Code: {
      type: String,
      default: null
    },
    //是否隐藏注册
    hidenAccount: {
      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: {
    //统一更新验证码
    updateCode() {
      this.$emit('updateCode');
    },
    //统一忘记密码操作
    forgetPassword() {
      this.$emit('forgetPassword');
    },
    //统一登录方法
    login(data) {
      this.$emit('login', data);
    },
    //统一获取手机邮箱验证码
    getCode(data) {
      this.$emit('getCode', data);
    },
    //统一清除邮箱手机定时器
    clearTimer() {
      this.$emit('clearTimer');
    }
  }
};
</script>
  <style lang="scss" scoped>
@import '../../../css/fireflyLogin.scss';
</style>
  