<script setup lang="tsx">

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

/*
            {
                "title": "活着",
                "borrow_date": "2024-12-08",
                "due_date": "2024-12-22",
                "status": "在借"
            },
 */
const data = useRecordStore().infos;
const {isAdministrator} = storeToRefs(useUserStore());
console.log(isAdministrator.value)
const columns = ref<TableProps['columns']>([
    {
        colKey: "title",
        title: "书名",
    },
    {
        colKey: "borrow_date",
        title: "借书日期",
    },
    {
        colKey: "due_date",
        title: "归还日期",
    },
    {
        colKey: "status",
        title: "状态",
        cell: (_, row: any) => GetTypeHtml(row!)
    },
    {
        colKey: "operation",
        title: "操作",
        fixed: 'right',
        width: 150,
        cell: () => GetOperationHtml()
    }
]);

function GetTypeHtml({row: {status}}: { row: { status: string } }) {
    switch (status) {
        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>
        case '逾期':
            return <t-tag shape="round" theme="danger" variant="light-outline">
                <span>逾期</span>
            </t-tag>
    }
}

function GetOperationHtml() {
    if (!isAdministrator.value)
        return <t-button>归还</t-button>
    return <t-button>取消预订</t-button>
}

const configurableColumns = ref(['title', 'borrow_date', 'due_date', 'status']);
const indexColumns = ref(['title', 'borrow_date', 'due_date', 'status']);
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>