<script setup>
import {reactive} from "vue";
import useTableQuery from "../../../../hooks/useTableQuery.js";
import Api from "../../../../api/index.js";
import Filter from "../../../../components/Filter/index.vue";
import XSelect from "../../../../components/XSelect/index.vue";

const columns = [
    {
        title: '沟通事件ID',
        dataIndex: 'key',
    },
    {
        title: '商家ID',
        dataIndex: 'key',
    },
    {
        title: '任务编号',
        dataIndex: 'key',
    },
    {
        title: '子任务编号',
        dataIndex: 'key',
    },
    {
        title: '申诉状态',
        dataIndex: 'key',
    },
    {
        title: '结算状态',
        dataIndex: 'key',
    },
    {
        title: '达人ID',
        dataIndex: 'key',
    },
    {
        title: '达人账号',
        dataIndex: 'key',
    },
    {
        title: '领取时间',
        dataIndex: 'key',
    },
    {
        title: '扣除',
        dataIndex: 'key',
    },
    {
        title: '金额',
        dataIndex: 'key',
    },
    {
        title: '原因',
        dataIndex: 'why',
        slotName: 'why',
        width: 60,
    },
    {
        title: '达人到手',
        dataIndex: 'key',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 240,
        fixed: 'right',
    },
];
const FilterConfig = [
    {
        key: 'm_code',
        type: 'input',
        label: '任务编号',
        placeholder: '请输入任务编号',
        span: 6,
    },
    {
        key: 't_uid',
        type: 'input',
        label: '子任务编号',
        placeholder: '请输入子任务编号',
        span: 6,
    },
    {
        key: 'deduct',
        type: 'custom',
        label: '扣除',
        slotName: 'deduct',
        span: 6,
    },
    {
        key: 'money_type',
        type: 'custom',
        label: '达人到手',
        slotName: 'hands',
        span: 6,
    },
    {
        key: 'uuid',
        type: 'input',
        label: '达人ID',
        placeholder: '请输入达人ID',
        span: 6,
    },
    {
        key: 'b_uid',
        type: 'input',
        label: '商家ID',
        placeholder: '请输入商家ID',
        span: 6,
    },
    {
        key: 'account',
        type: 'input',
        label: '达人账号',
        placeholder: '请输入达人账号',
        span: 6,
    },
    {
        key: 'rangeTime',
        start: 'start_time',
        end: 'end_time',
        type: 'datetime',
        label: '领取时间',
        span: 6,
    },
];

const po = reactive({
    pass: 1,
    money_type: null,
    deduct: null,
    status: 0,
    ratio: null,
    money: null,
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});
const {loading, pagination, initFetchData} = useTableQuery({
    parameter: po,
    api: Api.admin.getInterventionList,
    callback: (data) => {
        Object.assign(vo, data);
    }
});
</script>

<template>
    <!-- 平台介入 -->
    <a-card>
        <Filter
            v-model:from="po"
            :config="FilterConfig">
            <template v-slot:deduct>
                <XSelect :api="Api.system.getRange" v-model:model-value="po.deduct"></XSelect>
                <a-input-number v-model:model-value="po.ratio" placeholder="请输入比例" class="ml-[20px]">
                    <template #suffix>%</template>
                </a-input-number>
            </template>
            <template v-slot:hands>
                <XSelect :api="Api.system.getRange" v-model:model-value="po.money_type"></XSelect>
                <a-input-number v-model:model-value="po.money" placeholder="请输入金额" class="ml-[20px]">
                </a-input-number>
            </template>
        </Filter>

        <a-tabs type="rounded" v-model:active-key="po.status" @change="initFetchData">
            <a-tab-pane title="待处理" :key="0">
            </a-tab-pane>
            <a-tab-pane title="已处理" :key="2">
            </a-tab-pane>
        </a-tabs>

        <a-table
            :data="vo.rows"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :loading="loading"
            :columns="columns"
            class="flex-grow">
            <template v-slot:action>
                <div class="flex gap-[16px]">
                    <a-link :hoverable="false">沟通记录</a-link>
                    <a-link :hoverable="false">查看回填</a-link>
                    <a-link :hoverable="false" status="success">确认结算</a-link>
                </div>
            </template>
            <template v-slot:why>
                <a-link :hoverable="false">原因</a-link>
            </template>
        </a-table>
    </a-card>
</template>

<style scoped>

</style>
