<script setup lang="tsx">

import SuperTable from "@/components/super-table.vue";
import type {TableProps} from "tdesign-vue-next";
import {ref} from "vue";
import {useUsersStore, useUserStore} from "@/store";
import {storeToRefs} from "pinia";

/*
    {
        "id": 10,
        "name": "郑爽",
        "type": "图书管理员"
    }
 */
const data = useUsersStore().infos;
console.log(data)
const {identity} = storeToRefs(useUserStore());
const columns = ref<TableProps['columns']>([
    {
        colKey: "id",
        title: "ID",
    },
    {
        colKey: "name",
        title: "姓名",
    },
    {
        colKey: "type",
        title: "类型",
        width: 150,
        cell: (_, row: any) => GetTypeHtml(row!)
    },
    {
        colKey: "operation",
        title: "操作",
        fixed: 'right',
        width: 200,
        cell: () => GetOperationHtml()
    }
]);

function GetTypeHtml({row: {type}}: { row: { type: string } }) {
    switch (type) {
        case '借阅者':
            return <t-tag shape="round" theme="success" variant="light-outline">
                <span>借阅者</span>
            </t-tag>
        case '图书管理员':
            return <t-tag shape="round" theme="primary" variant="light-outline">
                <span>图书管理员</span>
            </t-tag>
    }
}

function GetOperationHtml() {
    return <div style="display: flex; justify-content: space-around;"><t-button>编辑</t-button><t-button>删除</t-button></div>
}

const configurableColumns = ref(['id', 'name', 'type', 'operation']);
const indexColumns = ref([...configurableColumns.value]);
// const defaultDisplayColumns = ref([...configurableColumns.value]);
// const pagination = ref<TableProps['pagination']>({
//     defaultPageSize: 10,
//     total: 10,
//     defaultCurrent: 1,
// })
</script>

<template>
    <super-table :data="data" :columns="columns" :configurable-columns="configurableColumns"
                 :index-columns="indexColumns"/>
</template>

<style scoped>
</style>