<template>
    <app-view class="system-menu">
        <app-table ref="tableRef" :data="dataList" v-model:columns="columns" row-key="code" :selection="false">
            <template #header>
                <app-auth-operation :menus="['system_menu_add']" />
                <el-button type="primary" :icon="isRowExpansion ? 'FolderOpened' : 'Folder'" @click="tableExpandAll">
                    <span v-if="isRowExpansion">全部收起</span>
                    <span v-else>全部展开</span>
                </el-button>
            </template>
            <template #operate="{ row }">
                <app-auth-operation :menus="['system_menu_edit', 'system_menu_delete']" :options="{ selectedRow: row }"
                    linkButton />
            </template>
        </app-table>
    </app-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useDataTable } from '@/hooks/datatable'
import { useMenu } from '@/hooks/menu'
import AppAuthOperation from '@pc/components/modules/auth-operation/index.vue'
import AppTable from '@pc/components/base/table/index.vue'

const { userMenus } = useMenu()
const { dataList = userMenus } = useDataTable<Model.UserMenu>()
const tableRef = ref()
const isRowExpansion = ref(false)

const columns = ref([
    {
        prop: 'title',
        label: '菜单',
        show: true,
    },
    {
        prop: 'code',
        label: '代码',
        show: true,
    },
    {
        prop: 'component',
        label: '组件',
        show: true,
    },
    {
        prop: 'icon',
        label: '图标',
        show: true,
    },
    {
        prop: 'operate',
        label: '操作',
        show: true,
    }
])

// 展开或收起表格
const tableExpandAll = () => {
    const table = tableRef.value.elTable
    isRowExpansion.value = !isRowExpansion.value

    const toggleRowExpansionAll = (data: Model.UserMenu[]) => {
        data.forEach((item) => {
            table.toggleRowExpansion(item, isRowExpansion.value)
            if (item.children) {
                toggleRowExpansionAll(item.children)
            }
        })
    }

    toggleRowExpansionAll(dataList.value)
}
</script>

<style lang="less">
@import './index.less';
</style>