<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2023-01-13 11:42:48
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2023-01-13 14:12:17
 * @FilePath: /stu_h5/src/views/login/login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    :style="{
      margin: 'auto',
      background:
        'url(http://img.gz2c.com/FoTcLY8ww-ISCFlwyCoYuLim1BMt) no-repeat',
      backgroundSize: '100% 100%',
      width: '100%',
      height: '100vh',
      display: 'flex',
    }"
  >
    <div
      :style="{
        width: '300px',
        height: '300px',
        margin: '10% auto',
        padding: '20px 30px',
        textAlign: 'center',
        borderRadius: '10px',
        background: '#e0e0e0',
        boxShadow: '20px 20px 60px #bebebe,-20px -20px 60px #ffffff',
      }"
    >
      <div :style="{ fontSize: '24px', paddingBottom: '30px' }">用户登录</div>
      <div>
        <input placeholder="用户名" v-model="form.account" />
        <input
          placeholder="密码"
          v-model="form.password"
          :style="{ marginTop: '30px' }"
          type="password"
        />
        <button :style="{ marginTop: '30px' }" @click="loginUser">登录</button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import { LOGIN } from "@/api/api";
import { setCookie } from "@/api/utils";
import { request } from "@/api/request";

const router = useRouter();
const {
  query: { returnUrl },
} = useRoute();

const returnclick = () => {
  router.back();
};

const form = ref({
  account: "10181457",
  password: "1234567890Aa",
});

async function loginUser() {
  console.log(
    "await request(LOGIN, form.value)",
    await request(LOGIN, form.value)
  );
  const { data: token } = await request(LOGIN, form.value);
  setCookie("token", token, 10);
  returnUrl && (window.location.href = decodeURI(returnUrl));
  // await router.push({path: returnUrl || "/learnpath"});
}
</script>
