<!-- 两种登录模式 -->
<template>
  <div>
    <el-divider class="mode-line"><p>更多登录方式</p></el-divider>
    <!-- 登录方式选择 -->
    <div class="login-type-warp">
      <!-- 两种方式 -->
      <div class="login-item" v-if="componentName != 'CustomLogin'" @click="checkComponent('CustomLogin', $event)">掌上恩斯迈账号登录</div>
      <el-divider direction="vertical" v-if="componentName != 'CustomLogin'" />
      <div class="login-item" v-if="componentName != 'VerificationCode'" @click="checkComponent('VerificationCode', $event)">验证码登录</div>
      <el-divider direction="vertical" v-if="componentName != 'VerificationCode'" />
      <div class="login-item" v-if="componentName != 'ScanCodeLogin'" @click="checkComponent('ScanCodeLogin', $event)">扫码登录</div>
      <el-divider direction="vertical" v-if="componentName != 'ScanCodeLogin' && componentName != 'EmailLogin'" />
      <div class="login-item" v-if="componentName != 'EmailLogin'" @click="checkComponent('EmailLogin', $event)">邮箱登录</div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: 'ThreeModeLogin',
  props: ['componentName'],
  methods: {
    //修改父组件的模块参数
    checkComponent(component, event) {
        let target = event.target;
        if (target.nodeName == 'SPAN') {
          target = event.target.parentNode;
        }
        target.blur();
      this.$emit('update:componentName', component);
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.mode-line {
  width: inherit;
  margin: 49px 10px 9px 10px;
  //暂时修改
  :deep .el-divider__text {
    padding: 0 16px;
  }
  p {
    color: #a8a8ab;
    line-height: 20px;
    font-size: 12px;
    margin: 0px;
  }
}
//登录方式
.login-type-warp {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .login-item {
    width: 120px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #62606e;
    font-size: 14px;
    &:hover {
      color: #3a86ff;
    }
  }
  :deep .el-divider {
    background-color: #c9c9cb;
  }
  :deep .el-divider--vertical {
    margin: 0 4px 0px 5px;
  }
}
</style>