<!-- info 分组相关配置 -->
<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.isDynamicInfo" active-value="true" inactive-value="false" />
                                <span class="c-remark-right" v-if="state.model.isDynamicInfo === 'true'" style="color: green;">
                                    启用动态配置，使用如下配置参数设定系统标题、Logo等信息
                                </span>
                                <span class="c-remark-right" v-else>关闭动态配置，使用 setting.js 文件定义的系统标题、Logo 等信息（硬编码）</span>
                            </in-item2>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="系统logo：">
                                <img
                                    v-if="sa.isNull(state.model.appLogo) === false" :src="state.model.appLogo" alt="img" class="logo-img"
                                    @click="sa.showImage(state.model.appLogo, '400px', '400px')">
                                <el-link type="primary" @click="sa.uploadImage(src => {state.model.appLogo = src; sa.ok2('上传成功');})">选择上传</el-link>
                            </in-item>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="系统名称：">
                                <el-input v-model="state.model.appName" />
                            </in-item>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="版本编号：">
                                <el-input v-model="state.model.appVersion" />
                            </in-item>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="更新时间：">
                                <el-input v-model="state.model.appUpdateTime" />
                            </in-item>
                            <!-- ---------- 一个配置项 --------- -->
                            <in-item name="更新描述：">
                                <el-input v-model="state.model.appIntro" type="textarea" :autosize="{minRows: 3, maxRows: 10}" />
                            </in-item>

                        </el-form>
                    </el-tab-pane>

                    <!-- ---------------------------------- 其它配置 ---------------------------------- -->
                    <el-tab-pane label="其它配置" name="tab2">
                        <br>
                        <span>其它配置</span>
                    </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-info">
import ComInitConfig from './com-init-config';
import {reactive} from "vue";
const { proxy } = getCurrentInstance();

// ------------------ 数据 ------------------
const state = reactive({
    activeTab: 'tab1',  // 当前显示的tab
    groupName:  "info",  // 当前所配置的配置分组名，可不填，写一个空串
    // 本页面要查询的配置集合
    names: [
        'isDynamicInfo',    // 是否动态设定系统信息 
        'appLogo',	// 系统logo地址
        'appName', // 系统名称
        'appVersion',	// 系统版本
        'appUpdateTime',	// 系统更新时间 
        'appIntro',	// 系统介绍 
    ],
    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;
        }
    });
};
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;}
}
/* .vue-box{padding: 0px;} */
.logo-img{
    width: 35px;
    height: 35px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.5em;
    cursor: pointer;
}
.s-tab{height: calc(100%); }


/* 让头像样式小一点 */
.vue-box :deep(*) {
    .image-box-2{width: 60px; height: 100px;}
    .image-box-2 img{width: 60px; height: 60px;}
    .image-box-2.up-img-box{height: 60px;}
    .image-box-2.up-img-box img{margin: 15px; width: 30px; height: 30px;}
}
</style>
