<template>
  <div class="login">
    <div class="header" id="top">
      <div class="clearfix">
        <div class="fl">
          <a href="http://www.demogic.com/" class="logo"></a>
        </div>
        <a class="home-link fr border-1px" href="http://www.demogic.com/" translate="login.home">返回首页</a>
      </div>
    </div>
    <div class="login_contetnt">
      <h3 class="login-top">让信息连接一切</h3>
      <h4 class="login-bottom">GIC商户后台</h4>
      <div class="form">
        <form class="login-form" id="optForm" method="post" action="../../uLogin.htm?operate=login">
          <div class="form-control">
            <label for="phone">账号</label>
            <input id="userName" name="userName" type="text" v-model="account" autocomplete="off" />
          </div>
          <div class="form-control">
            <label for="password">密码</label>
            <input id="password" name="password" type="password" v-model="password" autocomplete="new-password" />
            <p class="error" id="passwordError" v-show="error.flag">{{ error.msg }}</p>
          </div>
          <button type="button" class="submit" @click="submit">立即登录</button>
        </form>
      </div>
    </div>
    <footer id="footer">
      <p class="copyright">Copyright 2017 Demogic.com All Rights Reserved 浙ICP备15033117号-1</p>
    </footer>
  </div>
</template>
<script>
import { login, loginEid } from '@/service/api/systemApi.js';
export default {
  name: 'login',
  data() {
    return {
      error: {
        flag: false,
        msg: ''
      },
      account: 'damogic',
      password: 'damo2018'
    };
  },
  created() {
    // this.$http.get('api-marketing/list-clerk-department',{},(res) => {
    // 	console.log(res)
    // })
  },
  methods: {
    async submit() {
      if (!this.account || !this.password) {
        this.$message.error('账号或者密码不能为空');
        return;
      }
      let eidParams = {
        loginName: this.account
      };

      let resEid = await loginEid(eidParams);
      let params = {
        loginName: this.account,
        password: this.password,
        eid: resEid.result[0].enterpriseId
        // eid:'ff808081593917d90159398eca1a0014'
      };
      let resLogin = await login(params);
      console.log(resLogin);
      //先作跳转
      this.$router.replace('/wechat');
    }
  }
};
</script>
<style scoped>
.login {
  height: 100%;
  background-image: url(../../assets/img/login_bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgba(255, 255, 255, 0.15);
  text-align: center;
}
#top {
  background: transparent;
  position: relative;
  width: 100%;
  height: 80px;
  background-color: #111111;
  position: relative;
  z-index: 2;
}
#top .logo {
  display: block;
  float: left;
  margin-left: 100px;
  width: 150px;
  height: 80px;
  background: url(../../assets/img/login_logo.png) left center no-repeat;
  text-indent: -999px;
}
.home-link {
  width: 80px;
  height: 32px;
  margin-top: 23px;
  margin-right: 135px;
  border-radius: 0;
  text-align: center;
  font-size: 14px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid #fede29;
  background: 0 0;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  height: 80px;
  width: 100%;
  background: 0 0;
  /* box-shadow: inset 0 -1px 0 0 rgba(81, 130, 228, .15); */
  z-index: 1000;
}

/*
 * login-ç™»å½•
 */

.home-link {
  width: 80px;
  height: 32px;
  margin-top: 23px;
  margin-right: 135px;
  border-radius: 0;
  text-align: center;
  font-size: 14px;
  line-height: 32px;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid #fede29;
  background: 0 0;
}

.login_contetnt {
  width: 350px;
  margin: 0 auto;
}

.login-top {
  position: relative;
  z-index: 1;
  font-size: 24px;
  font-weight: normal;
  color: #ffffff;
  margin: 70px 0 20px;
}

.login-bottom {
  position: relative;
  z-index: 1;
  font-size: 16px;
  font-weight: normal;
  color: #fede29;
  margin-bottom: 40px;
}

.form {
  position: relative;
  z-index: 3;
  width: 350px;
  margin: 0 auto;
}

#top {
  background: transparent;
  position: relative;
}

#top:hover {
  background: transparent;
}

.form-control {
  position: relative;
}

.form-control > label {
  position: absolute;
  /*top: 13px;*/
  line-height: 46px;
  left: 15px;
  font-size: 14px;
  color: #fff;
  cursor: text;
}

.form-control > input {
  font-size: 14px;
  padding-left: 50px;
  color: #fff;
  font-weight: 100;
  width: 298px;
  height: 46px;
  line-height: 14px;
  text-indent: 15px;
  background: rgba(0, 0, 0, 0.5);
  outline: 0;
  margin-bottom: 10px;
}

.form-control > input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5) inset;
}

.submit {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 36px;
}

.submit:active {
  color: rgba(0, 0, 0, 0.6);
  background-color: #e0bb26;
}

.submit,
.login-btn {
  color: #000;
  outline: 0;
  border: 0;
  background-color: #fede29;
  cursor: pointer;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  height: 80px;
  width: 100%;
  background: 0 0;
  /*box-shadow: inset 0 -1px 0 0 rgba(81, 130, 228, .15);*/
  z-index: 1000;
}

.error {
  color: #f64e4e;
  font-size: 12px;
  line-height: 12px;
  text-align: left;
  display: none;
}

.bottom-error {
  margin-bottom: 10px;
}

#footer {
  width: 100%;
  position: absolute;
  bottom: 20px;
  background: transparent;
  color: #fff;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #top {
    background: transparent;
    position: relative;
  }

  .home-link {
    width: 60px;
    height: 20px;
    margin-top: 9px;
    margin-right: 15px;
    border-radius: 0;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid #fede29;
    background: 0 0;
  }
  .login_contetnt {
    width: 250px;
  }
  .form-control > label {
    font-size: 13px;
  }
  .form-control > input {
    width: 198px;
  }
  .form {
    width: 250px;
  }
  .login-top {
    font-size: 16px;
  }
  .login-bottom {
    font-size: 12px;
  }
  #footer {
    display: block;
  }
}
</style>
