<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-15 16:01:54
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-23 15:49:57
-->
<template>
  <div
    class="login-wrap"
    style="height: 100vh;">
    <header>
      <div class="login-wrap-header">
        <img
          class="login-wrap-inline"
          src="../../assets/logo-login.png"
          alt="logo">
        <span class="login-wrap-inline">API网关管理后台</span>
      </div>
    </header>
    <section>
      <div class="login-wrap-body">
        <div class="login-wrap-form">
          <div class="form-title font-24 color-303133 text-center">
            登录
          </div>
          <el-form
            ref="loginForm"
            :model="loginForm"
            :rules="rules"
            class="loginForm">
            <el-form-item
              label=""
              prop="userName">
              <el-input
                v-model="loginForm.userName"
                prefix-icon="iconfont iconzhanghao"
                class="w-318"
                placeholder="请输入账号">
                <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
              </el-input>
            </el-form-item>
            <el-form-item
              label=""
              prop="password">
              <el-input
                v-model="loginForm.password"
                prefix-icon="iconfont iconmima"
                class="w-318"
                type="password"
                placeholder="请输入密码">
                <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="" prop="checked">
              <el-checkbox v-model="loginForm.checked">记住我的登录状态</el-checkbox>
            </el-form-item> -->
            <el-form-item>
              <el-button
                type="primary"
                @click="submitForm('loginForm')">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </section>
    <div class="login-footer font-12 color-909399">
      Copyright {{ new Date().getFullYear() }} Demogic.com All Rights Reserved 浙ICP备15033117号-1
    </div>
  </div>
</template>
<script>
import { _debounce } from '@/assets/js/public';
import errMsg from '@/assets/js/error';
import showMsg from '@/assets/js/showmsg';
import { postRequest } from '@/api/api';
import md5 from 'js-md5';
export default {
  name: 'Login',
  data() {
    return {
      windowH: window.screen.availHeight - 104 + 'px',
      // 登录
      loginForm: {
        userName: '',
        password: '',
        checked: false
      },
      rules: {
        userName: [ { required: true, message: '请输入账号', trigger: 'blur' } ],
        password: [ { required: true, message: '请输入密码', trigger: 'blur' } ]
      }
    };
  },
  mounted() {
    const that = this;
    that.getUserInfo();
    // console.log(that.$store.state.userInfo);
  },
  methods: {
    /**
     * @description: 处理路由跳转
     * @param {Object} val
     * @author: 无尘
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      /* {
       name:,
       path:
      }*/
      that.$router.push({
        path: val.path
      });
    },

    /**
     * @description: 登录
     * @param {String} formName
     * @author: 无尘
     */
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postPassLogin();
        } else {
          return false;
        }
      });
    }, 500),
    postPassLogin() {
      const that = this;
      let para = {
        userName: that.loginForm.userName,
        password: md5(that.loginForm.password)
      };
      postRequest('/gateway-manage/login', para)
        .then(res => {
          let resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('登录成功', 'success');
            that.$router.push('/overview');
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * @description: 获取用户信息-判断用户是否登录
     * @author: 无尘
     */
    getUserInfo() {
      const that = this;
      postRequest('/gateway-manage/get-login-userInfo', {})
        .then(res => {
          const resData = res.data;
          if (resData.code == '0000') {
            showMsg.showmsg('用户已登录', 'success');
            that.$router.push('/overview');
            return;
          }
        })
        .catch(function(error) {});
    }
  }
};
</script>
<style lang="less" scoped>
.login-wrap {
  position: relative;
  width: 100%;
  height: 640px;
  background-color: #fff;
  background: url('../../assets/bg.svg') no-repeat left center;
  background-size: auto 100%;

  header {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  &-header {
    position: relative;
    width: 100%;
    min-width: 1400px;
    padding: 39px 43px 0 0;
    margin: 0 auto;
    text-align: right;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*-webkit-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
      -moz-box-shadow: 0px 0px 10px rgba(147,165,184,0.13);
      box-shadow: 0px 0px 10px rgba(147,165,184,0.13);*/
    img {
      padding-right: 8px;
    }
  }

  &-inline {
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    color: #303133;
  }

  &-body {
    position: relative;
    width: 100%;
    min-width: 1400px;
    .login-wrap-form {
      position: absolute;
      width: 318px;
      height: 281px;
      top: 204px;
      right: 228px;
      .form-title {
        font-size: 24px;
        margin-bottom: 56px;
      }
      .loginForm {
        width: 100%;
        padding: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        .w-318 {
          width: 318px;
        }

        .code-item {
          text-align: left;
        }
        .el-button {
          width: 100%;
          padding: 0;
          height: 40px;
          line-height: 40px;
          background: #5584ff;
          box-shadow: 0px 7px 7px 0px rgba(62, 113, 247, 0.2);
        }
        .el-input {
          /deep/ .el-input__inner {
            height: 40px;
            line-height: 40px;
          }
        }
      }
    }
  }
  .login-footer {
    position: absolute;
    right: 181px;
    bottom: 28px;
  }
}
</style>
