<template>
<div>
    <a-form-model 
        :model="form" 
        :label-col="labelCol" 
        :wrapper-col="wrapperCol"
        :rules="rules"
        ref="ruleForm"
        >
        <a-form-model-item label="用户名">
            <a-input v-model="form.username" disabled/>
        </a-form-model-item>
        <a-form-model-item label="昵称" prop="nickName">
            <a-input v-model="form.nickName"/>
        </a-form-model-item>
        <a-form-model-item label="角色">
            <a-tag v-for="role in form.roles" :key="role.id" color="blue">
                {{role.name}}
            </a-tag>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{span: 4,offset: 4}">
            <a-space size="middle">
                <a-button type="primary" @click="onSubmit">
                    保存
                </a-button>
                <a-button type="primary" @click="showModel">
                    修改密码
                </a-button>
            </a-space>
        </a-form-model-item>
    </a-form-model>

    <!-- 修改密码Modal -->
    <a-modal title="修改密码"
        :confirm-loading="comfirmLoading"
        :visible="modalVisible"
        @ok="changePwd"
        @cancel="handleCancel"
    >
        <a-form-model
            :model="modalForm"
            :rules="modalRules"
            ref="modalForm"
            :label-col="{span:4}"
            :wrapper-col="{span:8}"
            
        >
            <a-form-model-item ref="oldPwd" label="原始密码" prop="password">
                <a-input-password v-model="modalForm.password" 
                @blur="() => {
                    $refs.oldPwd.onFieldBlur()
                }"
                />
            </a-form-model-item>
            <a-form-model-item ref="newPwd" label="新密码" prop="newPassword">
                <a-input-password v-model="modalForm.newPassword"
                @blur="() => {
                    $refs.newPwd.onFieldBlur()
                }
                "
                />
            </a-form-model-item>
        </a-form-model>
    </a-modal>
    </div>
</template>
<script>
import {getCurrentInfo,putObj,changePassword} from '@/api/admin/user';
import { disposereq } from "@/utils/util";
export default {
    data(){
        return {
            labelCol: {span: 4},
            wrapperCol: {span: 4},
            form: {
                id: 0,
                username: '',
                nickName: '',
                status: '',
                roles: [],
                status: ''

            },
            modalForm: {
                password: '',
                newPassword: '',
            },
            rules: {
                nickName: [
                    {required: true,message: '昵称不能为空',trigger: 'blur'}
                ]
            },
            modalRules: {
                password: [
                    {required: true ,message: '原始密码不能为空',trigger: 'blur'}
                ],
                newPassword: [
                    {required: true ,message: '新密码不能为空',trigger: 'blur'}
                ]
            },
            comfirmLoading: false,
            modalVisible: false,
        }
    },
    // 创建完毕
    created() {
        this.getUserInfo()
    },
    // 即将更新渲染
    beforeUpdate() {
        
    },
    methods:{
        getUserInfo(){
            let userInfoStr = localStorage.getItem("UserInfo")
            let userInfo = JSON.parse(userInfoStr)
            getCurrentInfo().then(res => {
                if(res.resp_code == 200){
                    this.form.id = res.datas.id
                    this.form.username = res.datas.username
                    this.form.nickName = res.datas.nickName
                    this.form.roles = userInfo.roles
                    this.form.status = res.datas.status
                }else{
                    this.$message.info(res.resp_msg)
                }
            }).catch(err => {
                disposereq(err);
            })
            // console.log(userInfoStr)
            
            
        },
        onSubmit(){
            this.$refs.ruleForm.validate(valid => {
                if(valid){
                    putObj(this.form).then(res => {
                        if(res.resp_code == 200){
                            this.$message.info('保存成功')
                        }else{
                            this.$message.info('保存失败')
                        }
                    }).catch(err => {
                        disposereq(err)
                    })
                }
            });
        },
        showModel(){
            this.modalVisible = true;
        },
        changePwd(e){
            this.comfirmLoading = true;
            this.$refs.modalForm.validate(valid => {
                if(valid){

                    changePassword(this.modalForm).then(res => {
                        if(res.resp_code == 200){
                            this.modalVisible = false;
                            this.comfirmLoading = false;
                            this.$refs.modalForm.resetFields()
                        }else{
                            this.$message.info(res.resp_msg);
                            this.comfirmLoading = false;
                        }
                    }).catch(err => {
                        disposereq(err);
                    })
                }else{
                    this.comfirmLoading = false;
                    return false;
                }

                
            })
            
        },
        handleCancel(e){
            this.modalVisible = false;
            this.$refs.modalForm.resetFields()
        }
    }
}
    
</script>
<style>

</style>
