<script setup>
import {reactive, ref} from "vue";
import Filter from "../../../../components/Filter/index.vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import PreviewTaskModal from "../../../../components/PreviewTaskModal/PreviewTaskModal.vue";
import openTerminateTask from "../../../../components/TerminateTask/TerminateTask.js";
import {Message} from "@arco-design/web-vue";
import RejectTaskModal from "./components/RejectTaskModal.vue";
import TooltipTag from "../../../../components/TooltipTag/index.vue";

const columns = [
    {
        title: '任务编号',
        dataIndex: 'code',
    },
    {
        title: '子任务编号',
        dataIndex: 'uid',
    },
    {
        title: '子任务状态',
        dataIndex: 'status_text',
        slotName: 'status_text',
    },
    {
        title: '平台审核状态',
        dataIndex: 'check_status_text',
        slotName: 'check_status_text'
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 300,
    },
];
const FilterConfig = [
    {
        key: 'code',
        type: 'input',
        label: '任务编号',
        placeholder: '任务编号',
    },
    {
        key: 'uid',
        type: 'input',
        label: '子任务编号',
        placeholder: '子任务编号',
    },
    {
        key: 'check_status',
        type: 'select',
        label: '平台审核状态',
        placeholder: '请选择平台审核状态',
        api: async () => {
            return await Api.admin.getSubCheckStatusList();
        },
    },
    {
        key: 'status',
        type: 'select',
        label: '子任务状态',
        placeholder: '请选择子任务状态',
        api: async () => {
            return await Api.admin.getStatusList();
        },
    },
    {
        key: 'wd',
        type: 'input',
        label: '达人任务编号',
        placeholder: '请输入达人任务编号'
    },
];
const selectedKeys = ref([]);
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const po = reactive({});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});

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

const passTaskChildren = async (id) => {
    const {code, msg} = await Api.admin.passTaskChildren(id);
    if (code === 1) Message.success(msg);
    await fetchData();
}

const refuseTaskChildren = async (id) => {
    const {code, msg} = await Api.admin.refuseTaskChildren(id);
    if (code === 1) Message.success(msg);
    await fetchData();
}

const checkChange = (checked, record) => {
    console.log(checked, record);
    if (checked) {
        selectedKeys.value.push(record.id);
    } else {
        selectedKeys.value = selectedKeys.value.filter(item => item !== record.id);
    }
}

const plTaskChildren = async () => {
    const {msg} = await Api.admin.plTaskChildren(selectedKeys.value);
    Message.success(msg);
    selectedKeys.value.length = 0;
    await fetchData();
}
</script>

<template>
    <!-- 子任务审核 -->
    <a-card>
        <Filter
            v-model:from="po"
            @search="initFetchData"
            :config="FilterConfig">
        </Filter>

        <div class="mb-[24px]">
            <a-button type="primary" @click="plTaskChildren">批量通过</a-button>
        </div>

        <a-table
            :data="vo.rows"
            v-model:selectedKeys="selectedKeys"
            :row-selection="rowSelection"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :loading="loading"
            :columns="columns"
            class="flex-grow">
            <template v-slot:status_text="{record}">
                <TooltipTag v-if="record.status === 0" color="cyan" :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="red" :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:check_status_text="{record}">
                <a-tag v-if="record.check_status===0" color="cyan">{{ record.check_status_text }}</a-tag>
                <a-tag v-if="record.check_status===1" color="green">{{ record.check_status_text }}</a-tag>
                <a-tag v-if="record.check_status===-2">{{ record.check_status_text }}</a-tag>
                <a-tag v-if="record.check_status===-1" color="red">{{ record.check_status_text }}</a-tag>
            </template>
            <template v-slot:action="{record}">
                <div class="flex items-center gap-[20px] justify-between">
                    <PreviewTaskModal :id="record.id" @success="fetchData"
                                      @checkChange="checkChange($event, record)"></PreviewTaskModal>
                    <a-popconfirm content="确定通过?" @ok="passTaskChildren(record.id)">
                        <a-link :disabled="record.check_status !== 0 && record.check_status !== -1" :hoverable="false"
                                status="success">通过
                        </a-link>
                    </a-popconfirm>
                    <RejectTaskModal
                        :disabled="record.check_status !== 0 && record.check_status !== -1"
                        :api="Api.admin.refuseTaskChildren"
                        :id="record.id"
                        @success="fetchData">
                    </RejectTaskModal>
                    <a-link
                        :hoverable="false"
                        status="danger"
                        @click="openTerminateTask({
                            Api: Api.admin.stopTaskChildren,
                            status_text: record.status_text,
                            type: record.status === 6 || record.status === 4 ? 'warning' : 'success',
                            taskId: record.id,
                            callback: fetchData,
                        })">终止子任务
                    </a-link>
                </div>
            </template>
        </a-table>
    </a-card>
</template>

<style scoped>

</style>
