<script setup>
import filer from '../../static/icons/filer.png';
import XNav from "../../components/XNav.vue";
import {reactive, ref, computed} from "vue";
import TaskCard from "../../components/TaskCard.vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";
import XFilter from "../../components/XFilter.vue";
import XFilterItem from "../../components/XFilterItem.vue";
import XRadioGroup from "../../components/XRadioGroup.vue";
import XRadio from "../../components/XRadio.vue";
import XDateRange from "../../components/XDateRange.vue";
import XAlert from "../../components/XAlert.vue";
import {onShow} from "@dcloudio/uni-app";
import dayjs from "dayjs";

const taskType = reactive([]);
const platformType = reactive([]);
const tabs = computed(() => [
    {
        name: '进行中',
        value: 1,
        isTag: 0,
    },
    {
        name: '审核中',
        value: 2,
        isTag: 0,
    },
    {
        name: '已失败',
        value: -1,
        isTag: 0,
    },
    {
        name: '已完成',
        value: 3,
        isTag: 0,
    },
]);
const showFilter = ref(false);
const po = reactive({
    status: 1,
    cid: 0,
    pid: 0,
    is_settlement: 0,
    end_time: dayjs().add(1, 'month').format("YYYY-MM-DD"),
    start_time: dayjs().format("YYYY-MM-DD"),
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});

const {loading, pagination, initFetchData} = useTableQuery({
    api: Api.system.myTaskList,
    immediate: false,
    parameter: po,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

Api.system.getTaskType().then(({data}) => {
    taskType.length = 0;
    taskType.push(...data);
});
Api.system.getPlatform().then(({data}) => {
    platformType.length = 0;
    platformType.push(...data);
});

const changeCurrent = async (item) => {
    po.status = item.value;
    await initFetchData();
}

onShow(() => {
    initFetchData();
});
</script>

<template>
    <!--我的任务-->
    <XNav :show-back="false"></XNav>

    <x-filter
        v-model:model="po"
        @init="() => {
            po.status = 1;
            po.start_time = dayjs().format('YYYY-MM-DD');
            po.end_time = dayjs().add(1, 'month').format('YYYY-MM-DD');
        }"
        @success="initFetchData"
        v-model:visible="showFilter">
        <x-filter-item label="任务类型">
            <x-radio-group v-model:model-value="po.cid">
                <view class="!grid grid-cols-4 gap-[24rpx]">
                    <x-radio v-for="v in taskType" :key="v.id" :value="v.id">{{ v.name }}</x-radio>
                </view>
            </x-radio-group>
        </x-filter-item>
        <x-filter-item label="发布平台">
            <x-radio-group v-model:model-value="po.pid">
                <view class="!grid grid-cols-4 gap-[24rpx]">
                    <x-radio v-for="v in platformType" :key="v.id" :value="v.id">{{ v.name }}</x-radio>
                </view>
            </x-radio-group>
        </x-filter-item>
        <x-filter-item label="结算状态">
            <x-radio-group v-model:model-value="po.is_settlement">
                <view class="!grid grid-cols-4 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-item label="选择时间段">
            <x-date-range
                v-model:end-time="po.end_time"
                v-model:start-time="po.start_time">
            </x-date-range>
        </x-filter-item>
    </x-filter>

    <scroll-view
        @refresherpulling="initFetchData()"
        @scrolltolower="pagination.current++"
        class="h-[calc(100vh-200rpx)]"
        scroll-y>
        <view class="relative">
            <view class="!w-full !h-[414rpx] bg-[var(--primary-color)] bor-b-r !absolute">
            </view>

            <view class="!grid grid-cols-4 bg-[#4080FF] py-[20rpx] text-[13px] text-[#fff] relative z-10">
                <view class="!w-full text-center !flex justify-center items-center">全部任务</view>
                <view class="!w-full text-center !flex justify-center items-center">全部平台</view>
                <view class="!w-full text-center !flex justify-center items-center">全部状态</view>
                <view class="!w-full text-center !flex justify-center items-center">
                    <view
                        @click="showFilter=true"
                        class="!flex items-center justify-center gap-[10rpx] !py-[10rpx] !px-[30rpx] bg-[#0E42D2] rounded-[8rpx]">
                        <image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
                        筛选
                    </view>
                </view>
            </view>

            <view class="!p-[20rpx] !pb-0 relative z-10">
                <view class="rounded-[12rpx] !p-[20rpx] bg-[#fff]">
                    <view class="!flex items-center justify-between">
                        <view class="stic-title">| 数据概览</view>
                        <view class="stic-date">
                            {{ dayjs(po.start_time).format("YYYY.MM.DD") }}-{{
                                dayjs(po.end_time).format("YYYY.MM.DD")
                            }}
                        </view>
                    </view>

                    <view class="!mt-[20rpx] !grid grid-cols-2 grid-rows-2 gap-[20rpx]">
                        <view
                            class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
                            <view class="block-title">接受任务数</view>
                            <view class="block-value">{{ vo.all }}</view>
                        </view>
                        <view
                            class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
                            <view class="block-title">预估收益(元)</view>
                            <view class="block-value">{{ vo.count.toFixed(2) }}</view>
                        </view>
                        <view
                            class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
                            <view class="block-title">完成任务数</view>
                            <view class="block-value">{{ vo.complete }}</view>
                        </view>
                        <view
                            class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
                            <view class="block-title !flex gap-[6rpx] items-center">
                                到账收益(元)
                                <x-alert btnText="知道了" btnColor="#165DFF">
                                    <tui-icon name="explain" :size="16"></tui-icon>
                                    <template #context>
                                        <view style="font-size: 32rpx;font-weight: 500" class="!mb-[30rpx]">
                                            到账收益
                                        </view>
                                        <view style="font-size: 28rpx;font-weight: 400" class="text-[rgb(78,89,105)]">
                                            根据您的任务完成情况
                                        </view>
                                        <view style="font-size: 28rpx;font-weight: 400"
                                              class="text-[rgb(78,89,105)] !mt-[10rpx]">
                                            实际获得的收益
                                        </view>
                                    </template>
                                </x-alert>
                            </view>
                            <view class="block-value">{{ vo.real_coin.toFixed(2) }}</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="!grid grid-cols-4 gap-[20rpx] !px-[20rpx] bg-[#F2F3F5] py-[20rpx]">
                <view
                    v-for="(item, index) in tabs"
                    @click="changeCurrent(item)"
                    :class="['rounded-full bg-[#fff] text-center !py-[8rpx] !text-[13px] duration-500', po.status===item.value ? 'current' : '', vo[`count${index+1}`] > 0 ? 'badge' : '']">
                    {{ item.name }}
                </view>
            </view>

            <view class="!flex flex-col gap-[20rpx] !px-[20rpx]">
                <TaskCard v-for="i in vo.rows" :key="i.id" :data="i"></TaskCard>

                <tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
            </view>
        </view>
    </scroll-view>
</template>

<style lang="scss" scoped>
.current {
    background-color: #165DFF;
    color: #fff;
}

.badge {
    @apply relative;
}

.badge::before {
    content: '';
    display: block;
    width: 15rpx;
    height: 15rpx;
    background-color: red;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 50%;
}

.block-value {
    color: rgb(22, 93, 255);
    font-size: 40rpx;
    font-weight: 500;
    line-height: 23px;
    letter-spacing: 0;
    text-align: left;
}

.block-title {
    color: rgb(29, 33, 41);
    font-size: 24rpx;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}

.bor-b-r {
    border-bottom-left-radius: 12rpx;
    border-bottom-right-radius: 12rpx;
}

.stic-title {
    color: rgb(29, 33, 41);
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}

.stic-date {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}
</style>
