<template>
  <div class="login_container" @keyup.enter="loginClick()" :style="{ background: 'url(' + loginBg + ')  center/85%' }">
    <BorderBox12
      :color="['#fff', '#fff']"
      style="
        width: 450px;
        height: 320px;
        display: block;
        float: right;
        right: 38.2%;
        top: 46%;
      "
    >
      <span style="font-size: 26px;color: #fff;padding: 0px 172px;display: inline-block;margin-top: 20px;">用户登录</span>
      <el-form
        class="login_form"
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        size="large"
      >
        <el-form-item prop="account">
          <el-input
            v-model="loginForm.account"
            style="width: 350px"
            placeholder="请输入登录ID"
            :prefix-icon="User"
          >
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            style="width: 350px"
            type="password"
            show-password
            placeholder="请输入密码"
            :prefix-icon="Unlock"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="large" style="width: 350px;font-size: 14px;font-family: 'Microsoft YaHei';" @click="loginClick(loginFormRef)">登 录</el-button>
        </el-form-item>
      </el-form>
    </BorderBox12>

    <div class="footer">
      <div class="copyright">
        v1.0.1
      </div>
    </div>
  </div>
</template>

<script setup>
import loginBg from "../assets/loginbg.png";
import { User, Unlock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { BorderBox12 } from '@kjgl77/datav-vue3';
import { ref } from 'vue'
import { postAction, getAction } from '@/api/manage'
import { useRouter } from "vue-router";

const router = useRouter();

const loginForm = ref({
  account: "",
  password: "",
})

const loginFormRef = ref();

const loginFormRules = ref({
  // 用户名与密码的验证规则
  account: [
    { required: true, message: "请输入登录名称", trigger: "blur" },
    {
      min: 1,
      max: 12,
      message: "长度在 1 到 12 个字符",
      trigger: "blur",
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    {
      min: 1,
      max: 22,
      message: "长度在 1 到 22 个字符",
      trigger: "blur",
    },
  ],
})

    // 登录
const loginClick = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const res = await postAction(window._CONFIG['serverURL'] + '/auth/login', loginForm.value)
      if (res.code != 99200) return ElMessage.error(res.message);
      sessionStorage.setItem("token", res.data.token);
      sessionStorage.setItem("storeList", JSON.stringify(res.data.storeList));
      goHome()
    } else {
      console.log('error submit!')
    }
  })
}

    

  // 跳转首页
  const goHome = async() => {
    router.push({path: '/home'})
  }

</script>

<style scoped lang="less">
.login_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 1000px;
  zoom: 1;
  background-color: #fff;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}
.login_font {
  position: absolute;
  z-index: 99999;
  right: 30.875rem;
  top: 25rem;
  color: #fff;
}
.login_input {
  position: absolute;
  right: 0px;
  width: 100%;
  top: 16.94rem;
  color: #fff;
}
.login_button {
  position: absolute;
  z-index: 9999;
  right: 36.6875rem;
  top: 31.5rem;
  cursor: pointer;
  font-size: 16px;
  background-color: #fff;
}
.login_box {
  width: 450px;
  height: 400px;
  background: #fff;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // border: 1px solid #000;
  box-shadow: 0 0 6px #fff;
}
// 头像框
.avatar_box {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  border: 1px solid #fff;
  border-radius: 50%;
  padding: 10px;
  background: #fff;
  box-shadow: 0 2px 6px #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
  }
}
// 信息描述
.des_box {
  position: absolute;
  top: 200px;
  left: 78%;
  transform: translateX(-50%);
  text-align: center;
  user-select: none;
  .title {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(to right, #fff, #fff);
    transform: skewX(-15deg);
    -webkit-background-clip: text;
    color: transparent;
  }
  .banben {
    padding: 7px;
    color: #fff;
  }
}
// 登录
.login_form {
  width: 350px;
  margin-left: 50px;
  margin-top: 30px;
  box-sizing: border-box;
}
.btns {
  display: flex;
  justify-content: flex-end;
}

i {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  height: 100%;
  margin: 0 5px;
  img {
    width: 15px;
  }
}

::v-deep .el-input__wrapper {
  background: transparent;
  color: #fff;
  margin: 0;
}

::v-deep .el-input__prefix {
  color: #fff;
}
::v-deep .el-input__inner {
  color: #fff;
  font-size: 18px;
}

.footer {
  position: absolute;
  width: 100%;
  line-height: 20px;
  bottom: 20px;
  text-align: center;
  color: #fff;
}
</style>
