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

const columns = [
    {
        title: 'ID',
        dataIndex: 'key',
        width: 100,
    },
    {
        title: '位置',
        dataIndex: 'position_text',
    },
    {
        title: '二维码',
        dataIndex: 'qrcode',
        slotName: 'qrcode',
    },
    {
        title: '操作',
        dataIndex: 'action',
        slotName: 'action',
        width: 60,
    },
];

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

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

</script>

<template>
    <a-table
        :loading="loading"
        @page-change="(e) => pagination.current = e"
        :pagination="pagination"
        :data="vo.rows"
        :columns="columns"
        class="flex-grow mt-[20px] w-full">
        <template v-slot:qrcode="{record}">
            <a-image
                width="48px"
                height="48px"
                :src="record.qrcode">
            </a-image>
        </template>
        <template v-slot:action="{record}">
            <EditQR :detail="record" @success="fetchData"></EditQR>
        </template>
    </a-table>
</template>

<style scoped lang="scss">

</style>
