<script setup>
import Avatar from '../../static/images/banner占位.png';
import MAICON from '../../static/icons/打码.png';
import SQ from '../../static/icons/搜索.png';
import XNav from "../../components/XNav.vue";
import filer from "../../static/icons/filer-balck.png";
import XFilter from "../../components/XFilter.vue";
import {reactive, ref, watch} from "vue";
import XFilterItem from "../../components/XFilterItem.vue";
import XRadioGroup from "../../components/XRadioGroup.vue";
import XRadio from "../../components/XRadio.vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";

const isVague = ref(false);
const showFilter = ref(false);
const isSearch = ref(false);
const po = reactive({
    status: 0,
    keyword: null,
    type: 0,
    order: 0,
});
const vo = reactive({
    income: 0,
    reward: 0,
    total: 0,
});

const {initFetchData} = useTableQuery({
    api: Api.system.myTeamList,
    parameter: po,
    uuid: true,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

watch(
    () => po.status,
    () => initFetchData(),
    {deep: true}
)

const handleSeach = async () => {
    if (po.keyword === null || po.keyword === "") isSearch.value = false;
    await initFetchData();
}
</script>

<template>
    <!--变动记录-->
    <x-nav></x-nav>

    <x-filter
        v-model:model="po"
        @success="initFetchData"
        v-model:visible="showFilter">
        <x-filter-item label="成员类型">
            <x-radio-group v-model:model-value="po.type">
                <view class="!grid grid-cols-3 gap-[24rpx]">
                    <x-radio :value="0">我邀请的</x-radio>
                    <x-radio :value="1">他人邀请的</x-radio>
                </view>
            </x-radio-group>
        </x-filter-item>
        <x-filter-item label="排序类型">
            <x-radio-group v-model:model-value="po.order">
                <view class="!grid grid-cols-3 gap-[24rpx]">
                    <x-radio :value="0">按收益</x-radio>
                    <x-radio :value="1">加入时间正序</x-radio>
                    <x-radio :value="2">加入时间倒序</x-radio>
                </view>
            </x-radio-group>
        </x-filter-item>
    </x-filter>

    <view class="py-[28rpx] !flex justify-evenly bg-[#fff]">
        <view class="top-filter top-filter-cur">我邀请的</view>
        <view class="w-[4rpx] bg-[#E5E6EB]"></view>
        <view class="top-filter top-filter-cur">按收益排序</view>
        <view class="w-[4rpx] bg-[#E5E6EB]"></view>
        <view class="top-filter" @click="showFilter=true">
            <image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
            筛选
        </view>
    </view>

    <view class="!mx-[20rpx] bg-[#fff] rounded-[20rpx] !mt-[20rpx]">
        <view class="balance-card">
            <view class="p-[24rpx] !flex items-center gap-[20rpx]">
                <view :class="['radio', po.status===1?'radio-cur':'']" @click="po.status=1">今天</view>
                <view :class="['radio', po.status===2?'radio-cur':'']" @click="po.status=2">昨天</view>
                <view :class="['radio', po.status===0?'radio-cur':'']" @click="po.status=0">累计</view>
            </view>
            <view class="gap-line"></view>
            <view class="py-[52rpx] px-[44rpx] !grid grid-cols-3">
                <view>
                    <view class="info-title">新增成员(个)</view>
                    <view class="info-balance">
                        {{ vo.total }}
                    </view>
                </view>
                <view>
                    <view class="info-title">团队收益(元)</view>
                    <view class="info-balance">
                        {{ vo.income.toFixed(2) }}
                    </view>
                </view>
                <view>
                    <view class="info-title">团队奖励(元)</view>
                    <view class="info-balance">
                        {{ vo.reward.toFixed(2) }}
                    </view>
                </view>
            </view>
        </view>
    </view>

    <view class="!mt-[40rpx] px-[20rpx] !flex items-center gap-[20rpx]">
        <view class="sjmx">数据明细</view>

        <view class="btn !ml-auto" @click="isVague=!isVague">
            <image class="!size-[28rpx]" mode="aspectFill" :src="MAICON"></image>
            {{ isVague ? '取消' : '一键' }}打码
        </view>
        <view :class="['btn', isSearch?'search':'']" @click="isSearch=true">
            <image class="!size-[28rpx] flex-shrink-0" mode="aspectFill" :src="SQ"></image>
            <text v-if="!isSearch">搜索</text>
            <input v-model="po.keyword" @blur="handleSeach" v-else></input>
        </view>
    </view>

    <view class="p-[20rpx] !flex flex-col gap-[20rpx]">
        <view v-for="v in vo.rows" class="rounded-[8rpx] bg-[#fff] p-[24rpx] flex-grow">
            <view :class="['!flex gap-[18rpx]', isVague?'vague':'']">
                <image class="!size-[88rpx] rounded-[16rpx]" :src="v.avatar" mode="aspectFill"></image>
                <view class="flex-grow h-full !flex flex-col justify-between gap-[14rpx]">
                    <view class="!flex justify-between items-center">
                        <view class="test-28r">{{ v.nickname }}</view>
                        <view class="text-[#86909C] test-24r">{{ v.createtime }} 加入</view>
                    </view>
                    <view class="!flex flex-wrap">
                        <view class="py-[3rpx] px-[8rpx] test-20r bg-[#F2F3F5]">id：{{ v.uid }}</view>
                    </view>
                </view>
            </view>
            <view class="!flex gap-[22rpx] !mt-[20rpx]">
                <view class="!flex items-center py-[10rpx] px-[20rpx] bg-[#E8F3FF] flex-grow test-24r">
                    <view>收益：</view>
                    <view class="text-[var(--primary-color)]">{{ Number(v.income).toFixed(2) }}</view>
                </view>
                <view
                    :class="['!flex items-center py-[10rpx] px-[20rpx] bg-[#E8F3FF] flex-grow test-24r', isVague?'vague':'']">
                    <view>奖励：</view>
                    <view class="text-[var(--primary-color)]">{{ Number(v.reward).toFixed(2) }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.search {
    width: 300rpx;
}

.vague {
    filter: blur(4px);
}

.btn {
    padding: 8rpx 32rpx;
    color: var(--primary-color);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    border-radius: 999rpx;
    border: 1px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.sjmx {
    color: rgb(29, 33, 41);
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
}

.top-filter {
    color: rgb(29, 33, 41);
    font-size: 28rpx;
    line-height: 22px;
    letter-spacing: 0;
}

.top-filter-cur {
    color: var(--primary-color);
}

.balance-card {
    border-radius: 20rpx;
    background: linear-gradient(90.00deg, rgb(109, 154, 225) 2.278%, rgb(98, 147, 224) 98.521%);

    .radio {
        color: rgb(255, 255, 255);
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: 0;
        padding: 10rpx 32rpx;
        transition: 300ms;
    }

    .radio-cur {
        background-color: #ffffff;
        border-radius: 999rpx;
        color: var(--primary-color);
    }

    .gap-line {
        height: 2px;
        width: 100%;
        background-color: rgba(232, 243, 255, 0.14);
    }

    .info-title {
        color: rgb(190, 218, 255);
        font-size: 24rpx;
        font-weight: 400;
        letter-spacing: 0;
        margin-bottom: 16rpx;
    }

    .info-balance {
        color: rgb(255, 255, 255);
        font-size: 40rpx;
        font-weight: 500;
        line-height: 23px;
        letter-spacing: 0;
    }
}
</style>
