<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="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>
        </template>
    </MOSTY.PageTree>
    <el-dialog v-model="dialogVisible" :title="title" width="50%" :before-close="handleClose">
        <el-form ref="ruleFormRef2" :model="Fromobj" :rules="rules" :disabled="false" label-width="120px"
            class="demo-ruleForm" status-icon :inline="true" style="display: block;">
            <el-form-item label="分组名称:" prop="name">
                <el-input v-model="Fromobj.name" type='text' clearable style='width:337px'></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">

                <el-button type="primary" @click="submitzh(ruleFormRef2)" v-loading='loadingshowzh'>
                    <el-icon>
                        <DocumentChecked />
                    </el-icon>
                    <span>保存</span>
                </el-button>
                <el-button @click="handleClose"> <el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span></el-button>
            </div>
        </template>
    </el-dialog>


</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"
const { proxy } = getCurrentInstance();
const tableloading = ref(false)
const loadingshowzh = ref(false)
const ruleFormRef2 = ref()
const rules = reactive({
    name: [{ required: true, message: "请输入分组名称", trigger: "blur" }]
});
const data = reactive({
    tableData: [],
    tableColumn: [
        {
            title: "模块名称",
            prop: "name",
        },

        {
            title: "操作",
            prop: "actions",
            slot: true

        }
    ],

});
const title = ref('模块分组数据新增')
const dialogVisible = ref(false)
const Fromobj = ref({

});

onMounted(() => {
    gettableData()
});
function gettableData() {
    tableloading.value = true
    getApi({}, '/mosty-base/module/getGroupList').then(res => {
        data.tableData = res
    }).finally(() => {
        tableloading.value = false
    })
}
//新增
function addRole() {
    Fromobj.value = {}
    title.value = '模块分组数据新增'
    dialogVisible.value = true

}
//修改
function editInfo(row) {
    Fromobj.value.id = row.id
    Fromobj.value.name = row.name
    title.value = '模块分组数据修改'
    dialogVisible.value = true
}
//删除
function handleDelete(row) {
    postApi({}, `/mosty-base/module/delGroup/${row.id}`).then(res => {
        ElMessage.success("删除成功");
        gettableData()
    })
}
const submitzh = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loadingshowzh.value = true
            if (!Fromobj.value.id) {
                postApi(Fromobj.value, '/mosty-base/module/addGroup').then(res => {
                    ElMessage.success("新增成功");
                    dialogVisible.value = false
                    gettableData()
                }).finally(() => {
                    loadingshowzh.value = false
                })
            } else {
                postApi(Fromobj.value, '/mosty-base/module/editGroup').then(res => {
                    ElMessage.success("修改成功");
                    dialogVisible.value = false
                    gettableData()
                }).finally(() => {
                    loadingshowzh.value = false
                })
            }

        } else {
            ElMessage.error("请输入必填项!");
        }
    });
};

function handleClose() {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
        .then(() => {

            Fromobj.value = {}
            dialogVisible.value = false
        })
        .catch(() => {
            // catch error
        })
}
</script>

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