<script setup>
import OriginTag from "../../../../components/OriginTag/index.vue";
import {reactive, ref} 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 {openPage, openUrl} from "../../../../utils/index.js";
import PreviewTaskMaterialModal from "./components/PreviewTaskMaterialModal.vue";
import {Message} from "@arco-design/web-vue";
import EffectManagementModal from "./components/effectManagementModal.vue";
import Settlement from "./components/Settlement.vue";
import Chat from "../../../../components/Chat/index.vue";
import TooltipTag from "../../../../components/TooltipTag/index.vue";

const route = useRoute();
const taskId = ref(null);
const columns = [
    {
        title: '子任务编号',
        dataIndex: 'uid',
    },
    {
        title: '子任务状态',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '回传数据',
        dataIndex: 'content',
        slotName: 'content',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        align: 'center',
        width: 120,
    },
    {
        title: '回传数据状态',
        dataIndex: 'dataStatus',
        slotName: 'dataStatus',
    },
    {
        title: '领取时间',
        dataIndex: 'accept_time',
    },
    {
        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,
    openEffectManagementModal: false,
    showChat: false,
    task: null,
})

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

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

const passTask = async (id, task_backfill_id) => {
    const {msg} = await Api.merchant.passTask({
        id: id,
        task_backfill_id: task_backfill_id,
    });
    Message.success(msg);
    await fetchData();
}
</script>

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

    <a-card class="flex-grow text-[14px]">
        <div class="gap-[20px]">
            <a-button type="primary" @click="openPage('/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}">
                    <TooltipTag v-if="record.status === 0" color="red" :content="record.check_remark">待上传素材
                    </TooltipTag>
                    <TooltipTag v-if="record.status === 1" color="orangered" :content="record.check_remark">素材审核中
                    </TooltipTag>
                    <TooltipTag v-if="record.status === 2" color="orangered" :content="record.check_remark">
                        重新上传素材
                    </TooltipTag>
                    <TooltipTag v-if="record.status === 3" color="gray" :content="record.check_remark">待领取
                    </TooltipTag>
                    <TooltipTag v-if="record.status === 4" color="green" :content="record.check_remark">已领取
                    </TooltipTag>
                    <TooltipTag v-if="record.status === 5" color="green" :content="record.check_remark">已结算
                    </TooltipTag>
                    <TooltipTag v-if="record.status === 6" color="arcoblue" :content="record.check_remark">已终止
                    </TooltipTag>
                </template>

                <template v-slot:content="{record}">
                    <div v-for="(item, index) in record?.task_content" class="flex flex-col">
                        <template v-if="item?.back?.material_type === 1">
                            <div v-for="v in item?.back?.content_data" class="!flex items-center gap-[12px]">
                                <div class="flex-shrink-0">
                                    <a-image width="30" height="30" :src="v.content"></a-image>
                                </div>
                                <a-link @click="openUrl(v)" :hoverable="false">
                                    {{ v.name }}
                                </a-link>
                            </div>
                        </template>
                        <template v-if="item?.back?.material_type === 2">
                            <a-link v-for="v in item?.back?.content_arr" @click="openUrl(v)" :hoverable="false">
                                {{ v }}
                            </a-link>
                        </template>
                        <template v-if="item?.back?.material_type === 3">
                            <div v-for="v in item?.back?.content_arr">
                                {{ v }}
                            </div>
                        </template>


                        <a-divider v-if="index+1 !== record?.task_content.length"></a-divider>
                    </div>
                </template>

                <template v-slot:action="{record}">
                    <div v-for="(item, index) in record.task_content">
                        <div class="flex gap-[16px] justify-center items-center">
                            <a-popconfirm content="确定通过吗?" @ok="passTask(record.id, item.back.id)">
                                <a-link :hoverable="false" status="success"
                                        :disabled="!(item.back_status === 4 || item.back_status === 2)">通过
                                </a-link>
                            </a-popconfirm>

                            <RefuseModal :taskId="record.id" :task="item" @success="fetchData"
                                         :disabled="!(item.back_status === 4 || item.back_status === 2)"></RefuseModal>
                        </div>
                        <a-divider v-if="index+1 !== record.task_content.length"></a-divider>
                    </div>
                </template>

                <template v-slot:dataStatus="{record}">
                    <div v-for="(item, index) in record.task_content">
                        <div>
                            <OriginTag color="var(--color-neutral-4)" v-if="item.back_status === 0">
                                \
                            </OriginTag>
                            <OriginTag color="rgb(var(--arcoblue-6))"
                                       v-if="item.back_status === 1 || item.back_status === 5">
                                {{ item.back_status_text }}
                            </OriginTag>
                            <OriginTag color="rgb(var(--success-6))" v-if="item.back_status === 2">
                                {{ item.back_status_text }}
                            </OriginTag>
                            <OriginTag color="rgb(var(--orange-6))" v-if="item.back_status === 3">
                                {{ item.back_status_text }}
                            </OriginTag>
                            <OriginTag color="rgb(var(--danger-6))" v-if="item.back_status === 4">
                                {{ item.back_status_text }}
                            </OriginTag>
                        </div>
                        <a-divider v-if="index+1 !== record.task_content.length"></a-divider>
                    </div>
                </template>

                <template v-slot:callback="{record}">
                    <a-link :hoverable="false" @click="() => {
                        state.showChat = true;
                        state.task = record
                    }">
                        沟通记录
                    </a-link>
                </template>

                <template v-slot:payStatus="{record}">
                    <settlement :task="record" :disabled="!(record.is_settlement === 0 && record.status === 4)"
                                @success="fetchData">
                        <a-link :hoverable="false" :disabled="!(record.is_settlement === 0 && record.status === 4)"
                                status="success">
                            {{ record.settlement_text }}
                        </a-link>
                    </settlement>
                </template>

                <template v-slot:action2="{record}">
                    <div class="flex gap-[16px] justify-center items-center">
                        <PreviewTaskMaterialModal title="查看素材" :task="record" @success="fetchData">
                            <a-link :hoverable="false">查看素材</a-link>
                        </PreviewTaskMaterialModal>
                        <a-dropdown>
                            <a-link :hoverable="false">
                                更多
                                <icon-down/>
                            </a-link>
                            <template #content>
                                <a-doption @click="() => {state.openEffectManagementModal=true;taskId=record.id}">
                                    效果管理
                                </a-doption>
                                <a-doption
                                    @click="openTerminateTask({
                                        Api: Api.merchant.stopTaskChildren,
                                        status_text: record.stattus_text,
                                        type: record.status === 6 || record.status === 4 ? 'warning' : 'success',
                                        taskId: record.id,
                                        callback: fetchData,
                                    })">
                                    终止子任务
                                </a-doption>
                                <a-doption
                                    :disabled="!record.account"
                                    @click="() => {state.openBlackjackExpertModal=true;taskId=record.id}">
                                    拉黑达人
                                </a-doption>
                            </template>
                        </a-dropdown>
                    </div>
                </template>
            </a-table>
        </div>
    </a-card>

    <BlackjackExpertModal
        :taskId="taskId"
        v-model:visible="state.openBlackjackExpertModal"
        @success="fetchData">
    </BlackjackExpertModal>

    <effect-management-modal
        :taskId="taskId"
        v-model:visible="state.openEffectManagementModal"
        @success="fetchData">
    </effect-management-modal>

    <Chat
        :task="state.task"
        v-model:visible="state.showChat">
    </Chat>
</template>

<style scoped>

</style>
