<template>
  <div class="body">
    <TSCarousel />
    <div class="conbox">
      <div class="logo">
        <img src="../assets/img/logo.png" alt />
        <div>后台管理平台</div>
      </div>
      <div class="smbox">
        
        <div class="a-form-itembox">
          <a-form :form="form" @submit="handleSubmit">
            <a-form-item class="Item">
              <div class="title">系统登录</div>
            </a-form-item>
            <a-form-item class="Item inputbox">
              <a-input
                placeholder="请输入用户名"
                size="large"
                v-decorator="['username', { rules: [{ required: true, message: '用户名不能为空' }] }]"
              >
                <icon-font
                  slot="prefix"
                  type="icon-yonghu"
                  :style="{ fontSize: '16px', color: '#0088cc' }"
                />
              </a-input>
            </a-form-item>
            <a-form-item class="Item inputbox">
              <a-input
                placeholder="请输入密码"
                size="large"
                type="password"
                v-decorator="['password', { rules: [{ required: true, message: '密码不能为空' }] }]"
              >
                <icon-font
                  slot="prefix"
                  type="icon-mima"
                  :style="{ fontSize: '16px', color: '#0088cc' }"
                />
              </a-input>
            </a-form-item>
            
            <a-form-item class="Item inputbox">
              <a-button
                type="primary"
                :loading="btnloading"
                html-type="submit"
                class="btn"
                size="large"
              >登录</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="foot">
        <a class="copyright-a" href="http://www.beian.miit.gov.cn">蒙ICP备XXXXXXXXX号</a> Copyright ©2017-2021 版权所有 : www.qiankundata.com
      </div>
    </div>
  </div>
</template>
<script>
import TSCarousel from "../components/TSCarousel";
import { encryption } from "../utils/utils";
import { loginByUserToken, getUserInfo } from "../api/admin/token";
export default {
  data() {
    return {
      login: {
        username: "",
        password: "",
      },
      btnloading: false,
      form: this.$form.createForm(this, { name: "coordinated" })
    };
  },
  // 注册组件
  components: {
    TSCarousel
  },
  created() {
    
  },
  beforeUpdate() {
    
  },
  methods: {
    
    // 提交
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.btnloading = true;
          this.login.username = values.username;
          this.login.password = values.password;
          
          // 请求token
          loginByUserToken(this.login).then(response => {
            // 判断是否成功
            if(response.resp_code === 200){
              localStorage.setItem('token',response.datas.authorization);
              localStorage.setItem('UserInfo',JSON.stringify(response.datas));
              this.$router.push({
                path: '/index'
              });
            }else{
              this.$message.info(response.resp_msg);
              this.btnloading = false;
            }

          });
        }
      });
    }
  }
};
</script>
<style scoped>
.body {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}

.conbox {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.logo {
  font-size: 30px;
  color: #fff;
  width: 60vw;
  display: flex;
  align-items: center;
}
.logo img {
  height: 80px;
  margin-right: 20px;
}

.smbox {
  width: 60vw;
  height: 60vh;
  background-color: #fff;
  margin: 40px 0px;
  box-shadow: 0px 0px 10px #000;
  background-image: url("../assets/img/bg.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%;
  position: relative;
}
.a-form-itembox {
  position: absolute;
  top: 0px;
  right: 0px;
  box-sizing: border-box;
  padding: 60px 80px;
}
.title {
  font-size: 20px;
}

.inputbox {
  width: 300px;
  box-sizing: border-box;
}

.inputsmbox {
  width: 300px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}
.btn {
  width: 300px;
}
.foot {
  color: #fff;
}
.copyright-a {
  text-decoration: none;
  color: #fff;
}
.copyright-a:hover {
  color: #fff;
}
.toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
}
</style>
