<template>
      <el-form
        label-width="84px"
        :model="formData"
        ref="formRef"
      >
      <div class="flex">
      <el-form-item label="名称" prop="realname" class="flex-1"
          :rules="{ required: true, message: '请输入名称', trigger: 'blur' }">
          <el-input v-model="formData.realname" placeholder="请输入名称" clearable />
        </el-form-item>

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

</template>

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

  type FormInstance = InstanceType<typeof ElForm>;

  const formRef = ref<FormInstance>();

  const formData = reactive({
    realname: '',
    gender: '',
    avatar: '',
    mobile: '',
    email: '',
    city:'',
    address: '',
    intro: '',
    note: '',
    avatarName:''
  });

  const handleSubmit = async () => {
    await formRef.value?.validate();
    await updateProfile(formData)
    message("更新成功");
  };
  const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
  const setUserInfo = async () => {
  const data = await getUserInfo();
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      if(key=='city'){
        if(data.city.length>0){
          formData[key] = [parseInt(data.city[0]),parseInt(data.city[1]),parseInt(data.city[2]),parseInt(data.city[3])];
        }else{
          formData[key] =''
        }
      }else{
        formData[key] = data[key];
      }
    }
  }
};
  onMounted(() => {
    setUserInfo()
  });
</script>
