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

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

            <div>
                <a-radio-group type="button">
                    <a-radio
                        v-for="item in RADIO_LIST"
                        :key="item.value"
                        :value="item.value">
                        {{ item.label }}
                    </a-radio>
                </a-radio-group>
            </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="8.06"
                    :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="8.06"
                    :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="8.06"
                    :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="8.06"
                    :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="8.06"
                    :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="8.06"
                    :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>
                        商家充值（含服务款）
                    </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>
                        商家充值（含服务款）
                    </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">60.00</div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template #label>
                        <div class="label">任务服务费盈利</div>
                    </template>
                    <div class="value">6.00</div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template #label>
                        <div class="label">任务差额盈利</div>
                    </template>
                    <div class="value">30.00</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">60.00</div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template #label>
                        <div class="label">商家提现手续费</div>
                    </template>
                    <div class="value">6.00</div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template #label>
                        <div class="label">商家提现到手</div>
                    </template>
                    <div class="value">30.00</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">60.00</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">商家提现手续费</div>
                </template>
                <div class="value">6.00</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">商家提现到手</div>
                </template>
                <div class="value">30.00</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">商家发起提现</div>
                </template>
                <div class="value">60.00</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">商家提现手续费</div>
                </template>
                <div class="value">6.00</div>
            </a-descriptions-item>
            <a-descriptions-item>
                <template #label>
                    <div class="label">商家提现到手</div>
                </template>
                <div class="value">30.00</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>
