<template>
    <div class="finance-report">
        <el-card class="report-card" shadow="never">
            <div class="platform-tabs">
                <button v-for="item in platforms" :key="item" class="text-tab" :class="{ active: platform === item }"
                    @click="platform = item">
                    {{ item }}
                </button>
            </div>
            <div class="flex items-center gap-10 flex-wrap mt-16">
                <el-input v-model="keyword" class="w-180" placeholder="请输入账户名称/ID" clearable />
                <el-select v-model="department" class="w-150" placeholder="请选择部门">
                    <el-option label="A部门" value="A部门" />
                    <el-option label="未绑定部门" value="未绑定部门" />
                </el-select>
                <el-select v-model="group" class="w-150" placeholder="请选择分组">
                    <el-option label="核心一组" value="核心一组" />
                    <el-option label="未绑定分组" value="未绑定分组" />
                </el-select>
                <el-select v-model="account" class="w-150" placeholder="请选择账号">
                    <el-option label="张伟" value="张伟" />
                    <el-option label="未绑定账号" value="未绑定账号" />
                </el-select>
                <el-select v-model="category" class="w-150" placeholder="请选择分类">
                    <el-option label="美妆护肤" value="美妆护肤" />
                    <el-option label="洗面奶" value="洗面奶" />
                </el-select>
                <div class="">
                    <el-date-picker v-model="date" class="w-170 mr-10" type="date" placeholder="选择时间" />
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </div>
            </div>
        </el-card>
        <el-card class="report-card mt-16" shadow="never">
            <div class="flex-between pb-12 px-6">
                <span class="font-bold">详细数据</span>
                <el-button @click="exportData">导出</el-button>
            </div>

            <SeTable :data-list="pagedRows" class="analysis-table" :total="tableRows.length" :default-page-size="pageData.pageSize" @update:page="handleTablePageChange">
                <el-table-column fixed prop="name" label="广告账户" min-width="220">
                    <template #default="{ row }">
                        <div class="font-bold">{{ row.name }}</div>
                        <div v-if="row.id" class="fs-12 color-8aa">{{ row.id }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="department" label="部门" width="110">
                    <template #default="{ row }"><span class="link-text">{{ row.department }}</span></template>
                </el-table-column>
                <el-table-column prop="group" label="分组" width="110">
                    <template #default="{ row }"><span class="link-text">{{ row.group }}</span></template>
                </el-table-column>
                <el-table-column prop="user" label="关联用户" width="110">
                    <template #default="{ row }"><span class="link-text">{{ row.user }}</span></template>
                </el-table-column>
                <el-table-column prop="firstCategory" label="一级分类" width="120">
                    <template #default="{ row }"><span class="link-text">{{ row.firstCategory }}</span></template>
                </el-table-column>
                <el-table-column prop="secondCategory" label="二级分类" width="120">
                    <template #default="{ row }"><span class="link-text">{{ row.secondCategory }}</span></template>
                </el-table-column>
                <el-table-column prop="totalCost" label="总消耗 ⓘ ↑↓" width="140" align="right" />
                <el-table-column prop="walletCost" label="非赠款消耗 ⓘ ↑↓" width="150" align="right" />
                <el-table-column prop="grantCost" label="赠款消耗 ⓘ ↑↓" width="140" align="right" />
                <el-table-column prop="refund" label="消返红包消耗 ⓘ ↑↓" width="160" align="right" />
                <el-table-column prop="sharedWallet" label="共享钱包消耗 ⓘ ↑↓" width="160" align="right" />
                <el-table-column prop="deposit" label="总存入 ⓘ ↑↓" width="130" align="right">
                    <template #default="{ row }"><span class="color-main font-bold">{{ row.deposit }}</span></template>
                </el-table-column>
                <el-table-column prop="transferIn" label="总转入 ⓘ ↑↓" width="130" align="right">
                    <template #default="{ row }"><span class="color-main font-bold">{{ row.transferIn
                            }}</span></template>
                </el-table-column>
                <el-table-column prop="transferOut" label="总转出 ↑↓" width="130" align="right" />
                <el-table-column prop="balance" label="总余额 ↑↓" width="140" align="right">
                    <template #default="{ row }"><span class="color-green font-bold">{{ row.balance }}</span></template>
                </el-table-column>
                <el-table-column prop="grantBalance" label="赠款余额 ↑↓" width="140" align="right" />
                <el-table-column prop="cashBalance" label="非赠款余额 ↑↓" width="150" align="right" />
                <el-table-column prop="standardCost" label="标准消耗" width="130" align="right" />
                <el-table-column prop="globalCost" label="全域消耗" width="130" align="right" />
                <el-table-column prop="remark" label="备注" width="100" align="center" />
            </SeTable>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';

const platform = ref('巨量千川');
const keyword = ref('');
const department = ref('');
const group = ref('');
const account = ref('');
const category = ref('');
const date = ref('');
const pageData = reactive({
    currentPage: 1,
    pageSize: 50,
    pageSizes: [10, 20, 50, 100],
});

const platforms = ['巨量千川', '巨量广告'];
const tableRows = [
    { name: '总计', id: '', department: '-', group: '-', user: '-', firstCategory: '-', secondCategory: '-', totalCost: '323165.40', walletCost: '319208.88', grantCost: '3956.52', refund: '0.00', sharedWallet: '0.00', deposit: '3588.16', transferIn: '566500.00', transferOut: '100000.00', balance: '1638168.22', grantBalance: '70439.87', cashBalance: '1567728.35', standardCost: '0.00', globalCost: '103725.62', remark: '-' },
    { name: '青简-元素-持之以恒', id: '1862066464789898', department: '未绑定部门', group: '未绑定分组', user: '未绑定账号', firstCategory: '未绑定分类..', secondCategory: '未绑定分类', totalCost: '92393.53', walletCost: '90523.42', grantCost: '1870.11', refund: '0', sharedWallet: '0', deposit: '1870.11', transferIn: '100000.00', transferOut: '0.00', balance: '88527.53', grantBalance: '0.00', cashBalance: '88527.53', standardCost: '0', globalCost: '0.00', remark: '-' },
    { name: '书意-RICH-扶摇直上九万里', id: '1839701482129801', department: '未绑定部门', group: '未绑定分组', user: '未绑定账号', firstCategory: '未绑定分类..', secondCategory: '未绑定分类', totalCost: '68531.65', walletCost: '68202.75', grantCost: '328.90', refund: '0', sharedWallet: '0', deposit: '328.90', transferIn: '100000.00', transferOut: '0.00', balance: '140294.48', grantBalance: '0.00', cashBalance: '140294.48', standardCost: '0', globalCost: '68351.04', remark: '-' },
    { name: '兰君-母理-绿单888', id: '1843476828396544', department: '未绑定部门', group: '未绑定分组', user: '未绑定账号', firstCategory: '未绑定分类..', secondCategory: '未绑定分类', totalCost: '38148.62', walletCost: '37734.20', grantCost: '414.42', refund: '0', sharedWallet: '0', deposit: '414.42', transferIn: '52500.00', transferOut: '0.00', balance: '55533.17', grantBalance: '0.00', cashBalance: '55533.17', standardCost: '0', globalCost: '0.00', remark: '-' },
    { name: '素棉-母理-绿米花', id: '1868511341739399', department: '未绑定部门', group: '未绑定分组', user: '未绑定账号', firstCategory: '未绑定分类..', secondCategory: '未绑定分类', totalCost: '21948.51', walletCost: '21948.51', grantCost: '0.00', refund: '0', sharedWallet: '0', deposit: '0.00', transferIn: '0.00', transferOut: '0.00', balance: '38610.93', grantBalance: '0.00', cashBalance: '38610.93', standardCost: '0', globalCost: '0.00', remark: '-' },
    { name: '初理-惠理-跑量', id: '1851290312019482', department: 'A部门', group: '核心一组', user: '张伟', firstCategory: '美妆护肤', secondCategory: '洗面奶', totalCost: '102143.09', walletCost: '100800.00', grantCost: '1343.09', refund: '0', sharedWallet: '0', deposit: '974.73', transferIn: '314000.00', transferOut: '100000.00', balance: '1315202.11', grantBalance: '70439.87', cashBalance: '1244762.24', standardCost: '0', globalCost: '35374.58', remark: '-' },
];

const pagedRows = computed(() => {
    const start = (pageData.currentPage - 1) * pageData.pageSize;
    return tableRows.slice(start, start + pageData.pageSize);
});

const query = () => ElMessage.success('查询完成');
const exportData = () => ElMessage.success('已生成导出任务');
const reset = () => {
    keyword.value = '';
    department.value = '';
    group.value = '';
    account.value = '';
    category.value = '';
    date.value = '';
};
const handleTablePageChange = (page: number, size: number) => {
    pageData.currentPage = page;
    pageData.pageSize = size;
};
</script>

<style scoped lang="scss">
.report-card {
    border: 1px solid #dfe7f2;
    border-radius: 8px;
}

.platform-tabs {
    display: flex;
    gap: 34px;
    border-bottom: 1px solid #edf0f5;
}

.text-tab {
    padding-bottom: 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #3f5574;
    font-weight: 700;
    cursor: pointer;

    &.active {
        color: rgba(var(--main-color), 1);
        border-bottom-color: rgba(var(--main-color), 1);
    }
}

.w-150 {
    width: 150px;
}

.w-170,
.w-180 {
    width: 180px;
}

.analysis-table {
    :deep(.el-table__header th) {
        background: #f5f5f5;
        color: #888;
        padding: 12px 0;
    }
}

.color-main {
    color: rgba(var(--main-color), 1);
}

.color-green {
    color: #00a86b;
}

.color-8aa {
    color: #8aa0bf;
}

.scroll-bar {
    height: 5px;
    margin: 10px 0 14px;
    border-radius: 999px;
    background: #dfe7f2;
}
</style>
