<template>
  <div class="login-container">
    <div class="top-logo">
      <div class="top-left">
        <img :src="logoImg" class="login-logo" />
<!--        <el-divider direction="vertical" class="vertical-line"></el-divider>-->
<!--        <span class="tenant-name">{{ tenantName }}</span>-->
      </div>
<!--      <div class="top-right" @click="goToOfficialWebsite">-->
<!--        <i class="icon-shouye1"></i>-->
<!--        <span class="top-text">宏天官网</span>-->
<!--      </div>-->
    </div>
    <div class="login-main">
      <div class="login-content">
<!--        <div class="login-img-container">-->
<!--          <img :src="loginImg" class="login-img" />-->
<!--        </div>-->
        <div
          class="login-form__wrap"
          :class="{
            'has-verification-code': isShowVerificationCode || isScanCode,
          }"
        >
          <!-- <div class="switch-language">
            <el-dropdown trigger="click" @command="handleSetLanguage">
              <span class="el-dropdown-link">
                {{ $t('ht.selectLang.switchLang') }}
                <i class="el-icon-caret-bottom el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in langOptions"
                  :key="index"
                  :command="item.value"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div> -->
          <div v-if="isShowQrCode" class="scan-code-icon__wrap">
            <span class="tip-msg">
              {{ isScanCode ? '账号密码登录' : '扫码登录' }}
            </span>
            <div class="scan-code-img" @click="handleScanCode">
              <img :src="isScanCode ? pcLogin : scanCode" />
            </div>
          </div>

          <div class="title" :class="{ 'not-code': !isShowQrCode }">
            Hello，欢迎登录
          </div>
          <div v-show="isScanCode" class="scan-code__wrap">
            <div class="scan-code-item">
              <template
                v-for="item in scanCodeMode.filter((it) => it !== 'flyBook')"
              >
                <div
                  v-show="currentSelectedKey === item"
                  :id="thirdPartyAppIdMap[item]"
                  :key="item"
                >
                  <img :src="qrDefaultImg" alt="" />
                </div>
              </template>
              <div v-show="currentSelectedKey === 'flyBook'">
                <div
                  id="qr_flyBook"
                  ref="qrFlyBookContainer"
                  class="scan-code-area"
                ></div>
                <img v-if="!hasFlyBook" :src="qrDefaultImg" alt="" />
                <span v-if="hasFlyBook" class="scan-code-tip">
                  请使用飞书扫描二维码登录
                </span>
              </div>
            </div>
          </div>

          <div class="login-form__content">
            <template v-if="!isScanCode && !isTwoStepVerify">
              <el-form
                ref="form"
                :model="form"
                :rules="rules"
                class="login-form"
                label-position="left"
              >
                <el-form-item prop="username">
                  <el-input
                    v-model.trim="form.username"
                    v-focus
                    placeholder="请输入用户名"
                    clearable
                    tabindex="1"
                  >
                    <i slot="prefix" class="icon-zhanghao" />
                  </el-input>
                </el-form-item>
                <el-form-item
                  prop="password"
                  class="password"
                  :class="{ 'no-verification-code': !isShowVerificationCode }"
                >
                  <el-input
                    :key="passwordType"
                    ref="password"
                    v-model.trim="form.password"
                    :type="passwordType"
                    tabindex="2"
                    placeholder="请输入密码"
                    class="passwordInput"
                    @blur="passwordCloseShow = false"
                    @focus="passwordGetFocus"
                    @keyup.enter.native="handleLogin"
                  >
                    <i slot="prefix" class="icon-mima" />
                    <ht-icon
                      slot="suffix"
                      :name="passwordType === 'password' ? 'eyeSlash' : 'eye'"
                      :scale="passwordType === 'password' ? 0.5 : 0.8"
                      @click="handlePassword"
                    />
                    <i
                      slot="suffix"
                      class="el-input__icon el-icon-circle-close"
                      :class="
                        passwordCloseShow
                          ? 'passwordCloseShow'
                          : 'passwordClose'
                      "
                      @click="handlePasswordClose"
                    ></i>
                  </el-input>
                </el-form-item>
                <el-form-item
                  v-if="isShowVerificationCode"
                  prop="verificationCode"
                  class="verification-code-item"
                >
                  <el-input
                    v-model.trim="form.verificationCode"
                    tabindex="3"
                    placeholder="请输入验证码"
                    class="verification-input"
                  >
                    <i slot="prefix" class="icon-yanzhengma" />
                    <div
                      slot="append"
                      class="verification-code"
                      @click="flushVerCode"
                    >
                      <img :src="captchaImage" width="120px" height="45px" />
                    </div>
                  </el-input>
                </el-form-item>
              </el-form>
              <div class="set-password__wrap">
                <el-checkbox v-model="form.rememberPassword">
                  记住密码
                </el-checkbox>
                <span class="forget-password">忘记密码?</span>
              </div>
              <el-button
                :loading="loading"
                class="login-btn-default"
                type="primary"
                :disabled="isDisabled"
                @click="handleLogin"
              >
                登录
              </el-button>
            </template>
            <template
              v-if="isShowQrCode && scanCodeMode.length > 1 && !isTwoStepVerify"
            >
              <el-divider class="bottom-divider">其他登录方式</el-divider>
              <div class="form-content__bottom">
                <div
                  v-for="(item, index) in loginType"
                  :key="index"
                  class="type-item"
                  :class="{ 'active-item': currentSelectedKey === item.key }"
                  @click="handleLoginType(item)"
                >
                  <el-tooltip
                    placement="top"
                    effect="light"
                    :content="item.label"
                  >
                    <img
                      v-if="
                        currentSelectedKey !== item.key &&
                        item.key !== 'dingding'
                      "
                      :src="item.imgSrc"
                      class="type-icon__item"
                    />
                    <i
                      v-else
                      :class="[item.icon, item.className]"
                      class="type-icon__item"
                    ></i>
                  </el-tooltip>
                </div>
              </div>
            </template>
            <template v-if="!isScanCode && isTwoStepVerify">
              <div class="twoStepVerify-box">
                <el-input
                  v-model.trim="code"
                  v-focus
                  clearable
                  placeholder="请输入验证码"
                  class="twoStepVerify-input"
                >
                  <i slot="prefix" class="icon-yikaiqi" />
                </el-input>
                <p class="tips">
                  请使用绑定的手机APP查看验证码
                  <el-button
                    style="margin-left: 20px; font-size: 14px"
                    type="text"
                    @click="toBack"
                  >
                    返回登录
                  </el-button>
                </p>
              </div>
              <el-button
                class="login-btn twoStepVerify-btn"
                type="primary"
                @click="toVerify"
              >
                验证
              </el-button>
            </template>
          </div>
        </div>
      </div>
    </div>
<!--    <el-footer class="login-bottom">-->
<!--      Copyright-->
<!--      <ht-icon name="copyright" scale="1.15" />-->
<!--      版权所有-->
<!--      <span class="login-bottom-title">{{ title }}</span>-->
<!--      <span class="login-bottom-date">{{ fullYear }}</span>-->
<!--    </el-footer>-->
    <!-- 重置密码弹窗 -->
    <reset-password
      ref="resetPassword"
      :account="form.username"
      @reset-success="handleJump"
    />
  </div>
</template>
<script>
  import { isPassword } from '@/utils/validate'

  import { getTenantInfo } from '@/api/uc'
  import { fileUrl, getQrCodeInfo, getCaptchaImage } from '@/api/portal'
  import { mapState } from 'vuex'
  import ResetPassword from './ResetPassword.vue'
  import qrcode from '@/plugins/qrcode'
  const redirectReg = /^.*\?redirect=(.*)$/

  import {
    LANG_OPTIONS,
    LOGIN_TYPE,
    SCAN_CODE_TEXT,
    THIRD_PARTY_APP_ID_MAP,
  } from './const'

  export default {
    name: 'Login',
    components: {
      ResetPassword,
    },
    directives: {
      focus: {
        inserted(el) {
          el.querySelector('input').focus()
        },
      },
    },
    props: {
      tenant: {
        type: String,
        default: 'platform',
      },
    },
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!value) {
          callback(new Error('用户名不能为空'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if (!isPassword(value)) {
          callback(new Error(value ? '密码不能少于6位' : '请输入密码'))
        } else {
          callback()
        }
      }
      const validateVerificationCode = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入验证码'))
        } else {
          callback()
        }
      }
      return {
        tenantName: '中国港能管理平台',
        nodeEnv: process.env.NODE_ENV,
        codeUrl: `${window.location.origin}/mobilevue`,
        title: this.$baseTitle,
        fullYear: new Date().getFullYear(),
        isShowVerificationCode: false,
        isScanCode: false,
        qrLogoSrc: require('@/assets/login_images/hotent-logo.png'),
        form: {
          username: '',
          password: '',
          rememberPassword: '',
          verificationCode: '',
        },
        code: '',
        isTwoStepVerify: false,
        rules: {
          username: [
            {
              required: true,
              trigger: 'blur',
              validator: validateUsername,
            },
          ],
          password: [
            {
              required: true,
              trigger: 'blur',
              validator: validatePassword,
            },
          ],
          verificationCode: [
            {
              required: true,
              trigger: 'blur',
              validator: validateVerificationCode,
            },
          ],
        },
        langOptions: LANG_OPTIONS,
        loading: false,
        passwordType: 'password',
        redirect: undefined,
        logoImg: require('@/assets/login_images/logo.png'),
        loginImg: require('@/assets/login_images/login-left-img.png'),
        dingdingImg: require('@/assets/login_images/dingding.png'),
        enterpriseWechat: require('@/assets/login_images/enterprise-wechat.png'),
        scanCode: require('@/assets/login_images/scan-code.png'),
        flyBook: require('@/assets/login_images/fly-book.png'),
        pcLogin: require('@/assets/login_images/pc-login.png'),
        passwordCloseShow: false,
        // loginType: LOGIN_TYPE,
        currentSelectedKey: null,
        scanCodeText: SCAN_CODE_TEXT,
        scanApps: {},
        hasFlyBook: false,
        captchaImage: '',
        verKey: '',
        qrDefaultImg: require('@/assets/images/qr_default.png'),
        thirdPartyAppIdMap: THIRD_PARTY_APP_ID_MAP,
        authLoading: null,
        scanLoginCode: '',
        scanLoginState: '',
      }
    },
    computed: {
      ...mapState('user', [
        'loginStatus',
        'errorCode',
        'message',
        'loginValue',
      ]),
      isDisabled() {
        return this.form.username && this.form.password ? false : true
      },
      scanCodeMode() {
        if (!window.scanCodeConfig) {
          return []
        }
        return window.scanCodeConfig.mode || []
      },
      isShowQrCode() {
        if (!window.scanCodeConfig) {
          return false
        }
        const { enable, mode } = window.scanCodeConfig
        return enable && mode && mode.length > 0
      },
      loginType() {
        let currentShowApp = []
        if (this.scanCodeMode.length > 0) {
          currentShowApp = this.scanCodeMode.map((item) =>
            LOGIN_TYPE.find((it) => item === it.key)
          )
        }
        return currentShowApp
      },
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = this.getRedirectFromFullPath(route.fullPath) || '/'
          if (route.query) {
            const { code, state, appid } = route.query
            if (code && state) {
              this.scanLoginCode = code
              this.scanLoginState = state
            }
          }
        },
        immediate: true,
      },
      'form.password': {
        handler(val) {
          if (val) {
            this.passwordCloseShow = true
          }
        },
        immediate: true,
      },
      isShowVerificationCode(val) {
        if (val) {
          this.$nextTick(() => {
            this.flushVerCode()
          })
        }
      },
    },
    mounted() {
      this.getTenantInfoByCode()
    },
    methods: {
      authScanLogin() {
        if (!this.scanLoginCode || !this.scanLoginState) {
          return
        }
        this.authLoading = this.$loading({
          lock: true,
          text: '授权中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        if (this.scanLoginState == 'htwecom') {
          this.handleScanLogin(this.scanLoginCode, 'wechatWork')
        } else if (this.scanLoginState == 'htDingding') {
          this.handleScanLogin(this.scanLoginCode, 'dingtalk')
        } else if (this.scanLoginState == 'htflybook') {
          this.handleScanLogin(this.scanLoginCode, 'flyBook')
        } else {
          //未匹配到
          this.loading = false
          if (this.authLoading) {
            this.authLoading.close()
          }
        }
      },
      // 通过正则表达式从fullpath中提取redirect参数
      getRedirectFromFullPath(fullpath) {
        var match = redirectReg.exec(fullpath)
        return match != null ? decodeURIComponent(match[1]) : null
      },
      filterAppInfo(key) {
        return LOGIN_TYPE.find((item) => key === item.key)
      },
      flushQrCode() {
        //更新二维码图片
        const tenantId = this.$store.state.user.tenantId
        getQrCodeInfo(tenantId).then((data) => {
          this.scanApps = data ? data : {}
          //飞书二维码使用iframe方式，刷新前需删除所有子控件
          let div = this.$refs.qrFlyBookContainer
          while (div.hasChildNodes()) {
            div.removeChild(div.firstChild)
          }
          this.hasFlyBook = qrcode.getQrCode(this.scanApps, this.scanCodeMode)
        })
      },
      flushVerCode() {
        //获取图形验证码图片
        getCaptchaImage().then((data) => {
          this.verKey = data.key
          this.captchaImage = data.image
        })
      },
      toVerify() {
        this.$store
          .dispatch('user/twoStepVerify', {
            code: this.code,
            token: this.loginValue,
            tenantId: this.$store.state.user.tenantId,
          })
          .then(() => {
            if (this.loginStatus) {
              this.handleJump()
              this.isShowVerificationCode = false
            } else {
              this.$message.warning('该密码不符合密码策略，请重置密码')
              this.$refs.resetPassword.openResetPasswordDialog()
              this.loading = false
            }
          })
      },
      goToOfficialWebsite() {
        window.open('https://www.hotent.com/', '_blank')
      },

      handleLoginType(item) {
        this.currentSelectedKey = item.key
        this.isScanCode = true
        this.flushQrCode()
      },
      passwordGetFocus() {
        if (this.form.password) {
          this.passwordCloseShow = true
        } else {
          this.passwordCloseShow = false
        }
      },
      handlePasswordClose() {
        this.form.password = ''
        this.passwordCloseShow = false
      },
      handlePassword() {
        this.passwordType === 'password'
          ? (this.passwordType = '')
          : (this.passwordType = 'password')
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleScanLogin(code, type) {
        this.loading = true
        var redirectUri = window.location.href
        if (redirectUri.indexOf('?') > 0) {
          redirectUri = redirectUri.split('?')[0]
        }
        const tenantId = this.$store.state.user.tenantId
        this.$store
          .dispatch('user/scanLogin', { code, type, redirectUri, tenantId })
          .then(() => {
            if (this.loginStatus) {
              this.handleJump()
            } else {
              this.flushQrCode()
            }
          })
          .catch(() => {
            this.loading = false
            if (this.authLoading) {
              this.authLoading.close()
            }
          })
      },
      handleLogin() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.loading = true
            const tenantId = this.$store.state.user.tenantId
            const verificationKey = this.verKey
            this.$store
              .dispatch('user/login', {
                ...this.form,
                tenantId,
                verificationKey,
              })
              .then((res) => {
                if (
                  this.errorCode &&
                  ['4012', '4013'].includes(this.errorCode)
                ) {
                  this.$message.error(this.message)
                  if (this.isShowVerificationCode) {
                    this.flushVerCode()
                  }
                  this.isShowVerificationCode = true
                  this.loading = false
                } else if (this.errorCode && this.errorCode === '2001') {
                  this.isTwoStepVerify = true
                } else if (this.errorCode && this.errorCode === '2002') {
                  localStorage.setItem(
                    'loginData',
                    JSON.stringify(this.loginValue)
                  )
                  this.$router.push({
                    name: 'security',
                    query: {
                      isTwoStepVerifyAndBind: true,
                    },
                  })
                } else {
                  if (this.loginStatus) {
                    this.handleJump()
                    this.isShowVerificationCode = false
                  } else {
                    this.$message.warning('该密码不符合密码策略，请重置密码')
                    this.$refs.resetPassword.openResetPasswordDialog()
                    this.loading = false
                  }
                }
              })
              .catch(() => {
                this.loading = false
              })
          } else {
            return false
          }
        })
      },
      handleJump() {
        const routerPath = ['/404', '/401'].includes(this.redirect)
          ? '/'
          : this.redirect
        const _route = {
          path: routerPath,
        }
        if (this.authLoading) {
          _route.query = { authLoading: this.authLoading }
        }
        this.$router.push(_route)
        this.loading = false
        if (this.authLoading) {
          this.authLoading.close()
        }
      },
      handleSetLanguage(lang) {
        this.$i18n.locale = lang
        this.$validator.locale = lang
        localStorage.setItem('lang', lang)
        this.$message({
          message: '切换成功',
          type: 'success',
        })
      },
      handleLoginByAccount() {
        this.isScanCode = false
      },
      handleScanCode() {
        this.isScanCode = !this.isScanCode
        if (this.isScanCode) {
          this.currentSelectedKey = this.currentSelectedKey
            ? this.currentSelectedKey
            : this.scanCodeMode[0]
          this.flushQrCode()
        } else {
          this.currentSelectedKey = null
        }
      },
      getTenantInfoByCode() {
        this.loading = true
        getTenantInfo(this.tenant)
          .then((res) => {
            const { nameFront, name, ico, frontLogo, id, captchaEnabled } =
              res.value
            let logoImgURL = ''
            if (frontLogo) {
              const logoImgInfo = JSON.parse(frontLogo)
              logoImgURL = fileUrl(logoImgInfo[0].id)
            }
            localStorage.setItem('frontLogo', logoImgURL)
            if (res.state) {
              this.loading = false
              this.$store.dispatch('user/saveTenatId', id)
              this.$store.dispatch('user/saveTenantCode', this.tenant)
              this.tenantName = nameFront || name
              //是否启用图形验证码 0-不启用；1-启用且限制失败次数；2-一直启用
              if (captchaEnabled && captchaEnabled === 2) {
                this.isShowVerificationCode = true
              }
              if (ico) {
                const frontLogo = JSON.parse(ico)
                this.logoImg = fileUrl(frontLogo[0]?.id)
              }
              this.authScanLogin()
            }
          })
          .catch((e) => {
            console.error(e)
          })
      },
      toBack() {
        this.$router.push('/login')
        this.isTwoStepVerify = false
        this.loading = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  $login-active-color: #409eff;
  @import '@/styles/triangle-mixin.scss';
  @mixin login-btn {
    width: calc(100% - 136px);
    height: 52px;
    background: $login-active-color;
    border-color: $login-active-color;
    border-radius: $base-border-radius;
    border: 0;
    font-size: 17px;
    font-weight: bold;
  }
  .login-container {
    height: 100vh;
    background: url('~@/assets/login_images/single_random_login_bg1.png') center center fixed
      no-repeat;
    background-size: cover;
    .login-main {
      height: calc(100% - 160px);
      min-height: 594px;
      overflow: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .login-content {
      //width: 1034px;
      margin: 0 auto;
      display: flex;
      height: 594px;
    }

    .login-col {
      display: flex;
      align-items: center;
      height: 100%;
    }
    .login-img__wrap {
      justify-content: flex-end;
    }
    .login-form__wrap {
      display: flex;
      flex-direction: column;
      background: $base-color-white;
      width: 516px;
      border-radius: 0 12px 12px 0;
      .scan-code-icon__wrap {
        display: flex;
        justify-content: flex-end;
        position: relative;
        &:hover {
          .tip-msg {
            display: block;
          }
        }
        .tip-msg {
          position: absolute;
          display: none;
          width: 123px;
          height: 32px;
          line-height: 32px;
          background: #f6f6f6;
          text-align: center;
          border-radius: $base-radius;
          top: 12px;
          right: 82px;
          color: $base-dark-title-color;
          &::after {
            position: absolute;
            @include triangle('right', 6px, #f6f6f6);
            right: -6px;
            top: 12px;
          }
        }
      }
      .scan-code-img {
        width: 64px;
        padding: 12px 12px 0 12px;
        cursor: pointer;
        img {
          width: 64px;
        }
      }
      .switch-language {
        padding-top: 25px;
        padding-right: 31px;
        display: flex;
        justify-content: flex-end;
        ::v-deep {
          .el-dropdown {
            color: $base-dark-title-color;
          }
        }
      }
      .scan-code__wrap {
        text-align: center;
        .scan-code-area {
          padding-top: 20px;
        }
        .scan-code-tip {
          color: $base-color-three;
          .mobile-text {
            color: $base-dark-title-color;
          }
        }
      }
      .scan-code-item {
        text-align: center;
        height: 270px;
        margin: 0 0 40px 0;
        .bottom-text {
          color: #999;
        }
        .login-account {
          margin: 45px 68px;
          @include login-btn;
        }
        ::v-deep {
          .is-disabled {
            background: rgba($login-active-color, 0.38);
          }
        }
      }
    }
    .top-logo {
      display: flex;
      justify-content: space-between;
      height: 44px;
      align-items: center;
      padding: 40px 48px 0 48px;
      .tenant-name {
        font-size: 28px;
        font-weight: 500;
        color: $base-dark-title-color;
      }
      .vertical-line {
        margin: -12px 32px 0 32px;
        height: 28px;
        background-color: #d8d8d8;
      }
      .top-left {
        height: 44px;
      }
      .top-right {
        cursor: pointer;
        font-size: $base-font-size-big;
        color: $login-active-color;
        .top-text {
          padding-left: 4px;
        }
      }
    }
    .login-logo {
      height: 44px;
    }
    .title {
      font-size: 32px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #409eff;
      text-align: center;
    }
    .not-code {
      padding-top: 110px;
    }

    .title-tips {
      margin-top: 29px;
      font-size: 26px;
      font-weight: 400;
      color: rgba(14, 18, 26, 1);
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .login-btn {
      margin: 32px 68px;
      @include login-btn;
    }
    .login-btn-default {
      width: calc(100% - 136px);
      height: 52px;
      background: #409eff;
      border-color: #409eff;
      border-radius: 2px;
      border: 0;
      font-size: 17px;
      font-weight: bold;
      margin: 32px 68px;
    }
    ::v-deep {
      .is-disabled {
        // background: rgba($login-active-color, 0.38);
        background: rgba(64, 158, 255, 0.38) !important;
      }
    }
    .bottom-divider {
      margin: 0 72px;
      width: calc(100% - 144px);
      ::v-deep {
        .el-divider__text {
          color: #999;
          font-weight: 400;
        }
      }
    }
    .login-form {
      margin: 32px 68px 0 68px;
      ::v-deep {
        .is-error {
          .el-input--small .el-input__inner {
            border: 1px solid $base-color-error;
          }
        }
        .el-form-item--small.el-form-item {
          margin-bottom: 24px;
          max-width: 380px;
          .el-form-item__error {
            padding-top: 6px;
            color: $base-color-error;
          }
        }
        .el-input--small {
          .el-input__inner {
            height: 52px;
            line-height: 52px;
            border-radius: $base-border-radius;
            border: 1px solid #dcdee0;
            padding: 0 65px 0 40px;
            font-size: 16px;
            font-weight: 400;
          }
          .el-input__prefix,
          .el-input__suffix {
            line-height: 50px;
          }
          .el-input__suffix {
            line-height: 40px;
          }
        }
        .password {
          .el-input__suffix {
            right: 14px;
            .fa-icon {
              overflow: unset;
            }
          }
          .passwordInput {
            position: relative;
            .passwordClose {
              opacity: 0;
              position: absolute;
              right: 24px;
              font-size: 14px;
            }
            .passwordCloseShow {
              opacity: 1;
              position: absolute;
              right: 24px;
              font-size: 14px;
            }
          }
        }
        .no-verification-code.el-form-item--small {
          margin-bottom: 8px;
        }
        .verification-code-item.el-form-item--small {
          margin-bottom: 8px;
        }
        .el-input__prefix {
          padding-left: 10px;
          font-size: 20px;
        }
        .el-input__suffix {
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
      }
      .verification-input {
        ::v-deep {
          .el-input__inner {
            border-right: 0;
            border-radius: $base-border-radius 0 0 $base-border-radius;
          }
          .el-input-group__append,
          .el-input-group__prepend {
            border-radius: 0 $base-border-radius $base-border-radius 0;
            border: 1px solid $base-border-color;
            border-left: 0;
          }
          .el-input-group__append {
            padding: 0 16px;
            background-color: $base-color-white;
          }
          .verification-code {
            cursor: pointer;
          }
          .refresh-icon {
            font-size: $base-font-size-default;
          }
        }
      }
      .verification-code-item.is-error,
      .password.is-error {
        margin-bottom: 24px;
      }
    }
    .set-password__wrap {
      // display: flex;
      display: none;
      justify-content: space-between;
      margin: 0 68px;
      color: $base-color-three;
      ::v-deep {
        .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: $login-active-color;
          border-color: $login-active-color;
        }
        .el-checkbox__input.is-checked + .el-checkbox__label {
          color: $login-active-color;
        }
        .el-checkbox__label {
          color: $base-color-three;
        }
      }
      .forget-password {
        color: $login-active-color;
        cursor: pointer;
      }
    }
    .form-content__bottom {
      margin-top: 28px;
      height: 52px;
      display: flex;
      justify-content: center;
      .login-type {
        display: flex;
        justify-content: center;
        img {
          width: 51px;
        }
        .img-item {
          padding-right: 48px;
        }
      }
      .type-item {
        width: 52px;
        height: 52px;
        margin-right: 48px;
        background: #eeeeee;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        img {
          width: 40px;
        }
        &:last-child {
          margin-right: 0;
        }
        .type-icon__item {
          font-size: 36px;
        }
        .dingding-icon {
          color: $login-active-color;
        }
      }
      .active-item {
        background: $login-active-color;
        .type-icon__item {
          color: $base-color-white;
        }
      }
    }
    .login-bottom {
      text-align: center;
      line-height: 60px;
      color: $base-color-three;
      font-weight: 400;
      font-size: $base-font-size-big;
      .login-bottom-title {
        margin-left: 4px;
      }
      &-date {
        margin-left: 6px;
      }
    }
    .twoStepVerify-box {
      margin: 80px 68px 0 68px;
      .tips {
        margin-top: 12px;
        font-weight: 400;
        line-height: 24px;
        color: #999999;
      }
      .twoStepVerify-input {
        width: 380px;
        ::v-deep {
          .el-input__inner {
            height: 46px;
            line-height: 46px;
            text-indent: 6px;
          }
          .el-input__prefix {
            line-height: 46px;
            padding-left: 5px;
            font-size: 18px;
          }
        }
      }
    }
    .twoStepVerify-btn {
      margin-top: 98px;
      height: 46px;
    }
  }
</style>
