<!-- 应用：增加 / 修改 -->
<template>
    <div class="vue-box submit-box--dialog" style="width: 700px; padding-right: 2em;">
        <div class="c-card">
            <el-form :inline="false" label-width="10em">
                <!-- no字段： m.id - id号 -->
                <in-input name="应用名称：" v-model="state.model.name"></in-input>
                <in-input name="应用图标：" v-model="state.model.logo" type="img"></in-input>
                <in-input name="应用介绍：" v-model="state.model.intro" type="textarea"></in-input>
                <in-list ref="allowUrl" name="允许授权的url：" v-model="state.model.allowUrl" type="text-list" remark="此配置允许使用 * 通配符"></in-list>
                <in-enum 
                    name="应用状态：" v-model="state.model.status" type="enum" :jv="{1: '启用', 2: '禁用'}" jtype="3" 
                    remark="应用启用时允许用户登录，禁用时无法登录"></in-enum>
                <in-enum 
                    name="是否公开：" v-model="state.model.isPublic" type="enum" :jv="{1: '公开应用', 2: '私有应用'}" jtype="3" 
                    remark="公开应用默认所有用户可登录，私有应用只有被授权的用户才可以登录"></in-enum>
            </el-form>
        </div>
    </div>
</template>

<script setup name="sys-client-add">
import {getCurrentInstance, onMounted} 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: '',		// id号 
        name: '',		// 应用名称 
        logo: '',		// 应用图标 
        intro: '',		// 应用介绍 
        allowUrl: '',		// 允许授权的url (多个用逗号隔开) 
        status: '',		// 应用状态(1=启用, 2=禁用) 
        isPublic: '',  // 是否公家(1=是,2=否)
        // createTime: '',		// 创建时间 
    },    
})

// 组件加载时触发
onMounted(() => {
    f5();
})

// ------------------ 函数 ------------------
// 渲染旧数据  
const f5 = function (){
    if(state.id === 0) {
        // state.model = createModel();
    } else {
        sa.ajax('/SysClient/getById?id=' + state.id, function (res) {
            if(!res.data) {
                return sa.alert('数据不存在');
            }
            state.model = res.data;
            proxy.$refs.allowUrl.setValue(state.model.allowUrl);
        })
    }
}

// 提交表单 
defineExpose({
    ok: function () {
        // 表单校验 
        const model = state.model;
        sa.checkNull(model.name, '请输入 [ 应用名称 ]');
        sa.checkNull(model.logo, '请输入 [ 应用图标 ]');
        sa.checkNull(model.intro, '请输入 [ 应用介绍 ]');
        // sa.checkNull(m.allowUrl, '请输入 [ 允许授权的url ]');
        sa.checkNull(model.status, '请输入 [ 应用状态 ]');

        // 如果是增加
        if(state.id === 0) {
            sa.ajax('/SysClient/add', model, function(res) {
                sa.alert('增加成功', function() {
                    sa.closeModel();
                    sa.currView().f5();
                });
            });
        } else {
            // 如果是修改 
            sa.ajax('/SysClient/update', model, function(res) {
                sa.alert('修改成功', function() {
                    sa.closeModel();
                    sa.currView().f5();
                });
            });
        }
    }
});


</script>

<style scoped>

</style>
