<template>
    <my-table
        url="/api/v1/menus"
        :addBtn="addBtn"
        :formatData="formatData"
        rowKey="menuId"
        noPage
        ref="table"
    >
        <template #search="{query}">
            <a-form-model-item label="菜单、目录名称">
                <a-input v-model="query.name" />
            </a-form-model-item>
        </template>

        <template #add>
            <Form ref="addForm" />
        </template>

        <a-table-column title="名称" data-index="menuName" />
        <a-table-column title="类型" data-index="menuTypeName" />
        <a-table-column title="显示排序" data-index="viewIndex" :sorter="sorter" sortOrder="ascend" />
        <a-table-column title="显示图标" data-index="menuIcon" />
        <a-table-column title="模块URL" data-index="menuUrl" />
        <a-table-column title="操作">
            <template #default="row">
                <a @click="() => edit(row)">编辑</a>
                <a-divider type="vertical" />
                <PopconfirmDelete :onOk="() => delMenu(row.menuId)" />
            </template>
        </a-table-column>
    </my-table>
</template>

<script>
import { convertListToTree } from '@/utils';
import PopconfirmDelete from '@/components/popconfirm_delete/index.vue';
import { delMenuApi } from '@/api';
import Form from './form.vue';

export default {
    data: vm => ({
        addBtn: {
            text: '新建',
            title: '菜单配置',
            width: 400,
            async onOk() {
                await vm.$refs['addForm']?.submit();
                vm.refreshTable();
            },
        },
        sortOrder: 'ascend',
    }),

    components: { PopconfirmDelete, Form },

    methods: {
        formatData: convertListToTree,
        refreshTable() {
            this.$refs['table'].refresh();
        },
        async delMenu(id) {
            await delMenuApi(id);
            this.refreshTable();
        },
        sorter(pre, next) {
            return pre.viewIndex - next.viewIndex;
        },
        edit(data) {
            console.log(data);
            this.$refs['table']?.showAdd();
            this.$nextTick(() => {
                this.$refs['addForm'].setEdit(data);
            });
        },
    },
};
</script>
