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

const columns = [
    {
        title: '任务编号',
        dataIndex: 'code',
    },
    {
        title: '任务名称',
        dataIndex: 'goods_intro',
    },
    {
        title: '发布渠道',
        dataIndex: 'platform',
    },
    {
        title: '创建时间',
        dataIndex: 'createtime',
    },
    {
        title: '子任务数',
        dataIndex: 'children_num',
    },
    {
        title: '子任务报价',
        dataIndex: 'children_price',
    },
    {
        title: '商家ID',
        dataIndex: 'b_uid',
    },
    {
        title: '平台报价',
        dataIndex: 'real_price',
    },
    {
        title: '是否置顶',
        dataIndex: 'is_hot',
        slotName: 'is_hot',
        width: 100,
        align: 'center',
    },
    {
        title: '排序',
        dataIndex: 'action',
        slotName: 'action',
        width: 130,
    },
];

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

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

<template>
    <!-- 任务排序 -->
    <a-card>
        <div class="title">任务排序</div>
        <a-table
            :loading="loading"
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :data="vo.rows"
            :columns="columns"
            class="flex-grow">
            <template v-slot:is_hot="{record}">
                <x-switch
                    v-model:model-value="record.is_hot"
                    :id="record.id"
                    :api="Api.admin.setTaskTop"
                    @change="fetchData">
                </x-switch>
            </template>
            <template v-slot:action="{record}">
                <SequenceAdjustment
                    :id="record.id"
                    @success="fetchData"
                    :api="Api.admin.setTaskWeigh">
                </SequenceAdjustment>
            </template>
        </a-table>
    </a-card>
</template>

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