<!-- 配置：增加 / 修改 -->
<template>
    <div class="vue-box submit-box--dialog" style="width: 500px;">
        <div class="c-card">
            <el-form :inline="false" label-width="7em">
                <!-- <in-input type="text" name="配置分组：" v-model="state.model.groupName"></in-input> -->
                <in-item name="配置分组：">
                    <el-select v-model="state.model.groupName" filterable allow-create>
                        <el-option v-for="item in state.groupList" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                </in-item>
                <in-input type="text" name="配置项名：" v-model="state.model.name"></in-input>
                <in-input type="textarea" name="配置项值：" v-model="state.model.value"></in-input>
                <in-input type="textarea" name="备注信息：" v-model="state.model.remarks" placeholder="介绍一下这个配置的作用"></in-input>
            </el-form>
        </div>
    </div>
</template>

<script setup name="sp-config-add">
import {getCurrentInstance, onMounted, reactive} from "vue";
const { proxy } = getCurrentInstance();

const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    id: prop.param.id || 0,    // 获取传值id （0=添加，非0=修改）
    model: {    // 数据 Model
        id: 0,		// id号 
        groupName: prop.param.groupName || '',		// 配置分组
        name: prop.param.name || '',		// 配置项 
        value: '',		// 配置值  
        remarks: '',		// 备注信息 
    },
    groupList: []       // 所有分组 
})

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

// ------------------ 函数 ------------------
// 查询分组数据 
const f5GroupList = function () {
    sa.ajax('/SpConfig/getGroupList', function (res) {
        state.groupList = res.data;
    }, {msg: false})
}

// 提交表单 
const ok = function () {
    // 表单校验 
    let m = sa.copyJSON(state.model);

    // 如果是增加
    if(state.id === 0) {
        sa.ajax('/SpConfig/add', m, function(res) {
            sa.alert('添加成功', function() {
                // 如果是从 UI 可视化配置打开的当前窗口
                if(prop.param.name) {
                    sa.closeModel();
                    sa.currView().addConfigCall(m.name, m.value, m.remarks);
                } else {
                    // 如果是从 表格视图 打开的当前窗口
                    sa.closeModel();
                    sa.currView().f5();
                    sa.currView().f5GroupList();
                }
            });
        });
    } else {
        // 如果是修改 
        sa.ajax('/SpConfig/update', m, function(res) {
            sa.alert('修改成功', function() {
                sa.closeModel();
                sa.currView().f5();
                sa.currView().f5GroupList();
            });
        });
    }
}

// 对外开放函数 
defineExpose({ ok });

</script>

<style scoped>

</style>
