<template>
    <div @contextmenu.prevent="onContextMenu">
        <a-table
            :columns="columns"
            :data-source="dataSource"
            class="order-table"
            bordered
            :scroll="{ x: true, y: 400 }"
            :pagination="false"
        >
            <template>
                <a>Delete</a>
            </template>
            <template #expandedRowRender="{ record }">
                <p style="margin: 0">{{ record.description }}</p>
            </template>
        </a-table>
        <contextMenu :contextMenu="context" @update="updateContextMenu" />
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, PropType } from 'vue';
import contextMenu from '@/common/components/contextMenu/index.vue';
import { ContextMenu, MenuItem } from '@/common/components/contextMenu/interface';

// 右键事件
function handleContextMenu(props: any) {
    const context = reactive<ContextMenu>({
        position: { clientX: 0, clientY: 0 },
        show: false,
        menuList: [],
        selectedData: null,
    });
    function onContextMenu(value: MouseEvent) {
        const target = value.target as any;
        // 获取点击表格的 tr  所在的 索引位置
        const index = target.parentElement.rowIndex;
        const { clientX, clientY } = value;
        Object.assign(context.position, { clientX, clientY });
        context.show = true;
        context.selectedData = props.dataSource[index];
    }
    // 关闭右键弹窗
    function updateContextMenu(value: boolean) {
        context.show = value;
    }
    return { context, onContextMenu, updateContextMenu };
}

export default defineComponent({
    components: {
        contextMenu,
    },
    props: {
        columns: {
            default: [],
            type: Array,
        },
        dataSource: {
            default: [],
            type: Array,
        },
        contextMenuList: {
            default: [],
            type: Object as PropType<MenuItem[]>,
        },
    },
    setup(props) {
        const { context, onContextMenu, updateContextMenu } = handleContextMenu(props);
        context.menuList = props.contextMenuList;
        return {
            onContextMenu,
            context,
            updateContextMenu,
        };
    },
});
</script>
<style lang="less">
.order-table {
    .ant-table-fixed {
        width: max-content !important;
        color: @m-white1;
        background: @m-black2;
        border-top-color: @m-black2 !important;
        border-left-color: @m-black9 !important;
    }
    .ant-table-thead {
        tr th {
            background: @m-black8;
            color: @m-grey17;
            font-size: 14px;
            font-family: Adobe Heiti Std;
        }
    }
    .ant-table-tbody > tr {
        height: 40px;
    }
    .ant-table-tbody .ant-table-row-hover td {
        background: @m-blue3 !important;
    }
    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
        background: @m-blue3;
    }
    .ant-table-bordered .ant-table-thead > tr > th,
    .ant-table-bordered .ant-table-tbody > tr > td {
        padding: 0;
        height: 34px;
        line-height: 34px;
        border-color: @m-black9;
        font-family: Adobe Heiti Std;
        font-size: 16px;
    }
    ant-table-bordered .ant-table-thead > tr > th,
    .ant-table-bordered .ant-table-tbody > tr > td {
        padding: 0;
        height: 34px;
        line-height: 34px;
        border-color: @m-black9;
        font-family: Adobe Heiti Std;
        font-size: 16px;
    }
    .ant-table-row-expand-icon {
        width: 14px;
        height: 14px;
        line-height: 9px;
        border: 1px solid @m-blue2;
        border-radius: 3px;
        background: inherit;
    }
    .ant-table-row-collapsed::after,
    .ant-table-row-expanded::after {
        color: @m-blue2;
    }

    .ant-table-expanded-row,
    .ant-table-expanded-row:hover {
        background: @m-black10;
    }
}
</style
>;
