<template>
  <div class="login-body">
    <div class="login-container">
      <div class="head">
        <img class="logo" src="../assets/logo.png" />
      </div>
      <div class="bottom">
        <div class="left-bottom"></div>
        <div class="middle-bottom"></div>
        <div class="right-bottom">
          <div class="title">数据控制器</div>
          <div class="s-title">登录LOGIN</div>
          <el-form label-position="top" :rules="rules" :model="ruleForm" ref="loginForm" class="login-form" size="large">
            <el-form-item prop="username">
              <el-input type="text" v-model.trim="ruleForm.username" autocomplete="off" placeholder="请输入账号">
                <template #prefix>
                  <img class="logo" src="../assets/user.png" width="16" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model.trim="ruleForm.password" autocomplete="off" placeholder="请输入密码"
                @keyup.enter="submitForm">
                <template #prefix>
                  <img class="logo" src="../assets/ps.png" width="16" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item class="login-btn">
              <el-button style="width: 100%" type="primary" @click="submitForm">立即登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "vue";
import { localSet, localGet } from "@/utils";
import myApi from "@/api/myApi.js";
import { ElMessage } from "element-plus";
import { user, token, response } from '../proto/data/pd'
import axios from "axios";
import md5 from 'js-md5'
export default {
  name: "Login",
  setup() {
    const loginForm = ref(null);
    const state = reactive({
      ruleForm: {
        username: "",
        password: "",
      },
      checked: true,
      rules: {
        username: [
          { required: "true", message: "账户不能为空", trigger: "blur" },
        ],
        password: [
          { required: "true", message: "密码不能为空", trigger: "blur" },
        ],
      },
    });
    const submitForm = async () => {
      loginForm.value.validate(async (valid) => {
        if (valid) {
          // 1. 编码数据
          const userInfo = user.encode({
            name: state.ruleForm.username,
            password: md5(state.ruleForm.password).toUpperCase(),
            timestamp: new Date().getTime()
          }).finish()
        
          // 2. 截取有效长度
          const send_userInfo = userInfo.slice(0, userInfo.length);
          const res = await myApi.login(send_userInfo);
  
          // 解析返回数据
          const ret = response.decode(new Uint8Array(res)); 

          console.log(2, ret);
          if (ret.code == 0) {
              // 解析数据
              const ret_token = token.decode(ret.data);
              // 将返回token传入路由
              localSet('token', ret_token); 
              console.log(222, localGet("token"));
              // 跳转
              window.location.href = '/';
          } else {
              console.log(ret);
          } 
        } else {
          console.log("error submit!!");
          return false;
        }
      })
    };
    const resetForm = () => {
      loginForm.value.resetFields();
    };
    return {
      ...toRefs(state),
      loginForm,
      submitForm,
      resetForm,
    };
  },
};
</script>

<style scoped lang="scss">
.login-body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: url("../assets/bg.png") no-repeat center;
  background-size: 100% 100%;
}

.login-container {
  width: 1280px;
  height: 750px;
  border-radius: 4px;
  background: url("../assets/bg1.png") no-repeat center;
  background-size: 100% 100%;
}

.head {
  display: flex;
  align-items: center;
  padding: 40px 0 20px 180px;
  margin: 0 auto;
}

.head img {
  width: 80px;
}

.bottom {
  height: 65%;
  display: flex;

  .left-bottom {
    width: 150px;
  }

  .middle-bottom {
    width: 690px;
    background: url("../assets/bg3.png") no-repeat center;
  }

  .right-bottom {
    width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 36px;
      font-weight: 600;
      padding: 20px 0 40px 0;
      color: #333333;
    }

    .s-title {
      font-size: 24px;
      font-weight: 600;
      color: #333333;
    }
  }
}

.login-form {
  width: 85%;
  margin: 40px auto;
}
</style>
<style>
.el-form--label-top .el-form-item__label {
  padding: 0;
}

.login-form .el-form-item {
  margin-bottom: 40px;
}

.login-btn {
  margin-top: 80px;
}
</style>
