<!-- 两种登录模式 -->
<template>
  <div>
    <el-divider class="mode-line"><p>更多登录方式</p></el-divider>
    <!-- 登录方式选择 -->
    <div class="login-type-warp">
      <!-- 两种方式 -->
      <el-button v-if="componentName != 'AccountLogin'" class="two-mode-login-button" size="small" round @click="checkComponent('AccountLogin', $event)">掌上恩斯迈账号登录</el-button>
      <el-button v-if="componentName != 'CustomLogin'" class="two-mode-login-button" size="small" round @click="checkComponent('CustomLogin', $event)">域账号登录</el-button>
      <el-button v-if="componentName != 'VerificationCode'" class="two-mode-login-button" size="small" round @click="checkComponent('VerificationCode', $event)">
        验证码登录
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TwoModeLogin',
  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;
  .two-mode-login-button {
    width: 180px;
  }
}
</style>