<template>
    <el-form ref="userRef" :model="userForm" :rules="rules" label-width="80px">
        <el-form-item label="用户昵称" prop="nickName">
            <el-input v-model="userForm.nickName" maxlength="30"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="userForm.mobile" maxlength="11"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email" maxlength="50"/>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
            <!--      <el-input v-model="userForm.birthday" maxlength="50" />-->
            <el-date-picker
                v-model="userForm.birthday"
                type="date"
                placeholder="请选择出生日期"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="userForm.sex">
                <el-radio value="1">男</el-radio>
                <el-radio value="2">女</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button type="danger" @click="close">关闭</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import {updateUserProfile} from "@/api/system/user";
import useUserStore from "../../../../store/modules/user";

const props = defineProps({
    user: {
        type: Object as PropType<any>,
        required: true
    }
});
const userForm = computed(() => props.user);
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const userRef = ref<ElFormInstance>();
const rules = ref<ElFormRules>({
    nickName: [{required: true, message: "用户昵称不能为空", trigger: "blur"}],
    email: [{required: true, message: "邮箱地址不能为空", trigger: "blur"}, {
        type: "email",
        message: "请输入正确的邮箱地址",
        trigger: ["blur", "change"]
    }],
    mobile: [{
        required: true,
        message: "手机号码不能为空",
        trigger: "blur"
    }, {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}]
});


/** 提交按钮 */
const submit = () => {
    userRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            await updateUserProfile(props.user);
            useUserStore().getInfo()
            proxy?.$modal.msgSuccess("修改成功");
        }
    });
};
/** 关闭按钮 */
const close = () => {
    proxy?.$tab.closePage();
};
</script>
