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

const columns = [
    {
        title: '处理ID',
        dataIndex: 'code'
    },
    {
        title: '处理时间',
        dataIndex: 'complete_time'
    },
    {
        title: '处理结果',
        dataIndex: 'remark'
    },
    {
        title: '处理原因',
        dataIndex: 'intro'
    },
    {
        title: '申诉状态',
        dataIndex: 'status_text'
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: 150,
        align: 'center',
        slotName: 'action',
    },
];
const vo = reactive({
    page: '',
    rows: [],
    total: 0,
});
const po = reactive({
    wd: null,
});

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

<template>
    <!-- 信用分 -->
    <div class="mb-[20px]">
        <a-breadcrumb
            :routes="[{path: '/home/personal-center', label: '个人中心'}, {path: '/', label: '信用分'},]">
        </a-breadcrumb>
    </div>

    <a-card>
        <div class="title">分值变动记录</div>

        <a-table
            @page-change="(e) => pagination.current = e"
            :pagination="pagination"
            :data="vo.rows"
            :loading="loading"
            class="flex-grow"
            :columns="columns">
            <template v-slot:action>
                <a-link :hoverable="false" :disabled="false">联系专属客服申诉</a-link>
            </template>
        </a-table>
    </a-card>
</template>

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