<template>
    <div>
        <div class="bigBox">
            <div class="pBox">
                <p>系统参数管理</p>
            </div>
            <div class="tableBox">
                <el-button type="primary" @click="addNew(0)">+新建系统参数</el-button>
                <el-table :data="systemList" style="width: 100%;height: calc(100vh - 240px);">
                    <el-table-column label="序号" width="100">
                        <template #default="{ $index }">{{ $index + 1 }}</template>
                    </el-table-column>
                    <el-table-column prop="param_name" label="参数名称" width="auto" />
                    <el-table-column prop="param_value" label="参数值" width="auto" />
                    <el-table-column prop="param_memo" label="参数说明" width="auto" />
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button text type="primary" size="small" @click="editOld(1,scope.row)">
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                                编辑
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页组件 -->
            <div class="pageBox">
                <PageNation :tLength="tLength"></PageNation>
            </div>
            <!-- 模态框 -->
            <div class="modalBox">
                <AddSn v-if="addRule" :addRule="addRule" :editForm="editForm" @asBack="asBack" :addEdit="addEdit" :searchSystemCode="searchSystemCode"></AddSn>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import system from '@/api/system'
import PageNation from './Pagination.vue'
import AddSn from '../modalComp/AddSn.vue'
export default {
    setup() {
        let systemList = ref([])//系统参数列表
        let tLength = ref(0)//总条数
        let addRule = ref(false)//增加，修改模态框
        let addEdit = ref(0)//0代表新增，1代表修改
        let editForm = ref({})//编辑需要回显的参数
        function searchSystemCode() {//获取所有系统参数
            system.getSystemCode({ pageindex: 1, pageSize: 10 }).then(res => {
                systemList.value = res.data
                tLength.value = res.count
            })
        }
        function addNew(num) {//新增打开模态框
            addEdit.value = num
            addRule.value = true
        }
        function editOld(num,row){//编辑打开模态框
            editForm.value = row
            addEdit.value = num
            addRule.value = true
        }
        function asBack(data) {//子组件返回的模态框状态
            addRule.value = data
        }
        onMounted(() => {
            ElMessage({
                type:"info",
                message:"正在加载数据",
                duration:500
            })
            searchSystemCode()
        })
        return {
            searchSystemCode,//获取所有系统参数
            systemList,//系统参数列表
            tLength,//总条数
            addRule,//增加，修改模态框
            addNew,//新增打开模态框
            asBack,//子组件返回的模态框状态
            addEdit,//0代表新增，1代表修改
            editOld,//编辑打开模态框
            editForm,//编辑需要回显的参数
        }
    },
    components: {
        PageNation,
        AddSn,
    }
}
</script>

<style  scoped>
.bigBox {
    width: 98%;
    height: 100%;
    margin-left: 15px;
}

.pBox {
    width: 100%;
    height: 100%;
    text-align: center;
}

.tableBox {
    width: 100%;
    height: auto;
    border: 1px solid red;
    overflow-y: auto;
}

.pageBox {
    float: right;
}
</style>