<script setup>

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

const columns = [
    {
        title: '编号',
        dataIndex: 'code',
    },
    {
        title: '任务编号',
        dataIndex: 'm_code',
    },
    {
        title: '子任务编号',
        dataIndex: 'uid',
    },
    {
        title: '文字',
        dataIndex: 'content',
        slotName: 'content',
    },
    {
        title: '图片',
        dataIndex: 'image',
        slotName: 'image',
    },
    {
        title: '来源',
        dataIndex: 'type_text',
    },
    {
        title: 'ID',
        dataIndex: 'type_uid',
    },
    {
        title: '类型',
        dataIndex: 'pattern_text',
    },
    {
        title: '时间',
        dataIndex: 'createtime',
    },
    {
        title: '审核状态',
        dataIndex: 'status',
        slotName: 'status',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 110,
        fixed: 'right',
    },
];
const FilterConfig = [
    {
        key: 'm_code',
        type: 'input',
        label: '任务编号',
        placeholder: '请输入任务编号',
    },
    {
        key: 'uid',
        type: 'input',
        label: '子任务编号',
        placeholder: '请输入子任务编号',
    },
    {
        key: 'status',
        type: 'select',
        label: '审核状态',
        placeholder: '请选择审核状态',
        span: 6,
        api: async () => {
            return await Api.admin.getStatusAttr();
        },
    },
    {
        key: 'bid',
        type: 'input',
        label: '商家ID',
        placeholder: '请输入商家ID',
    },
    {
        key: 'rangeTime',
        start: 'start_time',
        end: 'end_time',
        type: 'datetime',
        label: '创建日期',
    }
];

const selectedKeys = ref([]);
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const po = reactive({
    pass: 0,
    rangeTime: null,
});
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});

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

const passExchange = async (id) => {
    const {msg} = await Api.admin.passExchange([id]);
    Message.success(msg);
    await fetchData();
}

const refuseExchange = async (id) => {
    const {msg} = await Api.admin.refuseExchange([id]);
    Message.success(msg);
    await fetchData();
}

const passExchangeAll = async () => {
    const {msg} = await Api.admin.passExchange(selectedKeys.value);
    Message.success(msg);
    selectedKeys.value.length = 0;
    await fetchData();
}

const refuseExchangeAll = async () => {
    const {msg} = await Api.admin.refuseExchange(selectedKeys.value);
    Message.success(msg);
    selectedKeys.value.length = 0;
    await fetchData();
}
</script>

<template>
    <!-- 免审审核 -->
    <a-card>
        <Filter
            @search="initFetchData"
            v-model:from="po"
            :config="FilterConfig">
        </Filter>

        <div class="flex gap-[20px] mb-[20px]">
            <a-button type="primary" @click="passExchangeAll">批量通过</a-button>
            <a-button type="primary" @click="refuseExchangeAll">批量拒绝</a-button>
        </div>

        <a-table
            v-model:selectedKeys="selectedKeys"
            :row-selection="rowSelection"
            :data="vo.rows"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :loading="loading"
            :columns="columns"
            class="flex-grow">
            <template v-slot:content="{record}">
                <view v-html="record.content"></view>
            </template>

            <template v-slot:image="{record}">
                <div class="flex gap-[12px]">
                    <a-image
                        v-for="v in images_arr"
                        width="40px"
                        height="40px"
                        :src="v">
                    </a-image>
                </div>
            </template>

            <template v-slot:status="{record}">
                <a-tag v-if="record.status === 0" color="cyan">{{ record.status_text }}</a-tag>
                <a-tag v-if="record.status === 1" color="green">{{ record.status_text }}</a-tag>
                <a-tag v-if="record.status === -1" color="red">{{ record.status_text }}</a-tag>
            </template>

            <template v-slot:action="{record}">
                <div class="flex items-center gap-[20px]">
                    <a-link @click="passExchange(record.id)" :hoverable="false" status="success">通过</a-link>
                    <a-link @click="refuseExchange(record.id)" :hoverable="false" status="danger">拒绝</a-link>
                </div>
            </template>
        </a-table>
    </a-card>
</template>

<style scoped>

</style>
