<!-- sync-user 分组相关配置 -->
<template>
    <div class="vue-box">
        <div class="c-card" v-if="state.model">
            <!-- 如果还有配置项没有初始化，就显示这个：提示初始化 -->
            <template v-if="state.dataList.length < state.names.length">
                <com-init-config ref="com-init-config" :groupName="state.groupName" :names="state.names" :data-list="state.dataList"></com-init-config>
            </template>
            <!-- 如果已经全部初始化了，则显示这个：开始UI操作配置 -->
            <template v-else>
                <!-- tab卡片 -->
                <el-tabs v-model="state.activeTab" class="s-tab">
                    <!-- ---------------------------------- 系统参数 ---------------------------------- -->
                    <el-tab-pane label="接收推送" name="tab1">
                        <el-form :inline="false" label-width="10em">
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="接收推送：">
                                <el-switch v-model="state.model.isListen" active-value="true" inactive-value="false" />
                                <span class="c-remark-right" v-if="state.model.isListen === 'true'" style="color: green;">接收从其它系统向本系统推送的用户数据（开启）</span>
                                <span class="c-remark-right" v-else>接收从其它系统向本系统推送的用户数据（关闭）</span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="推送规则：">
                                <div class="in-intro">
                                    <p>
                                        当您的其它系统用户数据发生改变时，实时向本系统推送数据，可推送的动作有：
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户新增</el-tag>&nbsp;
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户删除</el-tag>&nbsp;
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户修改资料</el-tag>&nbsp;
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户修改密码</el-tag>&nbsp;
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户查询 (非修改)</el-tag>&nbsp;
                                    </p>
                                    <p>详细推送规则请参考接口文档。</p>
                                </div>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="解密数据：">
                                <el-checkbox
                                    v-model="state.model.isListenDecrypt" true-label="true" false-label="false"
                                    label="使用 SM4 算法解密接收的数据" />
                                <span class="c-remark-right" v-if="state.model.isListenDecrypt === 'true'">（开启）</span>
                                <span class="c-remark-right" v-else>（关闭）</span>
                            </in-item>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-list
                                ref="listenIpList" name="允许推送的 IP：" v-model="state.model.listenIpList" type="text-list"
                                remark="只接收上述列表中的 IP 的推送消息，不在列表中的 IP 通知无效，此配置项填 * 代表允许所有 IP。"></in-list>
                        </el-form>
                    </el-tab-pane>

                    <!-- ---------------------------------- 其它配置 ---------------------------------- -->
                    <el-tab-pane label="向外广播" name="tab2">
                        <el-form :inline="false" label-width="10em">
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item2 name="向外广播：">
                                <el-switch v-model="state.model.isBrd" active-value="true" inactive-value="false" />
                                <span class="c-remark-right" v-if="state.model.isBrd === 'true'" style="color: green;">用户信息发生变更时向外推送用户数据（开启）</span>
                                <span class="c-remark-right" v-else>用户信息发生变更时向外推送用户数据（关闭）</span>
                            </in-item2>
                            <in-item2 name="广播规则：">
                                <div class="in-intro">
                                    <p>
                                        当本系统的用户数据发生改变时，实时向其它系统推送数据，可广播的动作有：
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户新增</el-tag>&nbsp;
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户删除</el-tag>&nbsp;
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户修改资料</el-tag>&nbsp;
                                        <el-tag class="c-tag2" effect="plain" disable-transitions>用户修改密码</el-tag>&nbsp;
                                    </p>
                                    <p>详细广播规则请参考接口文档。</p>
                                </div>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="加密数据：">
                                <el-checkbox
                                    v-model="state.model.isBrdEncrypt" true-label="true" false-label="false"
                                    label="使用 SM4 算法加密广播的数据" />
                                <span class="c-remark-right" v-if="state.model.isBrdEncrypt === 'true'">（开启）</span>
                                <span class="c-remark-right" v-else>（关闭）</span>
                            </in-item>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="同步广播地址：">
                                <div>
                                    <el-input v-model="state.model.brdUrlSync" />
                                    <div class="c-remark">被推送方需要返回特定格式数据，如不返回则视为同步失败，中断本系统的修改用户操作。</div>
                                </div>
                            </in-item>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-list 
                                ref="brdUrl" name="异步广播地址：" v-model="state.model.brdUrl" type="text-list" 
                                remark="被推送方无需返回特定格式数据，即使其发生错误，也不会中断本系统的修改用户操作。"></in-list>
                        </el-form>
                    </el-tab-pane>

                </el-tabs>

                <!-- 确定按钮 -->
                <div style="position: absolute; bottom: 0px; width: calc(100% - 3em); line-height: 80px; background-color: #FFF;">
                    <hr style="height: 2px;">
                    <div class="c-item" style="padding-left: 10em;">
                        <el-button class="btn-13" type="primary" icon="el-icon-Check" @click="ok">保存修改</el-button>
                        <el-button class="btn-13" type="primary" plain icon="el-icon-RefreshRight" @click="f5">重置</el-button>
                    </div>
                </div>

            </template>
        </div>
    </div>
</template>

<script setup name="config-view-sync-user">
import ComInitConfig from './com-init-config';
import {getCurrentInstance, nextTick, reactive} from "vue";
import InList from "../../sa-frame/com/in/in-list";
const { proxy } = getCurrentInstance();

// ------------------ 数据 ------------------
const state = reactive({
    activeTab: 'tab1',  // 当前显示的tab
    groupName:  "sync-user",  // 当前所配置的配置分组名，可不填，写一个空串
    // 本页面要查询的配置集合
    names: [
        'isListen',	// 是否打开：接收数据推送 
        'isListenDecrypt',	// 接收的数据是否使用SM4解密
        'listenIpList',	// 接收推送数据时允许的 IP 列表 
        'isBrd',	// 是否打开：向外发送广播
        'isBrdEncrypt',	// 广播的数据是否使用SM4加密 
        'brdUrlSync', // 同步广播地址
        'brdUrl',	// 异步广播地址 
    ],
    dataList: [], // 根据 names 查出来的配置项集合 
    model: null,  // 配置信息，JSON格式 
})

// ------------------ 函数 ------------------
// 加载数据
const f5 = function(){
    sa.ajax('/SpConfig/getListByNames', { names: state.names.join(',') }, function(res){
        // 配置项数组
        state.dataList = res.data;
        // 配置项 JSON 对象
        state.model = {};
        for (const item of res.data) {
            state.model[item.name] = item.value;
        }
        nextTick(function (){
            proxy.$refs.listenIpList.setValue(state.model.listenIpList);
            proxy.$refs.brdUrl.setValue(state.model.brdUrl);
        })
    });
};
f5();

// 提交：确认修改配置 
const ok = function(){
    sa.ajax('/SpConfig/updateConfig', state.model, function(res){
        sa.ok2('保存成功');
    });
};

// 增加配置后的回调 
const addConfigCall = function (name, value, remarks) {
    proxy.$refs['com-init-config'].addConfigCall(name, value, remarks);
}

// 对外开放函数 
defineExpose({f5, addConfigCall})


</script>

<style scoped lang="scss">
.vue-box{height: 100%; overflow: hidden;}
.c-card{
    height: calc(100% - 4.5em);
    position: relative;
    :deep(.c-label){width: 10em;}
    :deep(.el-input){width: 500px;}
    :deep(.el-textarea){width: 500px;}
    :deep(.el-tabs__content){height: calc(100% - 130px); overflow: auto;}
    :deep(.el-form) {padding-top: 20px; padding-bottom: 50px;}
}
.s-tab{height: calc(100%); }

.in-intro{color: #777;}

</style>
