<template>
    <MOSTY.PageTree :pageTitle="'模块数据列表'" :searchType="'01'" :isShowLeftTree="false">
        <template #serach>
            <el-divider />
            <div class="btnBox">
                <el-button type="primary" @click="addRole">
                    <el-icon>
                        <CirclePlus />
                    </el-icon>
                    <span>新增</span>
                </el-button>
            </div>
        </template>
        <template #table>
            <section style="height: calc(100vh - 100px);">
                <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
                    :isSelect="false" :isSort="true">

                    <!-- 操作 -->
                    <template #actions="{ row }">
                        <span class="operesee" @click="seeinfo(row)"><el-icon>
                                <View />
                            </el-icon>查看</span>
                        <span class="operedit" @click="editInfo(row)"><el-icon>
                                <Compass />
                            </el-icon>修改</span>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                            @confirm="handleDelete(row)">
                            <template #reference>
                                <span span class="operdel"><el-icon>
                                        <Delete />
                                    </el-icon>删除</span>
                            </template>
                        </el-popconfirm>
                    </template>
                </MOSTY.Table>
            </section>
            <div class="fenye">
                <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize">
                </MOSTY.Pages>
            </div>
        </template>
    </MOSTY.PageTree>
    <div v-if="dialogVisible" class="dialog-box">
        <Mksjinfo :obj="queryobj" @changePage="handleClose" />
    </div>



</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js"
import Mksjinfo from "./mksjinfo.vue";
const { proxy } = getCurrentInstance();
const tableloading = ref(false)
const fzList = ref([])
const queryobj = ref({
})
const listQuery = ref({
    pageCurrent: 1,
    pageSize: 20,
    total: 0
})

const data = reactive({
    tableData: [],
    tableColumn: [
        {
            title: "所属分组",
            prop: "typename",
        },
        {
            title: "模块名称",
            prop: "name",
        },
        {
            title: "唯一码",
            prop: "code",
        },
        {
            title: "操作",
            prop: "actions",
            slot: true

        }
    ],

});
const dialogVisible = ref(false)


onMounted(() => {
    gettableData()
    getfzlist()
});
function gettableData() {
    tableloading.value = true
    getApi({}, '/mosty-base/module/getPageList').then(res => {
        data.tableData = res.records
    }).finally(() => {
        tableloading.value = false
    })
}
function getfzlist() {
    getApi({}, '/mosty-base/module/getGroupList').then(res => {
        fzList.value = res
        queryobj.value.fzList = res
    })
}
//新增
function addRole() {
    queryobj.value.savebtn = true
    queryobj.value.id = null
    queryobj.value.title = '模块数据新增'
    dialogVisible.value = true
}
//修改
function editInfo(row) {
    queryobj.value.savebtn = true
    queryobj.value.id = row.id
    queryobj.value.title = '模块数据修改'
    dialogVisible.value = true
}
//查看
function seeinfo(row) {
    queryobj.value.savebtn = false
    queryobj.value.id = row.id
    queryobj.value.title = '模块数据详情'
    dialogVisible.value = true
}
//删除
function handleDelete(row) {
    postApi({}, `/mosty-base/module/delModule/${row.id}`).then(res => {
        ElMessage.success("删除成功");
        gettableData()
    })
}


function handleClose() {
    dialogVisible.value = false
    gettableData()
}
const changeNo = (val) => {
    listQuery.pageCurrent = val;
    gettableData();
};
const changeSize = (val) => {
    listQuery.pageSize = val;
    gettableData();
};
</script>

<style lang="scss" scoped>
.btnBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}
</style>
