<template>
    <my-table
        url="/api/v1/menus"
        :addBtn="addBtn"
        :formatData="formatData"
        rowKey="menuId"
        noPage
        ref="table"
    >
        <template #drawer>
            <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 :url="`/api/v1/menus/${row.menuId}`" :cb="refreshTable" />
            </template>
        </a-table-column>
    </my-table>
</template>

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

export default {
    data: vm => ({
        addBtn: {
            text: '新建',
            onOk() {
                return vm.$refs['addForm']?.submit();
            },
        },
        sortOrder: 'ascend',
    }),

    components: { PopconfirmDelete, Form },

    methods: {
        formatData: convertListToTree,
        refreshTable() {
            this.$refs['table'].getData();
        },
        sorter(pre, next) {
            return pre.viewIndex - next.viewIndex;
        },
        edit(data) {
            this.$refs['table']?.show({ type: 1 });
            this.$nextTick(() => {
                this.$refs['addForm'].setEdit(data);
            });
        },
    },
};
</script>
