<script setup>
import OriginTag from "../../../../components/OriginTag/index.vue";
import {reactive} from "vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import RefuseModal from "./components/RefuseModal.vue";
import openTerminateTask from "../../../../components/TerminateTask/TerminateTask.js";
import BlackjackExpertModal from "../../components/BlackjackExpertModal.vue";
import {useRoute} from "vue-router";
import {toPath} from "../../../../utils/index.js";
import PreviewTaskModal from "../../../../components/PreviewTaskModal/PreviewTaskModal.vue";

const route = useRoute();
const columns = [
    {
        title: '子任务编号',
        dataIndex: 'uid',
    },
    {
        title: '子任务状态',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '回传数据',
        dataIndex: 'key',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        align: 'center',
        width: 120,
    },
    {
        title: '回传数据状态',
        dataIndex: 'dataStatus',
        slotName: 'dataStatus',
    },
    {
        title: '领取时间',
        dataIndex: 'key',
    },
    {
        title: '达人反馈',
        dataIndex: 'callback',
        slotName: 'callback',
        align: 'center',
        width: 100,
    },
    {
        title: '支付状态',
        dataIndex: 'payStatus',
        slotName: 'payStatus',
        align: 'center',
        width: 100,
    },
    {
        title: '操作',
        dataIndex: 'action2',
        slotName: 'action2',
        align: 'center',
        width: 200,
    },
];
const state = reactive({
    openBlackjackExpertModal: false
})

const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});
const po = reactive({
    id: route.query.id,
    wd: null,
});

const {loading, pagination} = useTableQuery({
    parameter: po,
    api: Api.merchant.getTaskChildrenList,
    callback: (data) => {
        Object.assign(vo, data);
        console.log(vo);
    }
});
</script>

<template>
    <!-- 查看子任务 -->
    <div class="mb-[20px]">
        <a-breadcrumb
            :routes="[{path: '/', label: '任务中心'}, {path: '/', label: '悬赏任务'}, {path: '/', label: '查看子任务'}]">
        </a-breadcrumb>
    </div>

    <a-card class="flex-grow text-[14px]">
        <div class="gap-[20px]">
            <a-button type="primary" @click="toPath('/home/task-center/manage-materials', {id: po.id})">
                <template #icon>
                    <icon-apps/>
                </template>
                批量管理素材
            </a-button>

            <a-table
                :data="vo.rows"
                @page-change="(e) => pagination.current = e"
                :pagination="pagination"
                :span-method="spanMethod"
                :loading="loading"
                :columns="columns"
                class="w-full mt-[20px]">
                <template v-slot:status="{record}">
                    <a-tag v-if="record.status === 0" color="red">待上传素材</a-tag>
                    <a-tag v-if="record.status === 1" color="orangered">素材审核中</a-tag>
                    <a-tag v-if="record.status === 2" color="orangered">重新上传素材</a-tag>
                    <a-tag v-if="record.status === 3" color="gray">待领取</a-tag>
                    <a-tag v-if="record.status === 4" color="green">已领取</a-tag>
                    <a-tag v-if="record.status === 5" color="green">已结算</a-tag>
                    <a-tag v-if="record.status === 6" color="arcoblue">已终止</a-tag>
                </template>

                <template v-slot:action>
                    <div v-for="(item, index) in 2">
                        <div class="flex gap-[16px] justify-center items-center">
                            <a-link :hoverable="false" status="success">通过</a-link>

                            <RefuseModal></RefuseModal>
                        </div>
                        <a-divider v-if="index+1 !== 2"></a-divider>
                    </div>
                </template>

                <template v-slot:dataStatus>
                    <div v-for="(item, index) in 2">
                        <div>
                            <OriginTag color="rgb(var(--success-6))">已通过</OriginTag>
                            <OriginTag color="rgb(var(--orange-6))">在此之前完成审核</OriginTag>
                            <OriginTag color="rgb(var(--arcoblue-6))">等待回填</OriginTag>
                            <OriginTag color="var(--color-neutral-4)">/</OriginTag>
                        </div>
                        <a-divider v-if="index+1 !== 2"></a-divider>
                    </div>
                </template>

                <template v-slot:callback>
                    <a-link :hoverable="false">
                        确认结算
                    </a-link>
                </template>

                <template v-slot:payStatus>
                    <a-link :hoverable="false" status="success">
                        确认结算
                    </a-link>
                </template>

                <template v-slot:action2>
                    <div class="flex gap-[16px] justify-center items-center">
                        <PreviewTaskModal>
                            <a-link :hoverable="false">查看素材</a-link>
                        </PreviewTaskModal>
                        <a-dropdown :hide-on-select="false">
                            <a-link :hoverable="false">
                                更多
                                <icon-down/>
                            </a-link>
                            <template #content>
                                <a-doption>效果管理</a-doption>
                                <a-doption @click="openTerminateTask">终止子任务</a-doption>
                                <a-doption @click="state.openBlackjackExpertModal=true">拉黑达人</a-doption>
                            </template>
                        </a-dropdown>
                    </div>
                </template>
            </a-table>
        </div>
    </a-card>

    <BlackjackExpertModal v-model:visible="state.openBlackjackExpertModal"></BlackjackExpertModal>
</template>

<style scoped>

</style>
