<template>
    <div style="margin: 20px;">
        <a-card title="我的邀请">
            <div style="border-radius: 5px;display: flex;justify-content: space-between;border: 1px solid #e8e8e8;">
                <div>
                    <div style="font-size:18px;padding: 0 20px;margin-top: 20px;">累计奖金</div>
                    <div style="font-size:18px;font-weight: bold;padding: 0 20px;margin: 20px 0;">￥0.00</div>
                    <div
                        style="display: flex;justify-content: space-between;align-items: center;gap: 60px;padding: 0 20px;line-height: 30px;">
                        <div>
                            <div>方式一：复制邀请链接</div>
                            <div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                                    style="color:#1677ff;">
                                    <CopyOutlined />
                                </span></div>
                        </div>
                        <div>
                            <div>方式二：复制邀请码</div>
                            <div><span>http://example.com/invite/123456</span>&nbsp;&nbsp;&nbsp;&nbsp;<span
                                    style="color:#1677ff;">
                                    <CopyOutlined />
                                </span></div>
                        </div>
                    </div>
                </div>
                <div class="leftImg">
                    <div style="font-size:14px;padding: 0 20px;margin-top: 10px;text-align: right;color: #1677ff;">活动规则
                    </div>
                </div>
            </div>
            <div
                style="width: 100%;display: flex;justify-content: space-around;align-items: center;height: 150px;border: 1px solid #e8e8e8;margin-top: 20px;border-radius: 5px;">
                <div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;">
                    <div>累计成功邀请人数</div>
                    <div><span style="font-weight: bold;font-size: 18px;">0</span> 人</div>
                </div>
                <div style="display: flex;flex-direction: column;align-items: center;line-height: 35px;">
                    <div>累计获得奖金</div>
                    <div style="font-weight: bold;">￥<span style="font-weight: bold;font-size: 18px;">0.00</span></div>
                </div>
            </div>
            <!-- 账单表格 -->
            <div style="margin-top: 20px;">
                <div style="margin: 30px 0px 10px 0px;font-weight: bold;">邀请记录</div>
                <a-table :columns="columns" :data-source="billData" :pagination="pagination" @change="handleTableChange"
                    :loading="loading" class="bill-table" :scroll="{ x: 1200 }" bordered>
                </a-table>
            </div>
        </a-card>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { CopyOutlined } from '@ant-design/icons-vue';
const loading = ref(false);
const billData = ref([])
const columns = [
    {
        title: '用户名 ',
        dataIndex: 'inviter',
        key: 'inviter',
        width: 200,
    },
    {
        title: '状态',
        dataIndex: 'invitee',
        key: 'invitee',
        width: 200,
    },
    {
        title: '发放时间',
        dataIndex: 'inviteTime',
        key: 'inviteTime',
        width: 150,
    },
    {
        title: '金额',
        dataIndex: 'rewardStatus',
        key: 'rewardStatus',
        width: 100,
    },
    {
        title: '备注',
        dataIndex: 'rewardAmount',
        key: 'rewardAmount',
        width: 200,
    },
];
const pagination = ref({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 条记录`
})
const handleTableChange = (pagination: any) => {
    // 处理表格分页、排序等变化的逻辑
};
</script>
<style scoped>
.leftImg {
    width: 474px;
    height: 200px;
    /* background: #f5f5f5; */
    background: url("@/assets/friend.png") no-repeat center;
    background-size: cover;
}
</style>