<template>
    <div v-loading="loading" element-loading-text="拼命加载中......请稍等">
        <br />
        <br />
        <el-row :gutter="20">
            <el-col :span="16">
                <el-form
                    :model="form"
                    :rules="rules"
                    ref="refForm"
                    label-width="150px"
                >
                    <el-form-item label="用户名称：" prop="name">
                        <el-input
                            v-model.trim="form.name"
                            maxlength="18"
                            show-word-limit
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="个人简介：">
                        <el-input
                            type="textarea"
                            v-model="form.personalProfile"
                            :rows="4"
                            maxlength="200"
                            show-word-limit
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="性别：" prop="sex">
                        <el-radio-group v-model="form.sex">
                            <el-radio
                                v-for="(item, index) in sexOptions"
                                :key="index"
                                :label="item.value"
                                >{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="地址：" prop="address">
                        <el-input
                            type="textarea"
                            v-model="form.address"
                            :rows="4"
                            maxlength="200"
                            show-word-limit
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <p>提示：如果页面账户显示不一致，需要重新登录</p>
                        <el-button
                            type="primary"
                            icon="el-icon-check"
                            @click="handleSubmit('refForm')"
                            >保 存
                        </el-button>
                        <el-button @click="handleCancelEmit">取 消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="8">
                <!-- <div style="display: flex; justify-content: center">
                    <el-image
                        style="width: 200px; height: 200px"
                        :src="avatar"
                        fit="fill"
                    ></el-image>
                </div>
                <br />
                <div style="display: flex; justify-content: center">
                    <el-button>修改头像</el-button>
                </div> -->
            </el-col>
        </el-row>
    </div>
</template>

<script>
import USER_MANAGEMENT from "@/api/user-management";
import cache from "@/utils/cache";

// 性别选项
const sexOptions = [
    {
        value: "M",
        label: "男",
    },
    {
        value: "F",
        label: "女",
    },
];

export default {
    name: "AccountEditInfo",
    data() {
        return {
            loading: false,
            sexOptions: sexOptions,
            avatar: "", // 头像地址
            form: {
                name: "",
                personalProfile: "",
                sex: "",
                address: "",
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入用户名称",
                        trigger: "change",
                    },
                ],
            },
        };
    },
    methods: {
        handleCancelEmit() {
            this.$emit("cancel");
        },
        handleSubmit(formName) {
            let mobile = JSON.parse(cache.getSession("user")).account;
            const _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.loading = true;
                    USER_MANAGEMENT.saveUserPersonalInfo({
                        mobile: mobile,
                        name: _this.form.name,
                        sex: _this.form.sex,
                        address: _this.form.address,
                        personalProfile: _this.form.personalProfile,
                    })
                        .then((val) => {
                            _this.$message.success("个人信息保存成功！");
                            // _this.callGetUserPersonalInfo();
                        })
                        .catch((err) => {
                            _this.$message.error(err);
                        })
                        .finally(() => {
                            _this.loading = false;
                        });
                }
            });
        },
        // 获取用户个人信息
        callGetUserPersonalInfo() {
            let mobile = JSON.parse(cache.getSession("user")).account;
            const _this = this;
            _this.loading = true;
            USER_MANAGEMENT.getUserPersonalInfo(mobile)
                .then((val) => {
                    if (val.data) {
                        _this.form.name = val.data.name;
                        _this.form.personalProfile = val.data.personalProfile;
                        _this.form.sex = val.data.sex;
                        _this.form.address = val.data.address;
                        _this.avatar = val.data.avatar;
                    } else {
                        _this.form.name = "";
                        _this.form.personalProfile = "";
                        _this.form.sex = "";
                        _this.form.address = "";
                        _this.avatar = "";
                    }
                })
                .catch((err) => {
                    _this.$message.error(err);
                })
                .finally(() => {
                    _this.loading = false;
                });
        },
    },
    created() {
        this.callGetUserPersonalInfo();
    },
};
</script>

<style scoped>
</style>