<template>
    <div class="book-item">
        <!-- 书籍封面和信息 -->
        <div class="book-card" @click="handleClick">
            <div class="book-cover">
                <img :src="book.image" :alt="book.name">
                <!-- 原创标签 -->
                <div v-if="book.isOriginal == 'Y'" class="tag original">原创</div>
                <span class="book-status">{{ book.status }}</span>
                <span v-if="deleteMode" class="delete-icon" @click.stop="handleDelete">
                    <img src="@/assets/images/移除书架.png" alt="移除">
                </span>
            </div>
            <div class="book-info">
                <h3 class="book-title">{{ book.name }}</h3>
                <p class="book-author">作者：{{ book.author }}</p>
                <p class="last-read">上次阅读：{{ book.lastReadChapter }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
    name: 'BookshelfItem',
    props: {
        book: {
            type: Object,
            required: true,
            default: () => ({
                id: '',
                name: '',
                author: '',
                details: '',
                image: '',
                status: '',
                service: '',
                lastReadChapter: ''
            })
        },
        deleteMode: {
            type: Boolean,
            default: false
        }
    },
    emits: ['click', 'delete'],
    setup(props, { emit }) {
        // 点击书籍卡片的处理函数
        const handleClick = () => {
            if (!props.deleteMode) {
                emit('click', props.book);
            }
        };

        // 点击删除图标的处理函数
        const handleDelete = () => {
            emit('delete', props.book.id);
        };

        return {
            handleClick,
            handleDelete
        };
    }
});
</script>

<style lang="scss" scoped>
@use '@/assets/styles/variables.scss' as vars;

.book-item {
    .book-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s;
        cursor: pointer;

        &:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }

        .book-cover {
            position: relative;
            width: 100%;
            padding-top: 140%;
            overflow: hidden;

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .tag {
                position: absolute;
                top: 0;
                left: 0;
                font-size: 12px;
                color: #fff;
                padding: 2px 8px;
                border-radius: 0 0 4px 0;
                z-index: 1;
                
                &.original {
                    background-color: #ffa502;
                }
            }

            .book-status {
                position: absolute;
                top: 10px;
                right: 10px;
                padding: 2px 8px;
                background-color: rgba(0, 0, 0, 0.6);
                color: #fff;
                font-size: 12px;
                border-radius: 10px;
            }

            .delete-icon {
                position: absolute;
                top: 10px;
                left: 10px;
                width: 30px;
                height: 30px;
                background-color: rgba(0, 0, 0, 0.6);
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 2;

                img {
                    width: 16px;
                    height: 16px;
                }
            }
        }

        .book-info {
            padding: 12px;

            .book-title {
                margin: 0 0 5px;
                font-size: 16px;
                font-weight: bold;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .book-author {
                font-size: 14px;
                color: #666;
                margin: 0 0 5px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .last-read {
                font-size: 12px;
                color: #999;
                margin: 0;
            }
        }
    }
}
</style> 