<script setup>
import goodsIcon from '../../static/icons/goodsIcon.png';
import XNav from "../../components/XNav.vue";
import { computed, defineAsyncComponent, getCurrentInstance, nextTick, onMounted, reactive, ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import XLink from "../../components/XLink.vue";
import XNoticeBar from "../../components/XNoticeBar.vue";
import XImage from "../../components/XImage.vue";
import Api from "../../api/index.js";
import dayjs from "dayjs";
import XPrompt from "../../components/XPrompt.vue";
import { copy, numberToCharacter } from "../../utils/uils.js";
import AcceptAssignmentModal from "../../components/AcceptAssignmentModal.vue";
import ICON from "../../static/icons/prompt.png";
import XConfirmModal from "../../components/XConfirmModal.vue";
import LeftMenu from "../../components/LeftMenu.vue";
import { v4 } from "uuid";
import { debounce } from "lodash";
import XSquareCarouselImage from "../../components/XSquareCarouselImage.vue";

// #ifdef APP-PLUS
// #endif

// #ifndef APP-PLUS
const TaskDetails = defineAsyncComponent(() => import('./components/TaskDetails.vue'));
const CollectMaterials = defineAsyncComponent(() => import('./components/CollectMaterials.vue'));
const MyBackfill = defineAsyncComponent(() => import('./components/MyBackfill.vue'));
const ReviewCommunication = defineAsyncComponent(() => import('./components/ReviewCommunication.vue'));
// #endif

const showMenu = ref(false);
const ScrollViewRef = ref();
const details = ref(null);
const home = ref(false);
const showInitModal = ref(false);
const mainDetailWidth = ref(0);
const currentTabs = ref(0);
const HTYQ = ref();
const tabs = computed(() => [
    {
        name: "任务详情",
        component: TaskDetails,
    },
    {
        name: "领取素材",
        component: CollectMaterials,
    },
    {
        name: "我的回填",
        component: MyBackfill,
        isDot: details.value?.children.is_back > 0,
    },
    {
        name: "审核沟通",
        component: ReviewCommunication,
        isDot: details.value?.children.is_read > 0,
    },
]);
const delta = ref(1);
const menuTabs = reactive([
    {
        id: v4(),
        name1: '案例',
        name2: '概览',
        scroll: 'mainDetailBox',
        now: true,
    },
    {
        id: v4(),
        name1: '回填',
        name2: '要求',
        scroll: 'HTYQ',
        now: false,
    },
    {
        id: v4(),
        name1: '时间',
        name2: '要求',
        scroll: 'SJYQ',
        now: false,
    },
    {
        id: v4(),
        name1: '扣款',
        name2: '说明',
        scroll: 'KKSM',
        value: 9999,
        now: false,
    },
    {
        id: v4(),
        name1: '其他',
        name2: '说明',
        scroll: 'QTSM',
        value: 9999,
        now: false,
    },
]);

const getData = async (id, task_children_id) => {
    const { data } = await Api.system.getTaskinfo(id || details.value.id, task_children_id || details.value?.children?.id);
    details.value = data;
    init();
}

onLoad((options) => {
    const { id, home: _home, tab, task_children_id, delta: _delta } = options;
    home.value = _home === '1';
    if (tab) currentTabs.value = Number(tab);
    if (delta) delta.value = _delta;
    getData(id, task_children_id);
});

const init = () => {
    nextTick(() => {
        let ALGL = 0;
        let HTYQ = 0;
        let SJYQ = 0;

        const mainDetailBox = document.querySelector('#mainDetailBox');
        const taskHeader = document.querySelector('#taskHeader');
        const fbyq = document.querySelector('#FBYQ');
        const htyq = document.querySelector('#HTYQ');
        mainDetailWidth.value = mainDetailBox.clientWidth;
        ALGL += taskHeader.clientHeight + 12.5;
        HTYQ += ALGL + mainDetailBox.clientHeight + fbyq.clientHeight + 25;
        SJYQ += HTYQ + htyq.clientHeight + 12.5;

        menuTabs[0].value = ALGL;
        menuTabs[1].value = HTYQ;
        menuTabs[2].value = SJYQ;

        if (home.value) showInitModal.value = true;
    })
}

const scrollState = reactive({
    top: 0,
});
const topTop = () => {
    scrollState.top = 10;
    nextTick(() => {
        scrollState.top = 0;
    });
}
const setScroll = (value) => {
    nextTick(() => {
        scrollState.top = value;
    });
}

const hiddenMenu = debounce(() => {
    showMenu.value = false;
}, 1200);

const scroll = ({ detail: { scrollTop } }) => {
    const systemInfo = uni.getSystemInfoSync();
    const screenHeight = systemInfo.screenHeight;

    if (scrollTop > screenHeight) {
        showMenu.value = true;
        hiddenMenu();
    } else {
        showMenu.value = false;
    }

    let last = menuTabs[0];
    for (const k of menuTabs) {
        if (scrollTop + 300 > k.value) {
            last = k;
        }
    }
    menuTabs.forEach(v => v.now = false);
    menuTabs.find(v => v.id === last.id).now = true;
}
</script>

<template>
    <!--任务详情-->
    <XNav :delta="delta"></XNav>
    <x-notice-bar v-if="details.banner" :text="[details.banner]"></x-notice-bar>
    <left-menu v-show="showMenu" :tabs="menuTabs" @top="topTop" @setScroll="setScroll"></left-menu>

    <scroll-view scroll-y @scroll="scroll" scroll-with-animation :scroll-top="scrollState.top"
        class="h-[calc(100vh-180rpx)]" v-if="details">
        <view class="!p-[20rpx] !flex flex-col gap-[20rpx] box-border">
            <view id="taskHeader" class="rounded-[16rpx] !p-[24rpx] bg-[#fff] !flex flex-col gap-[20rpx]">
                <view class="!flex gap-[30rpx]">
                    <image class="!size-[84rpx]" :src="goodsIcon"></image>
                    <view class="flex-grow">
                        <view class="goods-title !w-full !flex items-center justify-between">
                            {{ details.goods_name }}
                            <view :class="['goods-state']" v-if="!home && details.is_use !== 0">{{
                                details.status_text
                            }}
                            </view>
                        </view>
                        <view v-if="home || details.is_use === 0" class="goods-bh">
                            {{ dayjs(details.end_time).format('YYYY-MM-DD HH:mm') }} 前可领取
                        </view>
                        <view v-else class="goods-bh">
                            任务编号：{{ !home && details.is_use === 0 ? details.code : details.children.uid }}
                            <x-link @click="copy(details.children.uid)">复制</x-link>
                        </view>
                    </view>
                </view>

                <view v-if="!home && details.is_use !== 0"
                    class="bg-[#F7F8FA] px-[28rpx] py-[16rpx] rounded-[8rpx] !flex justify-around"
                    style="font-size: 24rpx">
                    <view>发布账号</view>
                    <view class="bg-[#E5E6EB] w-[5rpx] h-auto"></view>
                    <view>昵称: {{ details.children?.account?.nickname }}</view>
                    <view class="bg-[#E5E6EB] w-[5rpx] h-auto"></view>
                    <view>账号: {{ details.children?.account?.account }}</view>
                </view>

                <view
                    :class="['!grid gap-[20rpx]', mainDetailWidth && (!home && details.is_use !== 0) ? 'grid-cols-3' : 'grid-cols-4']">
                    <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
                        <view class="goods-st">{{ details.platform }}</view>
                        <view class="goods-st-info">发布平台</view>
                    </view>
                    <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
                        <view class="goods-st whitespace-nowrap">¥ {{ details.real_price.toFixed(2) }}</view>
                        <template v-if="details.is_use === 0">
                            <view class="goods-st-info" v-if="details.children.is_settlement === 0">任务报酬</view>
                        </template>
                        <template v-else>
                            <view class="goods-st-info" v-if="details.children.is_settlement === 0">任务报酬</view>
                            <view class="goods-st-info !text-[#FF5722]" v-if="details.children.is_settlement === 1">
                                待确认收益
                            </view>
                            <view class="goods-st-info !text-[#00B42A]" v-if="details.children.is_settlement === 2">到账收益
                            </view>
                        </template>
                    </view>
                    <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
                        <view class="goods-st">{{ details.material_name }}</view>
                        <view class="goods-st-info">素材类型</view>
                    </view>
                    <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]"
                        v-if="!(mainDetailWidth && (!home && details.is_use !== 0))">
                        <view class="goods-st">{{ details.children_num }}</view>
                        <view class="goods-st-info">剩余名额</view>
                    </view>
                </view>

                <view class="!flex flex-col gap-[10px]" v-if="!(mainDetailWidth && (!home && details.is_use !== 0))">
                    <view class="!flex px-[10px] py-[12px] bg-[#F2F3F5] gap-[8px] items-center">
                        <view class="text-[#4E5969] test-24r !flex items-center gap-[5px]">
                            安全评分:
                            <x-prompt info="由该任务或类似任务的历史禁言率、素材是否绿色决定。分值越高，说明完成任务对账号影响最小" title="分值说明">
                            </x-prompt>
                        </view>
                        <view class="!flex items-center gap-[5px]">
                            <view class="text-[#165DFF]">{{ details.security_level }}分</view>
                            <view class="test-24r">{{ details.security_text }}</view>
                        </view>
                    </view>
                    <view class="!flex px-[10px] py-[12px] bg-[#F2F3F5] gap-[8px] items-center">
                        <view class="text-[#4E5969] test-24r !flex items-center gap-[5px]">
                            耗时评分:
                            <x-prompt info="由该任务完整完成所需要的时间和操作步骤决定。分值越高，说明完成任务越简单" title="分值说明">
                            </x-prompt>
                        </view>
                        <view class="!flex items-center gap-[5px]">
                            <view class="text-[#165DFF]">{{ details.time_level }}分</view>
                            <view class="test-24r">{{ details.time_text }}</view>
                        </view>
                    </view>
                </view>
            </view>

            <view id="mainDetailBox" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden">
                <tui-tabs v-if="mainDetailWidth && (!home && details.is_use !== 0)" :tabs="tabs"
                    :currentTab="currentTabs" :width="mainDetailWidth" @change="({ index }) => currentTabs = index">
                </tui-tabs>

                <view :style="{ padding: currentTabs === 3 ? '0' : '24rpx' }">
                    <Suspense>
                        <template #default>
                            <div class="h-full flex flex-col items-start">
                                <component :is="tabs[currentTabs].component" :data="details" @success="getData"
                                    :home="home"></component>
                            </div>
                        </template>

                        <template #fallback>
                            加载中...
                        </template>
                    </Suspense>
                </view>
            </view>

            <template v-if="currentTabs === 0">
                <view id="FBYQ" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                    <view class="w-full">
                        <view class="title">
                            发布要求
                        </view>
                        <view class="block items-center">
                            <view class="block-title">发布平台:</view>
                            <view class="block-info">
                                {{ details.platform }}
                            </view>
                        </view>
                        <view class="block items-center">
                            <view class="block-title">发布方式:</view>
                            <view class="block-info">
                                {{
                                    numberToCharacter(details.fb_num - 1)
                                }}连发/{{ details.is_identical === 0 ? '每次不同' : '每次相同' }}
                                <x-prompt title="发布方式说明">
                                    <template #info>
                                        <view>
                                            领取素材后，按照要求，连续发布
                                            <text class="text-[#FF7D00]">{{ details.fb_num }}遍</text>
                                            ，每遍素材
                                            <text class="text-[#FF7D00]">
                                                {{ details.is_identical === 0 ? '不同' : '相同' }}
                                            </text>
                                        </view>
                                    </template>
                                </x-prompt>
                            </view>
                        </view>
                        <view class="block items-center" v-if="details.duration">
                            <view class="block-title">每次间隔时长:</view>
                            <view class="block-info">
                                {{ details.duration }}分钟
                            </view>
                        </view>
                        <view class="block"
                            v-if="details.special_images_arr.length || details.special_text?.length > 0">
                            <view class="block-title">特殊要求:</view>
                            <view class="block-info gap-[20rpx]">
                                <view style="white-space: pre-line;">{{ details.special_text }}</view>
                                <view class="!grid grid-cols-3 !mt-[12rpx]">
                                    <x-square-carousel-image v-if="details.special_images_arr.length > 0"
                                        :list="details.special_images_arr">
                                    </x-square-carousel-image>
                                </view>
                            </view>
                        </view>
                        <view class="block items-center" v-if="details.choose_area_arr.length">
                            <view class="block-title">ip限制:</view>
                            <view class="block-info">
                                {{ details.choose_area_arr.join(',') }}
                            </view>
                        </view>
                    </view>
                </view>

                <view id="HTYQ" ref="HTYQ" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                    <view class="w-full">
                        <view class="title">
                            回填要求
                        </view>
                        <view v-for="(v, index) in details.task_content" :key="v.id" class="block flex-col">
                            <view class="block-title">第{{ index + 1 }}次回填:</view>
                            <view class="block-info !flex w-full">
                                <view
                                    class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] w-[60%] whitespace-nowrap">
                                    {{ dayjs(v.start_time).format('MMDD-HH:mm') }} 至
                                    {{ dayjs(v.end_time).format('MMDD-HH:mm') }}之间
                                </view>
                                <view
                                    class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
                                    {{ v.content }}
                                    <view class="!inline-block">
                                        <x-image :src="v.ts_images_arr[0]" :list="v.ts_images_arr">
                                            <image class="!size-[24rpx]" :src="ICON" mode="aspectFill"></image>
                                        </x-image>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>

                <view id="SJYQ" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                    <view class="w-full">
                        <view class="title">
                            时间要求
                        </view>
                        <view class="block items-center">
                            <view class="block-title">作品保留时间:</view>
                            <view class="block-info">
                                {{ details.retention_time }} {{ details.retention_type === 1 ? '分钟' : '小时' }}
                                <x-prompt title="保留时间说明">
                                    <template #info>
                                        <view>
                                            该任务结算后，要保留
                                            <text class="text-[#FF7D00]">{{ details.retention_time }}
                                                {{ details.retention_type === 1 ? '分钟' : '小时' }}
                                            </text>
                                            。
                                            <view>到期请自行删除，避免违规。若提前删除，将影响后续收益</view>
                                        </view>
                                    </template>
                                </x-prompt>
                            </view>
                        </view>
                        <view class="block-extend">
                            *若未到保留时间，提前删除。有对应惩罚
                        </view>
                        <view class="block items-center">
                            <view class="block-title !w-[300rpx]">每次回填将在该时间内审核:</view>
                            <view class="block-info">
                                {{ details.check_time }} {{ details.check_type === 1 ? '分钟' : '小时' }}内
                                <x-prompt title="审核时间说明"
                                    :info="`回填后，我们将于${details.check_time}${details.check_type === 1 ? '分钟' : '小时'}内完成审核，超时自动通过`">
                                </x-prompt>
                            </view>
                        </view>
                        <view class="block-extend">
                            *若您的回填，未在上述时间内审核，可在沟通中，发起申诉
                        </view>
                    </view>
                </view>

                <view id="DKSM" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                    <view class="w-full">
                        <view class="title">
                            打款说明
                        </view>
                        <view class="block flex-col">
                            <view class="block-title !w-full">以下回填审核通过后，满足打款条件：</view>
                            <view class="block-info !flex w-full">
                                <view
                                    class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow whitespace-nowrap">
                                    第{{ details.confirm.code }}次回填
                                </view>
                                <view
                                    class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
                                    {{ details.confirm.intro }}
                                </view>
                            </view>
                        </view>
                        <view class="block flex-col">
                            <view class="block-title !w-full">满足打款条件后，将于以下时间打款：</view>
                            <view class="block-info !flex w-full">
                                <view
                                    class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] w-full whitespace-nowrap">
                                    {{ details.back_time }}{{ details.back_type === 1 ? '分钟' : '小时' }}内
                                </view>
                            </view>
                        </view>
                        <view class="block-extend">
                            *若商家未在上述时间内打款，可在沟通中，发起申诉
                        </view>
                    </view>
                </view>

                <view id="KKSM" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                    <view class="w-full">
                        <view class="title">
                            扣款说明
                        </view>
                        <view v-for="(v, index) in details.settlement" :key="v.id" class="block !flex !gap-0">
                            <view
                                class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)]">
                                {{ index + 1 }}.
                            </view>
                            <view
                                class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] flex-grow">
                                {{ v.intro }}
                            </view>
                            <view
                                class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] whitespace-nowrap">
                                扣除{{ v.ratio }}%收益
                            </view>
                        </view>
                        <view class="block-extend">
                            *请认真阅读该说明，商家将按照提前约定的事由扣款
                        </view>
                    </view>
                </view>

                <view id="QTSM" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                    <view class="w-full">
                        <view class="title">
                            其他说明
                        </view>
                        <view class="block !flex-col">
                            <view class="test-24r" v-for="(v, index) in details.settlement_arr" :key="index">
                                {{ v.intro }}
                            </view>
                        </view>
                        <x-prompt title="信用分说明" info="扣除信用分，将影响您后续接任务以及提现。请按约定完成任务。请在接受任务前认真阅读各要求，有能力完成再接受。">
                            <template #button>
                                <view
                                    class="py-[7rpx] px-[32rpx] rounded-full text-[var(--primary-color)] bg-[#E8F3FF] w-fit">
                                    查看信用分管理方法
                                </view>
                            </template>
                        </x-prompt>
                    </view>
                </view>

                <accept-assignment-modal v-if="home || details.is_use === 0" :details="details" @success="getData">
                    <view
                        class="bg-[var(--primary-color)] rounded-[8rpx] py-[26rpx] text-[#fff] !flex justify-center items-center">
                        接受任务
                    </view>
                </accept-assignment-modal>

                <view v-else
                    class="bg-[#94BFFF] rounded-[8rpx] py-[26rpx] text-[#fff] !flex justify-center items-center">
                    已接受
                </view>
            </template>
        </view>
    </scroll-view>

    <x-confirm-modal title="注意" width="500rpx" v-bind="$attrs" :cancel="false" confirm-text="知道了"
        v-model:show="showInitModal">
        <template #info>
            <view class="text-[22rpx]">
                请认真阅读该任务的：
                <text class="text-[rgba(22,93,255,1)]">发布要求、回填要求、扣款说明</text>
                <br />
                确认无误后再接受本任务，任务逾期或失败，将影响您的收益！
            </view>
        </template>
    </x-confirm-modal>
</template>

<style lang="scss" scoped>
page {
    background-color: #6AA1FF;
}

.block-extend {
    color: rgb(255, 125, 0);
    font-size: 20rpx;
    font-weight: 400;
    letter-spacing: 0;
    text-align: left;
    margin-top: -8rpx;
    margin-bottom: 24rpx;
}

.block {
    display: flex;
    gap: 20rpx;
    margin-bottom: 20rpx;

    .block-title {
        flex-shrink: 0;
        color: rgb(134, 144, 156);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: 0;
        text-align: left;
        width: 160rpx;
    }

    .block-info {
        color: rgb(78, 89, 105);
        font-size: 24rpx;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: 0;
    }
}

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

.main-details {
    :deep(.tui-tabs-view) {
        width: 100% !important;
    }
}

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

.goods-bh {
    color: rgb(134, 144, 156);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
    display: flex;
    gap: 24rpx;
}

.goods-state {
    background-color: #E8FFEA;
    color: rgb(0, 180, 42);
    font-size: 12px;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: center;
    padding: 4rpx 8rpx;
}

.goods-st {
    color: rgb(29, 33, 41);
    font-size: 26rpx;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
}

.goods-st-info {
    color: rgb(78, 89, 105);
    font-size: 22rpx;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
    margin-top: 12rpx;
}
</style>
