<template>
    <div>
        <form ref="loginForm" class="login-form" >
            <h3 class="title">{{sysName}}</h3>
            <div class="email">
              <input type="email" class="Inputbox" v-model="loginForm[companyEmail]"/>
              <i class="h-icon-zhanneixin leftIcon" @click="showPwd"></i>
            </div>
            <div class="pass">
               <input :type="pwdType" class="Inputbox" v-model="loginForm[password]"/>
               <i class="h-icon-lock leftIcon" @click="showPwd"></i>
               <i v-if="this.shower==false&&isEye==true" class="h-icon-eye1 eyeIcon" @click="showPwd"></i>
               <i v-else-if="this.shower==true&&isEye==true" class="h-icon-eye eyeIcon" @click="showPwd"></i>
            </div>
            <div class="forgetPwd" @click="forget()">忘记密码？</div>
            <h-button type="primary" class="loginBtn" @click="login('loginForm')">登录</h-button>
        </form>
    </div>
</template>

<script>
export default {
  name: 'HLoginFrame',
  props: {
    sysName: {
      type: String,
      default: '华道管理系统'
    },
    isEye: {
      type: Boolean,
      default: false
    },
    companyEmail: {
      type: String,
      default: 'companyEmail'
    },
    password: {
      type: String,
      default: 'password'
    }
  },
  data() {
    return {
      loginForm: {},
      shower: false,
      pwdType: 'password'
    }
  },
  created() {},
  methods: {
    login(formName) {
      this.$emit('handleLogin', this.loginForm)
    },
    forget() {
      this.$emit('handleForget')
    },
    //   显示密码
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = 'text'
        this.shower = true
      } else {
        this.pwdType = 'password'
        this.shower = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-form {
    width: 436px;
    height: 352px;
    padding: 30px 35px 13px 35px;
    border-radius: 10px;
    margin: 0 auto;
    background-color: transparent;
    border:1px solid #ccc;
    box-shadow: 0px 0px 8px 1px rgba(255, 255, 255, 0.3);
  }
  .title {
    font-size: 24px;
    font-family: PingFangSC;
    font-weight: 500;
    line-height: 33px;
    color: #000;
    margin: 0 auto 40px auto;
    text-align: center;
  }
  /* input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
    -webkit-text-fill-color: #ffffff !important;
  } */
  input {
    border-radius: 0px;
    padding: 12px 5px 12px 37px;
    color: rgba(51, 51, 51, 1);
  }
  .pass{
      position: relative;
  }
  .email{
    position: relative;
    i{
      font-size:18px;
    }
  }
  .forgetPwd{
    float: right;
    margin-bottom: 10px;
    cursor: pointer;
    &:hover{
      color:red;
    }
  }
  .Inputbox{
      height:40px;
      line-height: 40px;
      margin-bottom: 10px;
      width:100%;
      border:1px solid #ccc;
  }
  .leftIcon{
    position: absolute;
    left:5px;
    top:12px;
  }
  .eyeIcon{
    position: absolute;
    right:5px;
    top:10px;
    cursor: pointer;
  }
  .loginBtn{
      width:100%;
  }
</style>
