<template>
    <div class="department-management-container auto-height-container">
        <vab-query-form>
            <vab-query-form-left-panel :span="12">
                <el-button
                    :icon="Plus"
                    type="primary"
                    @click="handleEdit($event)"
                >
                    添加
                </el-button>
                <el-button
                    :icon="Delete"
                    type="danger"
                    @click="handleDelete($event)"
                >
                    批量删除
                </el-button>
            </vab-query-form-left-panel>
            <vab-query-form-right-panel :span="12">
                <el-form inline :model="queryForm" @submit.prevent>
                    <el-form-item>
                        <el-input
                            v-model.trim="queryForm.name"
                            clearable
                            placeholder="请输入名称"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            :icon="Search"
                            type="primary"
                            @click="queryData"
                        >
                            查询
                        </el-button>
                    </el-form-item>
                </el-form>
            </vab-query-form-right-panel>
        </vab-query-form>

        <el-table
            v-loading="listLoading"
            border
            :data="list"
            default-expand-all
            row-key="id"
            :tree-props="{ children: 'children' }"
            @selection-change="setSelectRows"
        >
            <el-table-column show-overflow-tooltip type="selection" />
            <el-table-column label="名称" prop="name" show-overflow-tooltip />
            <el-table-column
                label="父节点Id"
                prop="parentId"
                show-overflow-tooltip
            />
            <el-table-column label="排序" prop="order" show-overflow-tooltip />
            <el-table-column
                label="创建时间"
                prop="createTime"
                show-overflow-tooltip
            />
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button text type="primary" @click="handleEdit(row)">
                        编辑
                    </el-button>
                    <el-button
                        :disabled="!row.parentId"
                        text
                        type="primary"
                        @click="handleDelete({ row })"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
            <template #empty>
                <!--  <el-image
          class="vab-data-empty"
          :src="require('@/assets/empty_images/data_empty.png')"
        /> -->
                <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
        </el-table>
        <el-pagination
            background
            :current-page="queryForm.pageNo"
            :layout="layout"
            :page-size="queryForm.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
        <edit ref="editRef" @fetch-data="fetchData" />
    </div>
</template>

<script>
    import { Delete, Plus, Search } from '@element-plus/icons-vue'
    import { doDelete, getList } from '@/api/departmentManagement'

    export default defineComponent({
        name: 'DepartmentManagement',
        components: {
            Edit: defineAsyncComponent(
                () => import('./components/DepartmentManagementEdit')
            ),
        },
        setup() {
            const $baseConfirm = inject('$baseConfirm')
            const $baseMessage = inject('$baseMessage')

            const state = reactive({
                editRef: null,
                list: [],
                listLoading: true,
                layout: 'total, sizes, prev, pager, next, jumper',
                total: 0,
                selectRows: '',
                queryForm: {
                    pageNo: 1,
                    pageSize: 10,
                    title: '',
                },
            })

            const setSelectRows = (val) => {
                state.selectRows = val
            }
            const handleEdit = (row) => {
                if (row.id) {
                    state.editRef.showEdit(row)
                } else {
                    state.editRef.showEdit()
                }
            }
            const handleDelete = (row) => {
                if (row.id) {
                    $baseConfirm('你确定要删除当前项吗', null, async () => {
                        const { msg } = await doDelete({ ids: row.id })
                        $baseMessage(msg, 'success', 'vab-hey-message-success')
                        await fetchData()
                    })
                } else {
                    if (state.selectRows.length > 0) {
                        const ids = state.selectRows
                            .map((item) => item.id)
                            .join(',')
                        $baseConfirm('你确定要删除选中项吗', null, async () => {
                            const { msg } = await doDelete({ ids })
                            $baseMessage(
                                msg,
                                'success',
                                'vab-hey-message-success'
                            )
                            await fetchData()
                        })
                    } else {
                        $baseMessage(
                            '未选中任何行',
                            'error',
                            'vab-hey-message-error'
                        )
                    }
                }
            }
            const handleSizeChange = (val) => {
                state.queryForm.pageSize = val
                fetchData()
            }
            const handleCurrentChange = (val) => {
                state.queryForm.pageNo = val
                fetchData()
            }
            const queryData = () => {
                state.queryForm.pageNo = 1
                fetchData()
            }
            const fetchData = async () => {
                state.listLoading = true
                const {
                    data: { list, total },
                } = await getList(state.queryForm)
                state.list = list
                state.total = total
                state.listLoading = false
            }
            onMounted(() => {
                fetchData()
            })

            return {
                ...toRefs(state),
                setSelectRows,
                handleEdit,
                handleDelete,
                handleSizeChange,
                handleCurrentChange,
                queryData,
                fetchData,
                Delete,
                Plus,
                Search,
            }
        },
    })
</script>
