<!-- 配置列表 - 表格视图 -->
<template>
    <el-scrollbar class="vue-box">
        <div class="c-card">
            <!-- 提示 -->
            <el-alert
                class="win-tips" type="info" show-icon
                title="小提示：为避免错误修改配置项，建议在 [ 表格视图 ] 仅用于全局概览，如果您要修改某个配置项，请优先选择在 [ 可视化UI视图 ] 操作"
            >
            </el-alert>
            <h4 class="c-title">配置列表 - 表格视图</h4>
            <!-- ------------- 查询条件 ------------- -->
            <el-form
                class="select-form" :inline="true" label-width="6em"
                @submit.native.prevent @keyup.enter="state.p.pageNo = 1; f5();">
                <!-- <in-input name="配置分组：" v-model="p.group" type="text" /> -->
                <in-item name="配置分组：">
                    <el-select v-model="state.p.groupName" filterable allow-create clearable>
                        <el-option v-for="item in state.groupList" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                </in-item>
                <in-input name="配置名称：" v-model="state.p.name" type="text" />
                <in-item class="ok-item">
                    <el-button type="primary" icon="el-icon-Search" @click="state.p.pageNo = 1; f5();">查询</el-button>
                </in-item>
                <br>
                <in-item name="综合排序：">
                    <el-radio-group v-model="state.p.sortType" class="s-radio-text">
                        <el-radio :label="0">最近添加</el-radio>
                        <el-radio :label="1">创建时间</el-radio>
                    </el-radio-group>
                </in-item>
            </el-form>
            <!-- ------------- 操作按钮 ------------- -->
            <div class="fast-btn">
                <el-button type="primary" icon="el-icon-Plus" @click="add">新增</el-button>
                <el-button type="primary" plain icon="el-icon-Download" @click="sa.exportExcel()">导出</el-button>
                <el-button type="danger" plain icon="el-icon-Delete" @click="deleteByIds">批量删除</el-button>
                <el-button type="default" plain icon="el-icon-Refresh" @click="sa.f5CurrView()">重置</el-button>
            </div>
            <!-- ------------- 数据表格 ------------- -->
            <el-table :data="state.dataList" class="data-table" ref="data-table" row-key="id">
                <td-info type="selection" />
                <td-info type="text" name="记录id" prop="id" width="100px" />
                <td-info name="分组" width="160px">
                    <template #default="s">
                        <el-tag class="c-tag2" effect="plain" disable-transitions> {{ s.row.groupName }} </el-tag>
                    </template>
                </td-info>
                <td-info type="text" name="配置项" prop="name" min-width="120px" />
                <td-info type="textarea" name="配置值" show-overflow-tooltip min-width="240px">
                    <template #default="s">
                        <p>{{ s.row.value }}</p>
                    </template>
                </td-info>
                <td-info type="textarea" name="备注" prop="remarks" min-width="120px" />
                <td-info type="datetime" name="创建时间" prop="createTime" width="150px" />
                <td-info type="datetime" name="更新时间" prop="updateTime" width="150px" />
                <el-table-column label="操作" fixed="right" width="180px">
                    <template #default="s">
                        <el-button type="primary" plain class="c-btn" icon="el-icon-Edit" @click="update(s.row)">修改</el-button>
                        <el-button type="danger" plain class="c-btn" icon="el-icon-Delete" @click="del(s.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- ------------- 分页按钮 ------------- -->
            <div class="page-box">
                <el-pagination
                    background layout="total, prev, pager, next, sizes, jumper"
                    v-model:current-page="state.p.pageNo" v-model:page-size="state.p.pageSize" :total="state.dataCount"
                    :page-sizes="[1, 10, 20, 30, 40, 50, 100]"
                    @current-change="f5()" @size-change="f5()">
                </el-pagination>
            </div>
        </div>
    </el-scrollbar>
</template>

<script setup name="sp-config-list">
import TdInfo from '../../sa-frame/com/td/td-info';
import {getCurrentInstance, onMounted, reactive} from "vue";
const { proxy } = getCurrentInstance();


// ------------------ 数据 ------------------
const state = reactive({
    p: {    // 查询条件 
        group: '',
        nameName: '',
        value: '',
        sortType: 0,
        pageNo: 1,
        pageSize: 20
    },
    dataCount: 0,  // 数据总数 
    dataList: [],  // 数据表格 
    groupList: []       // 所有分组 
});

// 组件加载时执行函数
onMounted(function (){
    f5();
    f5GroupList();
})

// ------------------ 函数 ------------------
// 查找数据
const f5 = function() {
    sa.ajax('/SpConfig/getList', state.p, function(res) {
        state.dataList = res.data;	// 数据
        state.dataCount = res.dataCount;
    });
};

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

// 增加 
const add = function () {
    sa.showModel('添加一个配置项', () => import('./sp-config-add'));
}
// 修改
const update = function (data) {
    sa.showModel('修改配置项', import('./sp-config-add'), { id: data.id });
};
// 查看详情
const getInfo = function(data) {
    // sa.showModel('管理员详情', import('./admin-info'), { id: data.id });
};
// 删除
const del = function(data) {
    sa.confirmWarn('是否删除，此操作不可撤销', function(){
        sa.ajax('/SpConfig/delete', { id: data.id }, function(res){
            sa.arrayDelete(state.dataList, data);
            sa.ok('删除成功');
        })
    });
};
// 批量删除
const deleteByIds = function() {
    // 获取选中元素的id列表
    let selection = proxy.$refs['data-table'].getSelectionRows();
    let ids = sa.getArrayField(selection, 'id');
    if(selection.length === 0) {
        return sa.msg('请至少选择一条数据');
    }
    // 提交删除
    sa.confirmWarn(`是否删除选中的 ${selection.length} 条数据？此操作不可撤销`, function() {
        sa.ajax('/SpConfig/deleteByIds', { ids: ids.join(',') }, function(res) {
            sa.arrayDelete(state.dataList, selection);
            sa.ok('删除成功');
        })
    });
};

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


</script>

<style scoped lang="scss">

</style>
