<script setup>
import {h, reactive} from 'vue';
import Filter from "../../../../components/Filter/index.vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import TaskPassedReviewModal from "./components/TaskPassedReviewModal.vue";
import RejectTaskModal from "./components/RejectTaskModal.vue";
import {toPath} from "../../../../utils/index.js";
import TooltipTag from "../../../../components/TooltipTag/index.vue";
import {Message, Modal} from "@arco-design/web-vue";

const columns = [
    {
        title: '任务编号',
        dataIndex: 'code',
    },
    {
        title: '任务名称',
        dataIndex: 'goods_name',
    },
    {
        title: '发布渠道',
        dataIndex: 'platform_name',
    },
    {
        title: '创建时间',
        dataIndex: 'createtime',
    },
    {
        title: '子任务数',
        dataIndex: 'children_num',
    },
    {
        title: '子任务报价',
        dataIndex: 'children_price',
    },
    {
        title: '商家ID',
        dataIndex: 'b_uid',
    },
    {
        title: '平台报价',
        dataIndex: 'real_price',
    },
    {
        title: '平台审核状态',
        dataIndex: 'check_status_text',
        slotName: 'check_status_text',
    },
    {
        title: '商家任务状态',
        dataIndex: 'status_text',
        slotName: 'status_text',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        fixed: 'right',
        width: 250,
    },
];
const FilterConfig = [
    {
        key: 'uid',
        type: 'input',
        label: '商家ID',
        placeholder: '请输入商家ID',
    },
    {
        key: 'name',
        type: 'input',
        label: '任务名称',
        placeholder: '请输入任务名称',
    },
    {
        key: 'platform',
        type: 'select',
        label: '任务渠道',
        placeholder: '请选择任务渠道',
        api: async () => {
            return await Api.admin.getPlatform();
        },
    },
    {
        key: 'status',
        type: 'select',
        label: '任务状态',
        placeholder: '请选择任务状态',
        api: async () => {
            return await Api.admin.getTaskStatusList();
        },
    },
    {
        key: 'rangeTime',
        start: 'start_time',
        end: 'end_time',
        type: 'datetime',
        label: '创建时间',
    },
    {
        key: 'check_status',
        type: 'select',
        label: '审核状态',
        placeholder: '请选择审核状态',
        api: async () => {
            return await Api.admin.getCheckStatusList();
        },
    }
];

const po = reactive({
    uid: null,
    status: null,
    check_status: null,
    platform: null,
    name: null,
    start_time: null,
    end_time: null,
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});

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

const stopTask = async (id) => {
    Modal.error({
        width: 460,
        title: '确认终止任务',
        content: h('div', {}, [
            h('div', {}, '终止任务后，后续达人将无法接单，但不影响已经接单的达人'),
            h('div', {class: 'text-[#4E5969] text-[14px] mt-[4px]'}, '*请商家及时处理已经被接单的子任务，处理完毕后，剩余任务金额将返款至您钱包')
        ]),
        okText: '确认终止',
        okButtonProps: {status: "danger"},
        hideCancel: false,
        onOk: async () => {
            const {msg} = await Api.admin.stopTask(id);
            Message.success(msg);
            await fetchData();
        }
    })
}
</script>

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

        <a-table
            :data="vo.rows"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :loading="loading"
            :columns="columns"
            class="flex-grow">
            <template v-slot:check_status_text="{record}">
                <a-tag v-if="record.check_status===-2">{{ record.check_status_text }}</a-tag>
                <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===-1" color="red">{{ record.check_status_text }}</a-tag>
            </template>
            <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="red" :content="record.check_remark">审核中
                </TooltipTag>
                <TooltipTag v-if="record.status === -1" color="red" :content="record.check_remark">未通过
                </TooltipTag>
                <TooltipTag v-if="record.status === 2" color="magenta" :content="record.check_remark">请完善子任务
                </TooltipTag>
                <TooltipTag v-if="record.status === 3" color="magenta" :content="record.check_remark">待付款
                </TooltipTag>
                <TooltipTag v-if="record.status === 4" color="blue" :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="purple" :content="record.check_remark">终止
                </TooltipTag>
                <TooltipTag v-if="record.status === 5" color="green" :content="record.check_remark">已完成
                </TooltipTag>
            </template>
            <template v-slot:action="{record}">
                <div class="flex items-center gap-[20px]">
                    <a-link :hoverable="false" @click="toPath('/home/manage-reward-mission/new-task', {id: record.id})">
                        编辑
                    </a-link>
                    <TaskPassedReviewModal :disabled="record.check_status===-2 || record.check_status===1"
                                           :id="record.id" @success="fetchData"></TaskPassedReviewModal>
                    <RejectTaskModal :disabled="record.check_status===-2 || record.check_status===1" :id="record.id"
                                     @success="fetchData"></RejectTaskModal>
                    <a-link :disabled="!(record.status === 4 || record.status === -2)" :hoverable="false"
                            status="danger" class="ml-auto"
                            @click="stopTask(record.id)">终止
                    </a-link>
                </div>
            </template>
        </a-table>
    </a-card>
</template>

<style scoped>

</style>
