<template>
<div class="login">
  <div class="login-content">
    <div class="login-content--pic"></div>

    <div class="login-content--form field-column">
      <div class="form-title">
        <div class="form-title--logo">
          <el-image :src="logoBills" fit="cover" style="max-width: 100%;  max-height: 100%;"></el-image>
        </div>
        <div class="form-title--text" style="">微流水分析系统</div>
      </div>
      <div class="form-cont">
        <el-tabs v-model="loginForm.loginType" class="form" style=" float:none;">
          <el-tab-pane label="账号密码登录" name="uname">
          </el-tab-pane>
        </el-tabs>

        <div>
          <el-form ref="loginForm" :model="loginForm" :rules="LoginRules" class="login-form">
            <!-- 账号密码登录 -->
            <div v-if="loginForm.loginType === 'uname'">
              <el-form-item prop="username">
                <el-input v-model="loginForm.username" auto-complete="off" placeholder="账号" type="text">
                  <i slot="prefix" class="el-icon-user-solid"/>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" auto-complete="off" placeholder="密码" type="password">
                  <img slot="prefix" src="@/assets/svg/password.svg" style="width: 14px;"/>
                </el-input>
              </el-form-item>
              <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox>
            </div>
            <!-- 下方的登录按钮 -->
            <el-form-item style="width:100%;">
              <el-button :loading="loading" size="medium" style="width:100%;" type="primary" @click.native.prevent="handlerLogin">
                <span v-if="!loading">登 录</span>
                <span v-else>登 录 中...</span>
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>

  <!-- footer -->
  <div class="login-footer">
    Copyright © 2023 <a href="https://www.myweplus.com" style="color: #2F53EB" tatget="_blank">微加科技</a>
  </div>
</div>
</template>

<script>
import logoBills from '@/assets/images/logo-bills.png'
import config from "@/request/config"
const avatar = require("@/assets/avatar.png")
export default {
  name: "login",
  data(){
    return {
      loading: false,
      logoBills: logoBills,
      loginForm: {
        loginType: "uname",
        username: "admin",
        password: "admin123",
        captchaVerification: process.env.VUE_APP_CAPTCHA_VERIF,
      },
      LoginRules: {
        username: [
          {required: true, trigger: "blur", message: "用户名不能为空"}
        ],
        password: [
          {required: true, trigger: "blur", message: "密码不能为空"}
        ],
        mobile: [
          {required: true, trigger: "blur", message: "手机号不能为空"},
          {
            validator: function (rule, value, callback) {
              if (/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(value) === false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            }, trigger: "blur"
          }
        ],
      },
    }
  },
  methods: {
    handlerLogin(){
      this.loading = true;
      this.$axios.postAction('/system/auth/login', this.loginForm).then(response=>{
        if (response.success) {
          console.log("-------------", response)
          window.localStorage.setItem('FRAME_VUE_TOKEN', response.data.accessToken);
          let userInfo = {
            ...this.loginForm,
            ...response.data,
            avatar: avatar,
            loginTime: new Date().getTime()
          }
          window.localStorage.setItem("FRAME_VUE_USER", JSON.stringify(userInfo))
          this.$router.push({path: "/index"})
        }
      }).finally(()=>{
        this.loading = false;
      })
    },
  }
}
</script>

<style scoped lang="scss">
.login {
  width: inherit;
  height: inherit;
  min-width: 1080px;
  min-height: 620px;
  background-color: #e6ebf2;
  background-image: url('../assets/images/bg.png');
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;

  .login-content {
    width: 52vw;
    height: 29.12vw;
    background-color: #fff;
    box-shadow: 0 16px 40px rgba(0,0,0,.07);
    border-radius: 20px;
    position: relative;

    .login-content--pic {
      width: 23vw;
      height: inherit;
      background-image: url('../assets/images/pic.png');
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 20px 0 0 20px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .login-content--form {
      width: 29vw;
      height: inherit;
      position: absolute;
      top: 0;
      left: 23vw;
      display: flex;
      justify-content: center;
      align-items: center;

      .form-title {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        margin-right: 20px;

        .form-title--logo {
          width: 100px;
          height: 70px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .form-title--text {
          font-size: 24px;
          font-weight: 700;
        }
      }

      .form-cont {
        .form {
          box-sizing: border-box;
          width: 320px;
        }
      }
    }
  }

  .login-footer {
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: #8c8c8c;
    position: absolute;
    bottom: 30px;
  }
}

.field-column {
  flex-direction: column;
}
</style>
