<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";
import Chat from "../../../../components/Chat/index.vue";
import LookBackfillModal from "../../../merchant/pages/communication-center/components/look-backfill-modal.vue";
import Settlement from "../../../merchant/pages/task-center/components/Settlement.vue";
import XTagSelect from "../../../../components/XSelect/XTagSelect.vue";
import {Message} from "@arco-design/web-vue";

const columns = [
    {
        title: '商家ID',
        dataIndex: 'b_uid',
    },
    {
        title: '任务编号',
        dataIndex: 't_uid',
    },
    {
        title: '子任务编号',
        dataIndex: 'm_code',
    },
    {
        title: '申诉状态',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '结算状态',
        dataIndex: 'settlement',
        slotName: 'settlement',
    },
    {
        title: '达人ID',
        dataIndex: 'uuid',
    },
    {
        title: '达人账号',
        dataIndex: 'account',
    },
    {
        title: '领取时间',
        dataIndex: 'accept_time',
    },
    {
        title: '扣除',
        dataIndex: 'coin_ratio',
    },
    {
        title: '金额',
        dataIndex: 'coin',
    },
    {
        title: '原因',
        dataIndex: 'why',
        slotName: 'why',
        width: 60,
    },
    {
        title: '达人到手',
        dataIndex: 'real_coin',
    },
    {
        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 state = reactive({
    showChat: false,
    task: null,
})
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, fetchData} = useTableQuery({
    parameter: po,
    api: Api.admin.getInterventionTaskList,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

const getStatus = () => Promise.resolve({
    data: [
        {
            id: 0,
            name: '待处理',
            color: 'green',
        },
        {
            id: 1,
            name: '已处理',
            color: 'cyan',
        },
    ]
});

const changeStatus = async (record) => {
    const {msg} = await Api.admin.editStatus({
        id: record.id,
        status: record.is_handle,
    });
    Message.success(msg);
    await fetchData();
}
</script>

<template>
    <!-- 平台介入 -->
    <a-card>
        <Filter
            @search="initFetchData"
            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="1">
            </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="{record}">
                <div class="flex gap-[16px]">
                    <a-link :hoverable="false" @click="async () => {
                        const {data} = await Api.admin.getTaskChildrenInfo(record.id);
                        state.showChat = true;
                        state.task = data;
                    }">沟通记录
                    </a-link>
                    <look-backfill-modal :item="{...record, tc_id: record.id}"></look-backfill-modal>
                    <settlement :task="record" :disabled="!(record.is_settlement === 0 || record.is_settlement === 1)"
                                @success="fetchData">
                        <a-link :hoverable="false"
                                :disabled="!(record.is_settlement === 0 || record.is_settlement === 1)"
                                status="success">
                            {{ record.admin_settlement_text }}
                        </a-link>
                    </settlement>
                </div>
            </template>
            <template v-slot:why="{record}">
                <settlement :yy="true" :task="record" :disabled="record.is_settlement === 0" @success="fetchData">
                    <a-link :hoverable="false" :disabled="record.is_settlement === 0">原因</a-link>
                </settlement>
            </template>
            <template v-slot:status="{record}">
                <XTagSelect
                    @change="changeStatus(record)"
                    v-model:model-value="record.is_handle"
                    :api="getStatus"
                    init>
                </XTagSelect>
            </template>
            <template v-slot:settlement="{record}">
                <div v-if="record.is_settlement===2" class="status success">{{ record.settlement_text }}</div>
                <div v-if="record.is_settlement===1" class="status warning">{{ record.settlement_text }}</div>
                <div v-if="record.is_settlement===-1" class="status danger">{{ record.settlement_text }}</div>
                <div v-if="record.is_settlement===0" class="status primary">{{ record.settlement_text }}</div>
            </template>
        </a-table>
    </a-card>

    <Chat
        :task="state.task"
        @success="fetchData"
        v-model:visible="state.showChat">
    </Chat>
</template>

<style lang="scss" scoped>
.status {
    @apply flex whitespace-nowrap items-center gap-[6px];
    &::before {
        content: '';
        @apply block size-[6px] rounded-[50%];
    }
}

.success {
    &::before {
        @apply bg-[rgb(var(--green-6))];
    }
}

.danger {
    &::before {
        @apply bg-[rgb(var(--red-6))];
    }
}

.warning {
    &::before {
        @apply bg-[rgb(var(--orange-6))];
    }
}

.primary {
    &::before {
        @apply bg-[rgb(var(--arcoblue-6))];
    }
}
</style>
