<script setup>
import {onMounted, reactive} from "vue";
import Api from "../../../../api/index.js";

const RADIO_LIST = [
    {
        label: '累计',
        value: 0,
    },
    {
        label: '今日',
        value: 1,
    },
    {
        label: '昨日',
        value: 2,
    },
    {
        label: '本周',
        value: 3,
    },
    {
        label: '本月',
        value: 4,
    },
    {
        label: '自定义',
        value: 5,
    },
];

const po = reactive({
    type: 0,
    start_time: null,
    end_time: null,
});
const data = reactive({
    b_withdrawl_all: 0,
    b_withdrawl_all2: 0,
    b_withdrawl_real: 0,
    u_withdrawl_all2: 0,
    server: 0,
    cha: 0,
    complete_money: 0,
    b_withdrawl_success: 0,
    business: 0,
    compute1: 0,
    compute2: 0,
    recharge: 0,
    task: 0,
    u_task: 0,
    u_income_activity: 0,
    u_income_team: 0,
    u_withdrawl_all: 0,
    u_withdrawl_real: 0,
    u_withdrawl_success: 0,
    user: 0
});
const overview = async () => {
    const {data: _data} = await Api.admin.overview(po);
    Object.assign(data, _data);
}

onMounted(() => {
    overview();
})

const handleDate = (e) => {
    po.start_time = e[0];
    po.end_time = e[1];
    overview();
}
</script>

<template>
    <!-- 资金概览 -->
    <div class="mock-card mb-[20px]">
        <div class="flex justify-between mb-[16px]">
            <div class="title">
                资金概览
            </div>

            <div class="flex gap-[24px]">
                <a-radio-group type="button" v-model:model-value="po.type" @change="overview">
                    <a-radio
                        v-for="item in RADIO_LIST"
                        :key="item.value"
                        :value="item.value">
                        {{ item.label }}
                    </a-radio>
                </a-radio-group>
                <a-range-picker
                    v-if="po.type === 5"
                    @change="handleDate"
                />
            </div>
        </div>

        <div class="grid grid-cols-6 gap-[20px]" id="statistic-card">
            <div
                class="bg-[rgb(var(--arcoblue-1))] hover:bg-[rgb(var(--arcoblue-5))] duration-500 p-[20px] statistic-item">
                <a-statistic
                    :value="data.recharge"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        商家充值（含服务款）
                    </template>
                </a-statistic>
            </div>
            <div
                class="bg-[rgb(var(--arcoblue-1))] hover:bg-[rgb(var(--arcoblue-5))] duration-500 p-[20px] statistic-item">
                <a-statistic
                    :value="data.task"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        进行中的任务款
                    </template>
                </a-statistic>
            </div>
            <div
                class="bg-[rgb(var(--arcoblue-1))] hover:bg-[rgb(var(--arcoblue-5))] duration-500 p-[20px] statistic-item">
                <a-statistic
                    :value="data.business"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        商家未提现资金
                    </template>
                </a-statistic>
            </div>
            <div
                class="bg-[rgb(var(--arcoblue-1))] hover:bg-[rgb(var(--arcoblue-5))] duration-500 p-[20px] statistic-item">
                <a-statistic
                    :value="data.user"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        达人未提现资金
                    </template>
                </a-statistic>
            </div>
            <div class="bg-[rgb(var(--orange-1))] hover:bg-[rgb(var(--orange-5))] duration-500 p-[20px] statistic-item">
                <a-statistic
                    :value="data.compute1"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        毛利算法1
                    </template>
                </a-statistic>
            </div>
            <div class="bg-[rgb(var(--orange-1))] hover:bg-[rgb(var(--orange-5))] duration-500 p-[20px] statistic-item">
                <a-statistic
                    :value="data.compute2"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        毛利算法2
                    </template>
                </a-statistic>
            </div>
        </div>
    </div>

    <div class="mock-card mb-[20px]">
        <div class="title mb-[16px]">
            资金概览
        </div>

        <div class="grid grid-cols-6 gap-[20px]">
            <div class="bg-[var(--color-neutral-1)] p-[20px]">
                <a-statistic
                    :value="8.06"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        商户1剩余
                    </template>
                </a-statistic>
            </div>
            <div class="bg-[var(--color-neutral-1)] p-[20px]">
                <a-statistic
                    :value="8.06"
                    :precision="2"
                    :value-from="0"
                    animation>
                    <template #title>
                        商户2剩余
                    </template>
                </a-statistic>
            </div>
        </div>
    </div>

    <div class="flex gap-[20px] box-border mb-[20px]">
        <div class="mock-card flex-grow">
            <div class="title mb-[16px]">
                资金概览
            </div>

            <a-descriptions table-layout="fixed" :column="1">
                <a-descriptions-item>
                    <template #label>
                        <div class="label">任务款已消耗</div>
                    </template>
                    <div class="value">{{ data.complete_money.toFixed(2) }}</div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template #label>
                        <div class="label">任务服务费盈利</div>
                    </template>
                    <div class="value">{{ data.server.toFixed(2) }}</div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template #label>
                        <div class="label">任务差额盈利</div>
                    </template>
                    <div class="value">{{ data.cha.toFixed(2) }}</div>
                </a-descriptions-item>
            </a-descriptions>
        </div>
        <div class="mock-card flex-grow">
            <div class="title mb-[16px]">
                商家
            </div>

            <a-descriptions table-layout="fixed" :column="1">
                <a-descriptions-item>
                    <template #label>
                        <div class="label">商家发起提现</div>
                    </template>
                    <div class="value">{{ data.b_withdrawl_all.toFixed(2) }}</div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template #label>
                        <div class="label">商家提现手续费</div>
                    </template>
                    <div class="value">{{ data.b_withdrawl_all2.toFixed(2) }}</div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template #label>
                        <div class="label">商家提现到手</div>
                    </template>
                    <div class="value">{{ data.b_withdrawl_real.toFixed(2) }}</div>
                </a-descriptions-item>
            </a-descriptions>
        </div>
    </div>

    <a-card>
        <div class="title mb-[16px]">
            达人
        </div>

        <a-descriptions table-layout="fixed" :column="2">
            <a-descriptions-item>
                <template #label>
                    <div class="label">团队激励所得</div>
                </template>
                <div class="value">{{ data.u_income_team.toFixed(2) }}</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">达人发起提现</div>
                </template>
                <div class="value">{{ data.u_withdrawl_all.toFixed(2) }}</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">活动奖励所得</div>
                </template>
                <div class="value">{{ data.u_income_activity.toFixed(2) }}</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">达人提现手续费</div>
                </template>
                <div class="value">{{ data.u_withdrawl_all2.toFixed(2) }}</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">完成任务所得</div>
                </template>
                <div class="value">{{ data.u_task.toFixed(2) }}</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">达人提现到手</div>
                </template>
                <div class="value">{{ data.u_withdrawl_real.toFixed(2) }}</div>
            </a-descriptions-item>
        </a-descriptions>
    </a-card>
</template>

<style lang="scss" scoped>
#statistic-card {
    .statistic-item {
        cursor: pointer;

        &:hover {
            :deep(.arco-statistic) {
                .arco-statistic-title,
                .arco-statistic-content > .arco-statistic-value {
                    color: #fff;
                }
            }
        }

        :deep(.arco-statistic) {
            .arco-statistic-title,
            .arco-statistic-content > .arco-statistic-value {
                transition: 500ms;
            }
        }

        @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
                :deep(.arco-statistic) .arco-statistic-value {
                    color: rgb(var(--#{if($i < 5, 'arcoblue-6', 'orange-5')}));
                }
            }
        }
    }
}

.value {
    color: rgb(29, 33, 41);
    font-family: Nunito Sans, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0;
    text-align: left;
}

.label {
    $color: rgb(78, 89, 105);
    color: $color;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 12px;

    &::before {
        content: '';
        width: 4px;
        height: 4px;
        display: block;
        background-color: $color;
        border-radius: 50%;
    }
}

.title {
    color: rgb(29, 33, 41);
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0;
    text-align: left;
}
</style>
