<script setup lang="ts">
import {useListStore} from "@/store";
import BasicDrawer, {type DrawerColumn} from "@/components/basic-drawer.vue";
import {storeToRefs} from "pinia";

let infos = useListStore().infos;
/*                "title": "百年孤独",
                "author": "加西亚·马尔克斯",
                "publisher": "南海出版公司",
                "year": 1967,
                "isbn": "9787544253993",
                "genre": "魔幻现实主义",
                "available_copies": 12*/
let columns: DrawerColumn[] = [
    {key: 'title', value: '书名'},
    {key: 'author', value: '作者'},
    {key: 'publisher', value: '出版社'},
    {key: 'year', value: '出版年份'},
    {key: 'isbn', value: 'ISBN'},
    {key: 'genre', value: '类型'},
    {key: 'available_copies', value: '可用副本'},
]
let {drawerVisible} = storeToRefs(useListStore());

</script>

<template>
    <div class="list-cards">
        <t-card class="card" v-for="t of infos" :title="t.title" :bordered="true" hover-shadow="true"
                :style="{ width: '400px' }" @click="drawerVisible = true">
            <div>
                作者：{{ t.author }}<br>
                出版社：{{ t.publisher }}<br>
                类型：{{ t.genre }}<br>
                可用副本：{{ t.available_copies }}<br>
            </div>
        </t-card>
    </div>
    <basic-drawer :size="'medium'" :columns="columns" :data="useListStore().getCurrentData()" :footer="false" :visible="drawerVisible" :title="'书籍详情'" @close="drawerVisible = false"/>
</template>

<style scoped>
.list-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card {
    margin: 10px;
    text-align: left;
}
</style>