<template>
  <div class="login-layout mt-[100px] m-auto w-screen-xl">
    <el-container class="mt-[100px] m-auto p-">
      <el-aside width="170px" class="bg-white p-3 hover:shadow">
          <div class="flex justify-center pb-4">
            <img src="https://oss.wsdns.cn/20240328/797a8e323bba4fc6827abf9d8b98ba45.png" class="w-[80px] h-[80px] rounded-full" />
          </div>
        <div class="menu">
          <el-menu
              default-active="1"
              style="border: none"
          >
            <el-menu-item v-for="(item,index) in activities" :index="`${index+1}`" style="border-bottom: 1px solid #f3f3f3">
              <span class="text-center">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <div shadow="hover" class="flash bg-white hover:shadow h-[500px] w-full ml-6">
        ={{ userInfo }}=
      </div>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {useConfigInfo, useToken, useUserInfo, useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import type { User } from '@/api/system/user/model';
import { ref } from 'vue'
import {getCaptcha} from "~/api/passport/login";
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import type {Website} from "~/api/cms/website/model";
import type {CaptchaResult, LoginResult} from "~/api/passport/login/model";

// 配置信息
const runtimeConfig = useRuntimeConfig();
const website = useWebsite()
const config = useConfigInfo();
const token = useToken();
const userInfo = useUserInfo();

const value = ref('登录')
const options = ['登录', '注册']
const activeName = ref('first')

const activities = [
  {
    name: '账号信息'
  },
  {
    name: '实名认证'
  },
  {
    name: '订单列表'
  },
  {
    name: '退出登录'
  },
]
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}
// 验证码 base64 数据
const captcha = ref('');
// 验证码内容, 实际项目去掉
const text = ref('');
// 是否显示图形验证码弹窗
const visible = ref(false);
// 图形验证码
const imgCode = ref('');
// 发送验证码按钮loading
const codeLoading = ref(false);
// 验证码倒计时时间
const countdownTime = ref(0);
// 验证码倒计时定时器
let countdownTimer: number | null = null;

// 配置信息
const { form } = useFormData<User>({
  username: '',
  phone: '',
  password: '',
  code: '',
  smsCode: '',
  remember: true,
  isAdmin: true
});


const navigateTo = (url: string) => {
  window.location.href = url;
}

/**
 * 执行登录
 */
const onSubmit = async () => {
  const {data: response} = await useServerRequest<ApiResult<LoginResult>>('/login',{baseURL: runtimeConfig.public.apiServer,method: "post",body: form})
  if (response.value?.code == 0) {
    if(response.value.data){
      const access_token = response.value.data?.access_token
      const user = response.value.data?.user
      if(access_token){
        token.value = access_token;
      }
      if(user){
        userInfo.value = user;
      }
    }
    ElMessage.success(response.value.message)
    setTimeout(() => {
      navigateTo('/')
      return;
    },1000)
  }
  console.log(response.value?.data,'>>>>>sfd')
  ElMessage.error(response.value?.message)
  return false;
}

useHead({
  title: `用户中心 - ${config.value?.siteName}`,
  meta: [{ name: website.value.keywords, content: website.value.comments }]
});

</script>
<style lang="less">
body{
  background: url("https://oss.wsdns.cn/20240328/797a8e323bba4fc6827abf9d8b98ba45.png");
  background-size: 100%;
}
</style>
