<template>
    <div class="book-stats-container">
        <div class="stats-section">
            <div class="stats-card">
                <div class="stats-header">
                    <div class="stats-title-block">
                        <span class="stats-indicator"></span>
                        <span class="stats-title">作品累计推荐票</span>
                    </div>
                </div>
                <div class="stats-content">
                    <div class="stats-info">
                        <div class="stats-value">{{ bookData.tuiNum }}</div>
                        <div class="stats-label">推荐票数</div>
                    </div>
                    <div class="stats-button">
                        <el-button class="recommend-btn" @click="showRecommendDialog">
                            <img src="@/assets/images/book/recommend.png" alt="投推荐票" class="icon">
                            <span>投推荐票</span>
                        </el-button>
                    </div>
                </div>
            </div>
            
            <div class="stats-divider"></div>
            
            <div class="stats-card">
                <div class="stats-header">
                    <div class="stats-title-block">
                        <span class="stats-indicator"></span>
                        <span class="stats-title">作者累计亲密值</span>
                    </div>
                </div>
                <div class="stats-value">{{ bookData.qmNum }}</div>
                <div class="stats-label">亲密值数</div>
            </div>
        </div>

        <!-- 推荐票弹窗 -->
        <RecommendDialog
            v-model:visible="recommendDialogVisible"
            :book-id="bookId || bookData.id"
            @success="handleRecommendSuccess"
        />
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { requireLogin } from '@/utils/auth';
import RecommendDialog from './RecommendDialog.vue';

export default defineComponent({
    name: 'BookStats',
    components: {
        RecommendDialog
    },
    props: {
        bookData: {
            type: Object,
            default: () => ({})
        },
        bookId: {
            type: [String, Number],
            default: null
        },
    },
    emits: ['recommend-success'],
    setup(props, { emit }) {
        const recommendDialogVisible = ref(false);

        // 原始的显示推荐弹窗方法
        const openRecommendDialog = () => {
            recommendDialogVisible.value = true;
        };

        // 带登录检查的显示推荐弹窗方法
        const showRecommendDialog = () => {
            if (requireLogin(() => {
                // 登录成功后执行
                console.log('登录成功，打开推荐票弹窗');
                openRecommendDialog();
            })) {
                // 已登录，直接打开弹窗
                openRecommendDialog();
            }
            // 未登录时会自动弹出登录框，无需额外处理
        };

        const handleRecommendSuccess = () => {
            // 投票成功后刷新数据
            if (props.bookData && typeof props.bookData.tuiNum === 'number') {
                props.bookData.tuiNum++;
            }
            
            // 向父组件发送推荐成功事件
            emit('recommend-success');
        };

        return {
            recommendDialogVisible,
            showRecommendDialog,
            handleRecommendSuccess
        };
    }
});
</script>

<style lang="scss" scoped>
.book-stats-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    padding: 20px;
    margin-bottom: 3px;

    .stats-section {
        display: flex;
        position: relative;

        .stats-divider {
            width: 1px;
            background-color: #EEEEEE;
            margin: 0 40px;
        }

        .stats-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding: 0 10px;

            .stats-header {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                margin-bottom: 15px;
                
                .stats-title-block {
                    display: flex;
                    align-items: center;
                    
                    .stats-indicator {
                        width: 4px;
                        height: 18px;
                        background-color: #0A2463;
                        border-radius: 2px;
                        margin-right: 8px;
                    }
                    
                    .stats-title {
                        font-size: 16px;
                        color: #333;
                        font-weight: 500;
                    }
                }
            }
            
            .stats-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                
                .stats-info {
                    display: flex;
                    flex-direction: column;
                }
            }

            .stats-value {
                font-size: 28px;
                font-weight: bold;
                color: #333;
                margin-bottom: 8px;
            }

            .stats-label {
                font-size: 14px;
                color: #999;
                margin-bottom: 15px;
            }

            .stats-button {
                .recommend-btn {
                    color: #0A2463;
                    border: 1px solid #0A2463;
                    padding: 8px 18px;
                    border-radius: 4px;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    gap: 5px;

                    .icon {
                        width: 16px;
                        height: 16px;
                    }
                }
            }
        }
    }
}
</style>