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

const columns = [
    {
        title: '商家ID',
        dataIndex: 'b_uid',
    },
    {
        title: '渠道',
        dataIndex: 'name',
    },
    {
        title: '达人ID',
        dataIndex: 'u_uid',
    },
    {
        title: '推广账号ID',
        dataIndex: 'a_uid',
    },
    {
        title: '推广账号',
        dataIndex: 'account',
    },
    {
        title: '拉黑原因',
        dataIndex: 'remark',
    },
    {
        title: '拉黑效果',
        dataIndex: 'xg',
        slotName: 'xg',
    },
    {
        title: '开始日期',
        dataIndex: 'createtime',
    },
    {
        title: '结束日期',
        dataIndex: 'endtime',
    },
    {
        title: '关联任务ID',
        dataIndex: 'task_id',
    },
    {
        title: '关联子任务ID',
        dataIndex: 'task_children_id',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 90,
    },
];
const FilterConfig = [
    {
        key: 'b_uid',
        type: 'input',
        label: '商家ID',
        placeholder: '请输入商家ID',
    },
    {
        key: 'u_uid',
        type: 'input',
        label: '达人ID',
        placeholder: '请输入达人ID',
    },
    {
        key: 'account',
        type: 'input',
        label: '推广账号',
        placeholder: '请输入推广账号',
    },
    {
        key: 'rangeTime',
        start: 'start_time',
        end: 'end_time',
        type: 'datetime',
        label: '推广日期',
    },
];

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

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

const taskBlockCancel = async (id) => {
    const {msg} = await Api.admin.taskBlockCancel({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:xg="{record}">
                <div v-if="record.type === 1">对方此账号不能接我任务</div>
                <div v-else>对方所有账号不能接我任务</div>
            </template>
            <template v-slot:action="{record}">
                <div class="flex gap-[20px]">
                    <a-link :disabled="record.is_cancel===1" :hoverable="false" @click="taskBlockCancel(record.id)">
                        {{ record.is_cancel ? record.is_cancel_text : '取消拉黑' }}
                    </a-link>
                </div>
            </template>
        </a-table>
    </a-card>
</template>

<style scoped>

</style>
