<template>
  <div class="view-account">
    <div class="view-account-header"></div>
    <div class="view-account-container">
      <div class="view-account-top">
        <div class="text-2xl">
          <!-- <img :src="websiteConfig.loginImage" alt="" /> -->
          Admin Template
        </div>
        <div class="view-account-top-desc">中后台解决方案</div>
      </div>
      <div class="view-account-form">
        <el-form ref="formRef" :model="formInline" :rules="rules" size="large">
          <el-form-item prop="username">
            <el-input v-model="formInline.username" placeholder="Please Input">
              <template #prefix>
                <el-icon size="20"><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="formInline.password" placeholder="Please Input" :type="passwordType">
              <template #prefix>
                <el-icon size="20"><Lock /></el-icon>
              </template>
              <template #suffix>
                <el-icon
                  class="cursor-pointer"
                  v-show="passwordType != 'password'"
                  @click="passwordType = 'password'"
                  ><View
                /></el-icon>
                <el-icon
                  class="cursor-pointer"
                  v-show="passwordType == 'password'"
                  @click="passwordType = 'text'"
                  ><Hide
                /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <div class="w-full flex justify-between">
              <div class="flex-initial">
                <el-checkbox v-model="formInline.autoLogin">自动登录</el-checkbox>
              </div>
              <div class="flex-initial order-last">
                <a href="javascript:">忘记密码</a>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button class="w-full" type="primary" @click="handleLogin" :loading="loginLoading"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import { initDynamicRouter } from '@/router/modules/dynamicRouter';
  import { useUserStore } from '@/stores/modules/user';
  import { useTabsStore } from '@/stores/modules/tabs';
  import { useKeepAliveStore } from '@/stores/modules/keepAlive';
  import { HOME_URL } from '@/config';

  const userStore = useUserStore();
  const tabsStore = useTabsStore();
  const keepAliveStore = useKeepAliveStore();
  const loginLoading = ref(false);
  const passwordType = ref('password');

  const router = useRouter();

  const formInline = reactive({
    username: '',
    password: '',
    autoLogin: false,
  });

  const rules = ref({
    username: [{ required: true, message: 'Please input your username', trigger: 'blur' }],
    password: [
      { required: true, message: 'Please input your password', trigger: 'blur' },
      { min: 6, max: 16, message: 'Password should be 6-16 characters', trigger: 'blur' },
    ],
  });

  const handleLogin = async () => {
    loginLoading.value = true;
    try {
      // 1.调用接口
      // ...
      // 2.设置 Token
      userStore.setToken('hasToken123');

      // 初始化动态路由
      await initDynamicRouter();

      // 3.清空 tabs、keepAlive 数据
      tabsStore.setTabs([]);
      keepAliveStore.setKeepAliveName([]);

      // 4.跳转到首页
      router.push(HOME_URL);
    } catch (e) {
      console.log('error', e);
    }
    loginLoading.value = false;
  };
</script>
<style lang="scss" scoped>
  .view-account {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: auto;

    &-container {
      flex: 1;
      padding: 32px 12px;
      max-width: 384px;
      min-width: 320px;
      margin: 0 auto;
    }

    &-top {
      padding: 32px 0;
      text-align: center;

      &-desc {
        font-size: 14px;
        color: #808695;
      }
    }

    &-other {
      width: 100%;
    }

    .default-color {
      color: #515a6e;

      .ant-checkbox-wrapper {
        color: #515a6e;
      }
    }
  }
  @media (min-width: 768px) {
    .view-account {
      background-image: url('../../assets/images/login.svg');
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 100%;
    }

    .page-account-container {
      padding: 32px 0 24px 0;
    }
  }
</style>
