<template>
    <div class="bodyBoxs">
        <div class="boxs">
            <div class="titles">修改信息</div>
            <el-form status-icon label-width="0px" class="demo-ruleForm" ref="formItem" :model="formItem">
                <el-form-item label prop="name">
                    <div>登录用户</div>
                    <el-input
                    v-model="formItem.name"
                    style="width: 550px; position: relative;line-height:48px;height:48px"
                    class="input-item mrb"
                    placeholder="请输入登录用户"
                    />
                </el-form-item>
                <el-form-item label prop="title">
                    <div>用户权限</div>
                    <el-select v-model="formItem.title" placeholder="请选择"  style="width: 550px; position: relative;line-height:48px;height:48px">
                        <el-option
                        v-for="(item,i) in roleArr"
                        :key="i"
                        :label="item.title"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label prop="dispalyPassword">
                    <div>当前密码</div>
                    <el-input
                    v-model="formItem.dispalyPassword"
                    style="width: 550px; position: relative;line-height:48px;height:48px"
                    class="input-item mrb"
                    placeholder="请输入当前密码"
                    />
                </el-form-item>
                <el-form-item label prop="surePassword">
                    <div>修改密码</div>
                    <el-input
                    v-model="formItem.surePassword"
                    style="width: 550px; position: relative;line-height:48px;height:48px"
                    class="input-item mrb"
                    placeholder="请输入修改密码"
                    />
                </el-form-item>
                <div class="btnbox">
                    <el-button plain style="background:#ff7200;width:160px;color:#fff;margin-right:50px" @click="subMitData"  v-loading.fullscreen.lock="fullscreenLoading">保存</el-button>
                    <el-button plain style="width:160px;color:#949494" @click="back">取消</el-button>
                </div>
               
            </el-form>
        </div>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data(){
        return{
            formItem: {

            },
            roleArr:[
                "系统管理员",
                "复核员",
                "记账员",
                "查阅员"
            ],
            fullscreenLoading:false
        }
    },
    created(){
        this.getData(this.$route.query.id)
    },
    methods:{
        getData(id){
            this.$api.adminUpdate({id:id}).then((res) => {
                if(res.code==0){
                    this.roleArr=res.data.right;
                    this.formItem=res.data.adminData;
                    this.formItem.surePassword=res.data.adminData.dispalyPassword
                }else{
                    this.$message(res.message);
                }

            }).catch((res) => {

            });
        },
        subMitData(){
            if(this.formItem.name==""||this.formItem.title==""||this.formItem.dispalyPassword==""||this.formItem.surePassword==""){
                this.$message('请完善表单信息');
                return;
            }
            if(this.formItem.dispalyPassword!=this.formItem.surePassword){
                this.$message('两次密码不一致');
                return;
            }
            if(typeof (this.formItem.title )=="string"){
                for(let i=0;i<this.roleArr.length;i++){
                    if(this.roleArr[i].title==this.formItem.title){
                        this.formItem.title=this.roleArr[i].id;
                        break;
                    }
                }
            }
             this.fullscreenLoading=true;
            this.$api.adminAdminUpdate({
                id:this.formItem.id,
                rightId:this.formItem.title,
                name:this.formItem.name,
                password:this.formItem.dispalyPassword
            }).then((res) => {
                this.fullscreenLoading=false;
                if(res.code==0){
                     this.$message('修改成功！');
                     this.$router.replace({
                        path:"/jurisdiction"
                    })
                }else{
                    this.$message(res.message);
                }
               
            }).catch((res) => {
                this.fullscreenLoading=false;
            });
        },
        back(){
            this.$router.replace({
                path:"/jurisdiction"
            })
        }
    }
}
</script>
<style scoped>
    .bodyBoxs{
        padding: 40px;
    }
    .boxs{
        width: 100%;
        height: 867px;
        background: #fff;
        border-radius: 15px;
    }
    .titles{
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #ababab;
        line-height: 90px;
        font-size: 26px;
        color: #1b1b1b;
        padding-left: 20px;
        font-weight: bold;
        margin-bottom: 55px;
    }
    .demo-ruleForm{
        width: 1200px;
        display: flex;
        justify-content: space-between;
        align-content: start;
        flex-wrap: wrap;
        margin: 0 auto;
    }
    .btnbox{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 80px;
    }
</style>