<template>
    <ap-container>
        <ap-main margin="1111">
            <div class="flex flex-align-center">
                <div style="padding: 50px">
                    <span v-if="tSysUserForm.fdAvatar == null || tSysUserForm.fdAvatar == ''">
                        <i class="el-icon-user" style="font-size: 127px;"/>
                    </span>
                    <el-avatar v-else :size="127" :src="avatar"></el-avatar>
                    <ap-upload ref="uploadRef" :options="uploadOpt">
                        <el-button type="text" style="margin-left: 25px;"><i class="el-icon-upload"/>上传头像</el-button>
                    </ap-upload>
                </div>
                <div style="width: 400px">
                    <el-form ref="tSysUserFormRef" :model="tSysUserForm"
                             label-width="80px" :inline="false">
                        <el-form-item label='用户名' prop='fdUserName'>
                            <el-input v-model='tSysUserForm.fdUserName'></el-input>
                        </el-form-item>
                        <el-form-item label="密码:">
                            <el-input value="**********" readonly="readonly" :disabled="true">
                                <el-button slot="append" @click="passwordDialogVisible = true">
                                    <i class="el-icon-edit-outline" style="font-size: 16px;margin-top: 3px"/>
                                </el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item label='手机' prop='fdMobile'>
                            <el-input v-model='tSysUserForm.fdMobile'></el-input>
                        </el-form-item>
                        <el-form-item label='邮箱' prop='fdEmail'>
                            <el-input v-model='tSysUserForm.fdEmail'></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div>
                <ap-button type="primary" :click="saveFn" icon="el-icon-check" size="medium"
                           style="margin-left: 200px;">保存
                </ap-button>
            </div>

        </ap-main>

        <el-dialog
            title="修改密码"
            :visible.sync="passwordDialogVisible"
            width="500px"
            center>
            <el-form
                ref="updatePasswordDialogFormRef"
                :model="tSysUserForm"
                label-width="100px">
                <el-form-item label="旧密码:" prop="oldPassword">
                    <el-input v-model="tSysUserForm.oldPassword" placeholder="输入旧密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码:" prop="fdPassword">
                    <el-input v-model="tSysUserForm.fdPassword" placeholder="输入新密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认新密码:" prop="newPassword">
                    <el-input v-model="tSysUserForm.newPassword" placeholder="输入确认新密码" show-password></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <ap-button type="primary" :click="savePasswordFn" icon="el-icon-check">保存
                </ap-button>
            </span>
        </el-dialog>
    </ap-container>
</template>

<script>
import md5 from 'js-md5'

export default {
    name: "UserInfo",
    data() {
        return {
            avatar: "",
            passwordDialogVisible: false,
            tSysUserForm: {
                fdUserName: '',
                fdPassword: '',
                fdMobile: '',
                fdEmail: '',
                fdAvatar: '',
                fdId: '',
                oldPassword: '',
                newPassword: '',
            },
            uploadOpt: {
                data: () => {
                    return {
                        filePath: '/avatar/',      // 服务器保存的路径
                        fileName: this.tSysUserForm.fdUserName + "_" + new Date().getTime()     // 保存文件名
                    }
                },
                onSuccess: (response, file, fileList) => {
                    this.avatar = this.$env.FS_URL + response.data;
                    this.tSysUserForm.fdAvatar = response.data;
                },
                onError: (response, file, fileList) => {
                    this.$message.error('文件上传失败！')
                }
            }
        }
    },
    created() {
        this.initUserInfo();
    },
    methods: {
        initUserInfo() {
            this.$request({
                url: '/apm/sys/TSysUser/getTSysUser',
                method: 'post',
            }).then(response => {
                this.tSysUserForm = response.data;
                this.avatar = this.$env.FS_URL + this.tSysUserForm.fdAvatar;
            })
        },
        saveFn() {
            return new Promise((resolve) => {
                this.$request({
                    url: '/apm/sys/TSysUser/updateTSysUser',
                    method: 'post',
                    data: this.tSysUserForm
                }).then(response => {
                    this.$message.success('保存成功！')
                }).finally(() => {
                    resolve();
                });
            });
        },
        //密码必须包含数字和字母
        checkPassWord(password) {
            var str = password;
            if (str == null || str.length < 6) {
                this.$message.error('新密码长度至少6位！')
                return false;
            }
            var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
            if (!reg.test(str)) {
                this.$message.error('新密码必须包含字母和数字！')
                return false;
            }
            return true;
        },
        savePasswordFn() {
            if (this.tSysUserForm.oldPassword == null) {
                this.$message.error("旧密码必填！");
                return;
            }
            if (this.tSysUserForm.fdPassword != this.tSysUserForm.newPassword) {
                this.$message.error("新密码两次输入不一致，请重新输入！");
                return;
            }
            if (!this.checkPassWord(this.tSysUserForm.fdPassword)) {
                return;
            }
            return new Promise((resolve) => {
                this.$request({
                    url: '/apm/sys/TSysUser/updateTSysUserPassword',
                    method: 'post',
                    data: {
                        fdPassword: md5(this.tSysUserForm.fdPassword),
                        oldPassword: md5(this.tSysUserForm.oldPassword),
                        fdId: this.tSysUserForm.fdId
                    }
                }).then(response => {
                    this.$message.success("修改成功");
                    this.passwordDialogVisible = false;
                }).finally(() => {
                    resolve();
                });
            });
        }
    }
}
</script>

<style scoped>

</style>
