<template>
  <n-form :label-width="80" :model="formData" ref="formRef" label-placement="left">
    <div class="flex">
      <n-form-item
        label="名称"
        path="realname"
        class="flex-1"
        :rule="{ required: true, message: '请输入名称', trigger: 'blur' }"
      >
        <n-input v-model:value="formData.realname" placeholder="请输入名称" clearable />
      </n-form-item>

      <n-form-item label="性别" path="sex" class="flex-1">
        <n-radio-group v-model:value="formData.gender" name="gender">
          <n-radio :value="1">男</n-radio>
          <n-radio :value="2">女</n-radio>
          <n-radio :value="3">保密</n-radio>
        </n-radio-group>
      </n-form-item>
    </div>
    <div class="flex">
      <n-form-item
        label="手机号码"
        path="mobile"
        class="flex-1"
        :rule="[
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: rule.validatePhone, trigger: 'blur' },
        ]"
      >
        <n-input v-model:value="formData.mobile" placeholder="请输入手机号码" clearable />
      </n-form-item>
      <n-form-item
        label="邮箱地址"
        path="email"
        class="flex-1"
        :rule="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确邮箱地址', trigger: 'blur' },
        ]"
      >
        <n-input v-model:value="formData.email" placeholder="请输入邮箱地址" clearable />
      </n-form-item>
    </div>
    <div class="flex">
      <n-form-item
        label="所属区域"
        class="flex-1"
        path="city"
        :rule="{ type: 'array', required: true, message: '请选择所属区域', trigger: 'change' }"
      >
        <chinaArea style="width: 100%" :type="4" v-model="formData.city" />
      </n-form-item>
      <n-form-item
        label="详细地址"
        class="flex-1"
        path="address"
        :rule="{ required: true, message: '请输入详细地址', trigger: 'blur' }"
      >
        <n-input v-model:value="formData.address" placeholder="请输入详细地址" clearable />
      </n-form-item>
    </div>
    <div class="flex">
      <n-form-item label="简介" path="intro" class="flex-1">
        <n-input
          v-model:value="formData.intro"
          type="textarea"
          placeholder="请输入简介"
          clearable
        />
      </n-form-item>
      <n-form-item label="备注" path="note" class="flex-1">
        <n-input v-model:value="formData.note" type="textarea" placeholder="请输入备注" clearable />
      </n-form-item>
    </div>
    <n-form-item
      label="头像"
      path="avatar"
      :rule="{ required: true, message: '请上传头像', trigger: 'blur' }"
    >
      <UploadImg
        @change-file-name="(name) => (formData.avatarName = name)"
        :fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
        name="user"
        :fileSize="200"
        v-model:image-url="formData.avatar"
      >
        <template #tip>支持扩展名: jpg png jpeg;文件大小不超过200M</template>
      </UploadImg>
    </n-form-item>
    <n-form-item style="margin-left: 85px" v-perm="['sys:profile:update']">
      <n-space>
        <n-button :loading="subLoading" type="primary" @click="submit">更新基本信息</n-button>
      </n-space>
    </n-form-item>
  </n-form>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { FormRules, useMessage } from 'naive-ui';
  import { rule } from '@/utils/validate';
  import chinaArea from '@/components/ChinaArea/index.vue';
  import UploadImg from '@/components/Upload/Image.vue';
  import { message } from 'naive-ui';
  import { useLockFn } from '@/utils/useLockFn';
  import { getUserInfo } from '@/api/system/user';
  import { updateProfile } from '@/api/setting/profile';

  const formRef: any = ref(null);
  const message = useMessage();
  /**
   * 定义表单参数
   */
  const formData = reactive({
    realname: '',
    gender: '',
    avatar: '',
    mobile: '',
    email: '',
    city: [],
    address: '',
    intro: '',
    note: '',
    avatarName: '',
  });

  /**
   * 执行提交表单
   */
  const handleSubmit = async () => {
    await formRef.value?.validate();
    await updateProfile(formData);
    message.success('更新成功');
  };
  const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);

  /**
   * 获取用户信息
   */
  const getUserDetail = async () => {
    const data = await getUserInfo();
    for (const key in formData) {
      if (data[key] != null && data[key] != undefined) {
        formData[key] = data[key];
      }
    }
  };
  /**
   * 钩子函数
   */
  onMounted(() => {
    getUserDetail();
  });
</script>
