import { ContextMenuTemp } from "@/common/components/contextMenu/interface";
import { ref } from "vue";
import { TableEventCB } from './interface';

/**
 * 表格事件
 * @param param TableEventCB
 * @returns
 */
export function getTableEvent<T>(param: TableEventCB = {}) {
    // 表格展开行
    const expandedRowKeys = ref<string[]>([]);
    // 表格选中的数据
    const selectedRow = ref<T>()
    // 右键数据
    const contextMenu = ref<ContextMenuTemp>({
        position: { clientX: 0, clientY: 0 },
        show: false,
    })
    function Rowclick(record: T, index: number) {
        return {
            onClick: () => {  // 表格点击
                selectedRow.value = record
                const key = (record as any).key
                // 控制表格折腾面板
                const value = expandedRowKeys.value;
                if (value && value.length && value[0] === key) {
                    expandedRowKeys.value = []
                } else {
                    expandedRowKeys.value = [key]
                }
                param.clickCB && param.clickCB(record)
            },
            // onDblclick: () => { // 双击
            //     console.log('onDblclick');
            // },
            onContextmenu: (event: MouseEvent) => {  // 表格右键
                selectedRow.value = record
                const { clientX, clientY } = event;
                const value = {
                    position: { clientX, clientY },
                    show: true,
                }
                param.contextmenuCB && param.contextmenuCB(record, value)
            },
        };
    }
    // 处理表格展开行 数据不会及时更新问题
    function btnClick(record: T) {
        selectedRow.value = record
    }
    // 关闭右键
    function closeContext() {
        contextMenu.value.show = false
    }

    return { expandedRowKeys, selectedRow, Rowclick, btnClick, contextMenu, closeContext }
}

