<script setup>
import OriginTag from "../../../../components/OriginTag/index.vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import {reactive} from "vue";
import {Message} from "@arco-design/web-vue";

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
    },
    {
        title: '达人',
        dataIndex: 'uid',
    },
    {
        title: '处罚理由',
        dataIndex: 'intro',
    },
    {
        title: '处罚结果',
        dataIndex: 'remark',
    },
    {
        title: '进度',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '提交日期',
        dataIndex: 'createtime',
    },
    {
        title: '关联任务ID',
        dataIndex: 'task_id',
    },
    {
        title: '关联子任务ID',
        dataIndex: 'task_children_id',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 100,
    },
]

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

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

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

<template>
    <!-- 效果管理 -->
    <div class="mb-[20px]">
        <a-breadcrumb
            :routes="[{path: '/home/expert-management', label: '达人管理'}, {path: '/', label: '拉黑管理'},]">
        </a-breadcrumb>
    </div>

    <a-card>
        <div class="title">效果管理</div>

        <div class="flex-grow">
            <a-table
                class="h-full"
                :data="vo.rows"
                @page-change="(e) => pagination.current = e"
                :pagination="pagination"
                :loading="loading"
                :columns="columns">
                <template v-slot:status="{record}">
                    <OriginTag v-if="record.status === 0" color="rgb(var(--orange-6))">审核中</OriginTag>
                    <OriginTag v-if="record.status === 1" color="rgb(var(--success-6))">已生效</OriginTag>
                    <OriginTag v-if="record.status === 3" color="rgb(var(--arcoblue-6))">达人申诉成功</OriginTag>
                    <OriginTag v-if="record.status === 2" color="rgb(var(--red-6))">已拒绝</OriginTag>
                </template>

                <template v-slot:action="{record}">
                    <a-popconfirm content="确定撤销吗?" @ok="cancelTaskEffect(record.id)" v-if="record.status !== 2">
                        <a-link :hoverable="false" :disabled="false">撤销</a-link>
                    </a-popconfirm>
                    <a-link :hoverable="false" :disabled="false">/</a-link>
                </template>
            </a-table>
        </div>
    </a-card>
</template>

<style lang="scss" scoped>
.title {
    color: rgb(29, 33, 41);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    margin-bottom: 20px;
}
</style>
