<template>
  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600"> 用户中心</span>
      </template>
      <template #extra>
        <nuxt-link to="/user/modify" class="text-gray-400 text-sm">修改资料</nuxt-link>
      </template>
      <div class="login-layout mt-10 sm:w-screen-xl w-full">
        <div class="m-auto flex sm:flex-row flex-col sm:px-0">
          <div class="flash bg-white rounded-lg w-full">
            <div class="lg:w-screen-lg w-full sm:px-4 sm:py-4 mb-10 mt-5">
              <el-descriptions :column="columnClasses" border class="px-4" title="用户资料">
                <el-descriptions-item
                    label="头像"
                >
                  <el-image
                      style="width: 70px; height: 70px"
                      :src="user?.avatar"
                  />
                </el-descriptions-item>
                <el-descriptions-item label="手机号码">{{ user?.mobile }}</el-descriptions-item>
                <el-descriptions-item label="用户ID">{{ user?.userId }}</el-descriptions-item>
                <el-descriptions-item label="昵称">{{ user?.nickname }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ user?.sexName }}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{ user?.email }}</el-descriptions-item>
<!--                <el-descriptions-item label="所在省份">{{ user?.province }}</el-descriptions-item>-->
<!--                <el-descriptions-item label="所在城市">{{ user?.city }}</el-descriptions-item>-->
                <el-descriptions-item label="可用余额">{{ user?.balance }}</el-descriptions-item>
                <el-descriptions-item label="可用积分">{{ user?.points }}</el-descriptions-item>
<!--                <el-descriptions-item :rowspan="1" :span="2" label="生日">{{ user?.birthday }}</el-descriptions-item>-->
                <el-descriptions-item :rowspan="1" :span="2" label="个人签名">
                  <p class="min-h-[60px]">{{ user?.introduction }}</p>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </div>
    </el-page-header>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import {ArrowLeft, View, Search} from '@element-plus/icons-vue'
import useFormData from '@/utils/use-form-data';
import type {User} from '@/api/system/user/model';
import {ref} from 'vue'
import {updateUser} from "~/api/layout";

// 配置信息
const route = useRoute();
const router = useRouter();
const user = useUser();
const activeIndex = ref('');

// 配置信息
const {form, assignFields} = useFormData<User>({
  userId: undefined,
  nickname: undefined,
  username: undefined,
  phone: undefined,
  mobile: undefined,
  sex: undefined,
  sexName: undefined,
  email: undefined,
  password: undefined,
  code: undefined,
  smsCode: undefined,
  comments: undefined,
  remember: true,
  tenantName: undefined
});

const reload = async () => {
  // 未登录状态(是否强制登录)
  const token = localStorage.getItem('token');
  if (!token || token == '') {
    navigateTo('/passport/login');
    return false;
  }
  if (user.value) {
    form.userId = user.value.userId;
    form.nickname = user.value.nickname;
    form.realName = user.value.realName;
    form.mobile = user.value.mobile;
    form.email = user.value.email;
    form.sex = user.value.sex;
    form.comments = user.value.comments;
  }
}

const goBack = () => {
  router.back(); // 返回上一页
}

const onSubmit = () => {
  updateUser(form).then(() => {
    ElMessage.success('修改成功');
  });
}

const columnClasses = computed(() => {
  const width = window.innerWidth;
  if (width < 640) { // 小于 640px 时为 1 列
    return 1;
  } else { // 大于等于 1024px 时为 4 列
    return 2;
  }
});

watch(
    () => route.path,
    (path) => {
      activeIndex.value = path;
      reload();
    },
    {immediate: true}
);
</script>
