<template>
  <el-form
    :model="accountForm"
    status-icon
    class="account-form"
    ref="accountFormRef"
  >
    <el-form-item prop="username">
      <el-input
        v-model="accountForm.username"
        autocomplete="off"
        clearable
        prefix-icon="el-icon-user"
        placeholder="用户名 admin 或不输均为 test"
      ></el-input>
    </el-form-item>

    <el-form-item prop="password">
      <el-input
        type="password"
        v-model="accountForm.password"
        autocomplete="off"
        prefix-icon="el-icon-lock"
        clearable
        placeholder="密码：123456"
      ></el-input>
    </el-form-item>

    <el-form-item prop="code">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-input
            v-model="accountForm.code"
            autocomplete="off"
            clearable
            prefix-icon="el-icon-position"
            placeholder="请输入验证码"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <div class="account-form-code">1234</div>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-button
        class="account-form-submit"
        round
        type="primary"
        @click="handleSubmit"
      >
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { initFrontEndControlRoutes } from "@/router/route-util";
import { time2ChineseUtil } from "@/utils/time";
import store from "@/hooks/useStore";

export default defineComponent({
  name: "account",
  setup() {
    const router = useRouter();
    const route = useRoute();

    const accountForm = reactive({
      username: "admin",
      password: "123456",
      code: "1234",
    });

    const handleSubmit = () => {
      const { username } = accountForm;
      const userInfo = {
        username,
        photo:
          username === "admin"
            ? "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg"
            : "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=317673774,2961727727&fm=26&gp=0.jpg",
        time: new Date().getTime(),
        authPageList: username === "admin" ? ["admin"] : ["test"],
        authBtnList:
          username === "admin"
            ? ["btn.add", "btn.del", "btn.edit", "btn.link"]
            : ["btn.add", "btn.link"],
      };
      // 存储 token 到浏览器缓存
      sessionStorage.setItem("token", Math.random().toString(36).substr(0));
      // 存储用户信息到浏览器缓存
      sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
      // 动态添加路由
      initFrontEndControlRoutes();
      signInSuccess();
    };

    const signInSuccess = () => {
      router.push(route.query.redirect ? <string>route.query.redirect : "/");
      setTimeout(() => {
        const { username } = store.state.userInfo;
        ElMessage.success(
          `${username}，${time2ChineseUtil(new Date())}，欢迎回来!`
        );
      }, 300);
    };

    return {
      accountForm,
      handleSubmit,
    };
  },
});
</script>

<style lang="scss" scoped>
.account-form {
  &-code {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #ffffff;
    border: 1px solid rgb(220, 223, 230);
    color: #333;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 5px;
    text-indent: 5px;
    text-align: center;
    cursor: pointer;
    transition: all ease 0.2s;
    border-radius: 4px;
    user-select: none;
  }

  &-submit {
    width: 100%;
    letter-spacing: 2px;
    font-weight: 300;
    margin-top: 15px;
  }
}
</style>
