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

const columns = [
    {
        title: '任务编号',
        dataIndex: 'code',
    },
    {
        title: '任务名称',
        dataIndex: 'goods_name',
    },
    {
        title: '发布渠道',
        dataIndex: 'name',
    },
    {
        title: '创建时间',
        dataIndex: 'createtime',
    },
    {
        title: '当前状态',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '子任务进度',
        dataIndex: 'end_ratio',
    },
    {
        title: '消耗金额',
        dataIndex: 'money',
        slotName: 'money',
    },
    {
        title: '是否开始',
        dataIndex: 'start',
        slotName: 'start',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 200,
    },
    {
        title: '',
        dataIndex: 'exp',
        slotName: 'exp'
    },
];
const FilterConfig = computed(() => [
    {
        key: 'code',
        type: 'input',
        label: '任务编号',
        placeholder: '请输入集合编号'
    },
    {
        key: 'name',
        type: 'input',
        label: '任务名称',
        placeholder: '请输入集合名称'
    },
    {
        key: 'platform',
        type: 'select',
        label: '任务渠道',
        placeholder: '全部',
        api: async () => Api.merchant.getTaskPlatformList(),
    },
    {
        key: 'status',
        type: 'select',
        label: '任务状态',
        placeholder: '全部',
        api: async () => Api.merchant.getTaskStatusList(),
    },
    {
        key: 'datetime',
        start: 'start_time',
        end: 'end_time',
        type: 'datetime',
        label: '创建时间',
        placeholder: '全部',
    },
]);
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});
const po = reactive({
    wd: null,
});

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

const {open: openPayTask} = usePayTask();

const startTask = async (_value, record) => {
    const {status, id} = record;

    const showMessageAndFetch = async (msg) => {
        Message.success(msg);
        await fetchData();
    };

    if (status === -2 || status === 4) {
        const {msg} = await Api.merchant.endTask(id);
        await showMessageAndFetch(msg);
    } else {
        const {data} = await Api.merchant.startTask({id});
        openPayTask({
            props: {payInfo: data},
            success: async () => {
                const {msg} = await Api.merchant.moneyToTask(id);
                await showMessageAndFetch(msg);
            },
        });
    }
};

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

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

        <div class="flex gap-[16px] mb-[20px]">
            <a-button type="primary" @click="toPath('/home/task-center/new-task')">
                <template #icon>
                    <icon-plus/>
                </template>
                新建任务
            </a-button>
            <a-button>
                <template #icon>
                    <icon-plus/>
                </template>
                从模板快速创建
            </a-button>
        </div>

        <div class="mt-[20px] flex-grow">
            <a-table
                class="h-full"
                :columns="columns"
                :data="vo.rows"
                :loading="loading"
                @page-change="(e) => pagination.current = e"
                :pagination="pagination">
                <template v-slot:status="{record}">
                    <TooltipTag v-if="record.status === 0" color="cyan">待完善</TooltipTag>
                    <TooltipTag v-if="record.status === 1" color="red">审核中</TooltipTag>
                    <TooltipTag v-if="record.status === -1" color="red">未通过</TooltipTag>
                    <TooltipTag v-if="record.status === 2" color="magenta">请完善子任务</TooltipTag>
                    <TooltipTag v-if="record.status === 3" color="magenta">待付款</TooltipTag>
                    <TooltipTag v-if="record.status === 4" color="blue">投放中</TooltipTag>
                    <TooltipTag v-if="record.status === -2" color="orangered">暂停中</TooltipTag>
                    <TooltipTag v-if="record.status === -3" color="purple">终止</TooltipTag>
                    <TooltipTag v-if="record.status === 5" color="green">已完成</TooltipTag>
                </template>
                <template v-slot:start="{record}">
                    <a-switch
                        @change="startTask($event, record)"
                        :disabled="record.status !== -2 && record.status !== 3 && record.status !== 4"
                        :model-value="record.status === 4">
                    </a-switch>
                </template>
                <template v-slot:money="{record}">
                    <div class="flex flex-col gap-[8px]">
                        <div>{{ record.end_money.toFixed(2) }} / {{ record.total.toFixed(2) }}（元）</div>
                        <a-progress
                            :percent="record.end_money/record.total"
                            :show-text="false">
                        </a-progress>
                    </div>
                </template>
                <template v-slot:action="{record}">
                    <div class="flex gap-[16px]">
                        <a-link :hoverable="false" @click="toPath('/home/task-center/new-task', {id: record.id})">编辑
                        </a-link>
                        <a-link :hoverable="false"
                                @click="record.status >= 2 ? toPath('/home/task-center/look-min-task', {id: record.id}) : Message.warning('审核未通过')">
                            查看子任务
                        </a-link>
                        <a-popconfirm content="确认终止吗?" @ok="stopTask(record.id)">
                            <a-link :hoverable="false" status="danger">终止</a-link>
                        </a-popconfirm>
                    </div>
                </template>
                <template v-slot:exp>
                    <a-trigger trigger="click" :unmount-on-close="false">
                        <a-link :hoverable="false">更多
                            <icon-down/>
                        </a-link>
                        <template #content>
                            <div class="demo-basic">
                                <a-button type="text">
                                    存为模版
                                </a-button>
                            </div>
                        </template>
                    </a-trigger>
                </template>
            </a-table>
        </div>
    </a-card>
</template>

<style scoped>

</style>
