<template>
  <div class="login-layout mt-[100px] m-auto sm:w-screen-xl w-full">
    <div class="mt-[100px] m-auto flex sm:flex-row flex-col sm:p-0 p-3">
      <el-card shadow="hover" class="sm:w-[250px] sm:flex sm:mb-0 mb-5 justify-center w-full">
        <div class="flex justify-center pb-4 flex-col justify-center items-center">
          <el-avatar :src="userInfo?.avatar" :size="70" />
          <text class="text-gray-400 py-1 text-sm">更换头像</text>
        </div>
        <!-- 用户菜单 -->
        <UserMenu :activeIndex="activeIndex" />
      </el-card>
      <el-tabs type="border-card" class="flash bg-white hover:shadow w-full sm:ml-6 ml-0">
        <el-tab-pane label="个人认证">
          <el-form :model="form" label-width="auto" size="large" label-position="top" class="sm:w-screen-md w-full sm:px-6 sm:py-2">
            <el-form-item label="真实姓名">
              <el-input v-model="form.realName" placeholder="请输入真实姓名" />
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input v-model="form.idCard"  placeholder="请输入证件号码" />
            </el-form-item>
            <el-form-item label="身份证(正面)">
              <Upload />
            </el-form-item>
            <el-form-item label="身份证(反面)">
              <Upload />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="企业认证">
          <el-form :model="form" label-width="auto" size="large" label-position="top" class="sm:w-screen-md w-full sm:px-6 sm:py-2">
            <el-form-item label="企业名称">
              <el-input v-model="form.companyName" placeholder="请输入企业名称" />
            </el-form-item>
            <el-form-item label="社会信用代码">
              <el-input v-model="form.idCard"  placeholder="请输入社会信用代码" />
            </el-form-item>
            <el-form-item label="营业执照">
              <Upload />
            </el-form-item>
            <el-form-item label="所属行业">
              <el-select v-model="form.city" placeholder="请选择所属行业">
              </el-select>
            </el-form-item>
            <el-form-item label="网站信息">
              <el-input v-model="form.idCard"  placeholder="请输入网站信息" />
            </el-form-item>
            <el-form-item label="您的身份">
              <el-radio-group v-model="form.sex">
                <el-radio value="1">法定代表人</el-radio>
                <el-radio value="2">被授权人</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户协议">
              <el-checkbox v-model="form.status">请务必提供真实信息，我司有权自行或委托第三方审查您提供的身份信息是否属真实，有效。若提供虚假信息，由此的全部后果由您承担。</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人认证成功">
          <el-result
              icon="success"
              title="个人认证成功"
              sub-title="认证完成时间 2024-09-30"
          >
            <template #extra>
              <el-button type="text">修改认证信息</el-button>
            </template>
          </el-result>
        </el-tab-pane>
        <el-tab-pane label="企业认证成功">
          <el-result
              icon="success"
              title="企业认证成功"
              sub-title="认证完成时间 2024-09-30"
          >
            <template #extra>
              <el-button type="text">修改认证信息</el-button>
            </template>
          </el-result>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useConfigInfo, useToken, useWebsite} from "~/composables/configState";
import useFormData from '@/utils/use-form-data';
import type { User } from '@/api/system/user/model';
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import {useServerRequest} from "~/composables/useServerRequest";
import type {ApiResult} from "~/api";
import UserMenu from "~/components/UserMenu.vue";

// 配置信息
const runtimeConfig = useRuntimeConfig();
const route = useRoute();
const activeIndex = ref('');
const website = useWebsite()
const config = useConfigInfo();
const token = useToken();
const userInfo = ref<User>();

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

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

const onSubmit = async () => {
  const {data: modify } = await useServerRequest<ApiResult<User>>('/auth/user',{
    baseURL: runtimeConfig.public.apiServer,
    method: 'put',
    body: form
  })
  if(modify.value?.code == 0){
    ElMessage.success('修改成功')
  }
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

const reload = async () => {
  const {data: response} = await useServerRequest<ApiResult<User>>('/auth/user',{baseURL: runtimeConfig.public.apiServer})
  if(response.value?.data){
    userInfo.value = response.value?.data;
    assignFields(response.value?.data);
  }
}

watch(
    () => route.path,
    (path) => {
      activeIndex.value = path;
      console.log(path,'=>Path')
      reload();
    },
    { immediate: true }
);
</script>
<style lang="less">
body{
  background: url("https://oss.wsdns.cn/20240328/797a8e323bba4fc6827abf9d8b98ba45.png");
  background-size: 100%;
}
</style>
