<!-- 管理员：增加 / 修改 -->
<template>
    <div class="vue-box submit-box--dialog">
        <div class="c-card" style="width: 500px;">
            <el-form :inline="false" label-width="7em" v-if="state.model">
                <!-- 防止密码框被填充 -->
                <div style="height: 0; overflow: hidden;">
                    <el-input />
                </div>
                <in-input name="头像：" v-model="state.model.avatar" type="img" />
                <in-input name="名称：" v-model="state.model.name" type="text" />
                <in-input name="密码：" v-model="state.model.password" type="password" v-if="!state.curr && state.id === 0" />
                <in-item name="角色：" v-if="!state.curr">
                    <el-select v-model="state.model.roleId">
                        <el-option label="请选择" :value="0" disabled />
                        <el-option v-for="role in state.roleList" :key="role.id" :label="role.name" :value="role.id" />
                    </el-select>
                </in-item>
                <in-input name="手机：" v-model="state.model.phone" type="text" placeholder="非必填" />
            </el-form>
        </div>
    </div>
</template>

<script setup name="admin-add">
import {onMounted, reactive} from "vue";
import InInput from "../../sa-frame/com/in/in-input";
import {useUserStore} from "../../store/user";

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    id: prop.param.id || 0,    // 获取传值id （0=添加，非0=修改）
    curr: prop.param.curr ?? false,    // 获取传值id （0=添加，非0=修改）
    model: {    // 数据 Model
        id: 0,
        name: '',
        avatar: '',
        password: '',
        roleId: 0,
        phone: ''
    },
    roleList: [] // 角色列表 
})

// 组件加载时执行函数
onMounted(function (){
    // 渲染旧数据  
    if(state.id !== 0) {
        sa.ajax('/admin/getById?id=' + state.id, function (res) {
            if(!res.data) {
                return sa.alertError('数据不存在');
            }
            state.model = res.data;
        })
    }
    f5RoleList();
})

// ------------------ 函数 ------------------
// 加载角色信息 
const f5RoleList = function () {
    sa.ajax('/role/getList?pageSize=1000', function(res) {
        state.roleList = res.data;	// 数据
    }, { msg: null });
}

// 提交表单 
const ok = function () {
    // 表单校验
    const model = state.model;
    sa.checkNull(model.avatar, '请选择一个头像');
    sa.checkNull(model.name, '请输入昵称');
    if(state.id === 0) {
        sa.checkNull(model.password, '请输入密码');
    }
    sa.checkNull(model.roleId, '请选择角色');

    // 如果是本人修改本人的资料 
    if(state.curr) {
        sa.ajax('/admin/updateInfo', model, function(res) {
            sa.alert('修改成功', function() {
                sa.closeModel();
                useUserStore().setUserInfo({name: model.name, avatar: model.avatar});
                sa.ok2('修改成功');
            });
        });
        return;
    }
    
    // 如果是增加
    if(state.id === 0) {
        sa.ajax('/admin/add', model, function(res) {
            sa.alert('添加成功, 账号id为：' + res.data, function(){
                sa.closeModel();
                sa.currView().f5();
            });
        });
    } else {
        // 如果是修改 
        sa.ajax('/admin/update', model, function(res) {
            sa.alert('修改成功', function() {
                sa.closeModel();
                sa.currView().f5();
            });
        });
    }
}

defineExpose({ok});


</script>

<style scoped>

</style>
