<!--
 * @Author       : yuanrunwei
 * @Date         : 2020-05-18 12:05:37
 * @LastEditors  : yuanrunwei
 * @LastEditTime : 2020-05-18 19:27:42
 * @FilePath     : \ambre-admin-noob\src\views\login.vue
-->
<template>
<div class="login">
    <div class="loginPage">
      <div class="loginPage-left">
        <div>
          <img src="../../public/img/logo4.png" alt="">
          <p>欢迎登录</p>
          <p>优创后台系统</p>
        </div>
      </div>
      <div class="loginPage-right">
        <div class="loginPage-right-content">
          <el-form :model="loginForm" :rules="pwdRules" ref="pwdLogin" label-width="0">
            <el-form-item prop="loginname">
              <!-- <el-input v-model="loginForm.loginname" name="loginname" type="tel" autocomplete="new-password" placeholder="请输入账号"> -->
                <!-- <span slot="prefix" class="iconfont iconshouji"></span> -->
              <!-- </el-input> --><i class="el-icon-postcard"></i>
              <input v-model="loginForm.loginname" name="loginname" type="tel" autofocus autocomplete="new-password" placeholder="请输入账号">
            </el-form-item>
            <el-form-item prop="password">
              <!-- <el-input type="password" v-model="loginForm.password" name="password" @keyup.enter.native="login" autocomplete="new-password" placeholder="请输入密码">
                <span slot="prefix" class="iconfont iconmima"></span>
              </el-input> --><i class="el-icon-unlock"></i>
              <input v-model="loginForm.password" name="password" type="password" autocomplete="new-password" @keyup.enter="login" placeholder="请输入密码">
            </el-form-item>
            <div class="login-btn" @click="login">登录</div>
          </el-form>
          <div class="forget" @click="forget">忘记密码？</div>
        </div>
      </div>
  </div>
</div>

</template>

<style lang="scss" scoped>
// .login-title {
//     display: flex;
//     justify-content: center;
//     align-items: center;
// }
// .forget {
//   color: rgb(30, 71, 184);
//   text-align: right;
//   line-height: 5px;
// }
.login {
  background-image: url(../../public/static/loginBG.png);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginPage {
  box-shadow:0px 0px 99px #DBD9D9;
  border-radius: 3px;
  background-color: #fff;
  display: flex;
  width: 60%;
  height: 60%;
  &-left {
    flex: 2;
    border-radius: 3px 0 0 3px;
    background-color: #00A0E9;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    div {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      top: -5%;
    }
    img {
      width: 70%;
      // margin: 0 auto;
      // height: auto;
      margin-bottom: 30px;
    }
    p {
      margin-bottom: 10px;
      width: 65%;
      font-size: 30px;
      color: #fff;
      font-family:"微软雅黑";
    }
  }
  &-right {
    flex: 3;
    height: 100%;
    &-content {
      width: 100%;
      height: 90%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 7%;
      .el-form {
        width: 40%;
        // height: 20%;
        background-color: rgba($color: #fff, $alpha: 0);
        /deep/ .el-form-item__content {
          display: flex;
        }
      }
      .login-btn {
        text-align: center;
        line-height: 40px;
        border: none;
        background-color: #00A0E9;
        height: 40px;
        width: 100%;
        font-size: 16px;
        box-shadow:0px 0px 15px #DBD9D9;
        margin-top: 30px;
        color: #fff;
        font-family:"微软雅黑";
        box-sizing: content-box;
        padding: 0 7px;
        margin-left: -13px;
      }
      .forget {
        margin-top: 50px;
        color: #00A0E9;
        font-size: 14px;
      }
      input {
        border: none;
        height: 35px;
        padding: 5px 65px;
        font-size: 14px;
        width: 100%;
        margin: 15px auto;
        outline: none;
        border-bottom: rgb(159, 163, 167) 2px solid;
        margin-left: -45px;
      }
      input:focus {
        border-bottom: #00A0E9 2px solid;
      }
      i {
        font-size: 34px;
        line-height: 72px;
        position: relative;
        z-index: 66;
      }
      .flex {
        display: flex;
      }
    }
  }
}
</style>

<script>
export default {
  data () {
    return {
      loginForm: {
        loginname: '',
        password: ''
      },
      pwdRules: {
        loginname: [{
          required: true,
          trigger: 'blur',
          message: '请输入账号'
        }],
        password: [{
          required: true,
          trigger: 'blur',
          message: '请输入密码'
        }, {
          min: 1,
          message: '请输入正确的密码',
          trigger: 'blur'
        }]
      }
    }
  },
  mounted () {},
  methods: {
    // 登录
    login () {
      this.$refs['pwdLogin'].validate(res => {
        if (res) {
          const {
            loginname,
            password
          } = this.loginForm
          this.$api.post('/companyInfo/login', {
            'reqdata': {
              loginname,
              password
            }
          }).then(res => {
            console.log(res)
            this.$message.success({
              message: '登录成功'
            })
            // this.$cookies.setCookies(res)
            sessionStorage.setItem('info', JSON.stringify(res.object))
            localStorage.setItem('menuId', JSON.stringify(res.object.roleMenuDtoList))
            localStorage.setItem('companyName', res.object.companyName)
            localStorage.setItem('managerid', res.object.id)
            localStorage.setItem('token', res.object.token)
            let time = setTimeout(() => {
              location.reload()
              clearTimeout(time)
            }, 1000)
          })
        }
      })
    },
    forget () {
      this.$alert('请联系yc1min客服重置密码！', '提示', {
        confirmButtonText: '确定',
        callback: action => {
        }
      })
    }
  }
}
</script>
