<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="account">
                    <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="account">
                    <div>用户权限</div>
                    <el-select v-model="formItem.role" 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.title">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label prop="account">
                    <div>当前密码</div>
                    <el-input
                    v-model="formItem.password"
                    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="addAdmin"  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: {
                name: '',
                role: '',
                // phone: '',
                // code: '',
                password: '',
                newPassword: '',
            },
            roleArr:[
                {
                    "id": 1, //权限id  用于赋值
                    "title": "系统管理员" //权限名称
                },
                    {
                    "id": 2, //权限id  用于赋值
                    "title": "复核员" //权限名称
                    },
                    {
                    "id": 3, //权限id  用于赋值
                    "title": "记账员" //权限名称
                    },
                    {
                    "id": 4, //权限id  用于赋值
                    "title": "查阅员" //权限名称
                }
            ],
            fullscreenLoading:false
        }
    },
    created(){

    },
    methods:{
        addAdmin(){
            let formItem=this.formItem;
            console.log(formItem)
            if(formItem.name==""||formItem.role==""||formItem.password==""){
                 this.$message('请完善表单信息');
                 return;
            }
            for(let i=0;i<this.roleArr.length;i++){
                if(this.roleArr[i].title==formItem.role){
                    formItem.role=this.roleArr[i].id;
                    break;
                }
            }
            this.fullscreenLoading=true;
            this.$api.addAdmin({
                rightId:this.formItem.role,
                name:this.formItem.name,
                password:this.formItem.password
            }).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>