<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>
        <a-input placeholder="用户名" v-model:value="form.account" />
        <a-input
          placeholder="密码"
          v-model:value="form.password"
          :style="{ marginTop: '30px' }"
          type="password"
        />
        <a-button :style="{ marginTop: '30px' }" @click="loginUser">
          登录
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import * as api from "@/api";
import { setCookie } from "@/api/method";
import { useRouter } from "vue-router";

export default {
  name: "loginPage",
  setup() {
    const router = useRouter();
    const state = reactive({
      form: {
        // account: "00004409",
        account: "10181457",
        password: "1234567890Aa",
      },
    });

    async function loginUser() {
      const {
        data: { data: token },
      } = await api.login(state.form);
      setCookie("token", token, 10);
      await router.push({ path: "/learningpath" });
      location.reload();
    }

    return {
      ...toRefs(state),
      loginUser,
    };
  },
};
</script>
