<template>
    <el-dialog
        v-model="dialogVisible"
        title="投推荐票"
        width="400px"
        :show-close="true"
        :close-on-click-modal="false"
        class="recommend-dialog"
    >
        <div class="dialog-content">
            <div class="ticket-info">
                <div class="current-tickets">
                    <span class="label">当前推荐票：</span>
                    <span class="value">{{ userTickets }}</span>
                </div>
                <div class="ticket-input">
                    <span class="label">投出数量：</span>
                    <div class="input-group">
                        <el-button 
                            class="ticket-btn" 
                            :disabled="ticketCount <= 1"
                            @click="decreaseCount"
                        >-</el-button>
                        <el-input 
                            v-model.number="ticketCount" 
                            type="number" 
                            :min="1"
                            :max="userTickets"
                            @input="handleInput"
                        />
                        <el-button 
                            class="ticket-btn" 
                            :disabled="ticketCount >= userTickets"
                            @click="increaseCount"
                        >+</el-button>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button 
                    type="primary" 
                    :disabled="ticketCount <= 0 || ticketCount > userTickets"
                    :loading="loading"
                    @click="handleSubmit"
                >
                    确认投出
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useMainStore } from '@/store';
import { taskApi } from '@/api/user';
import { homeApi } from '@/api/home';


onMounted(() => {
    getMyRecommendTicketNum();
});

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    bookId: {
        type: [String, Number],
        required: true
    }
});

const emit = defineEmits(['update:visible', 'success']);

const store = useMainStore();
const loading = ref(false);
const ticketCount = ref(1);

const dialogVisible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
});

const userTickets = ref(0);

// 增加票数
const increaseCount = () => {
    if (ticketCount.value < userTickets.value) {
        ticketCount.value++;
    }
};

// 减少票数
const decreaseCount = () => {
    if (ticketCount.value > 1) {
        ticketCount.value--;
    }
};

// 获取我的推荐票数量
const getMyRecommendTicketNum = async () => {
    try {
        const res = await taskApi.getMyRecommendTicketNum();
        userTickets.value = res.result || 0;
    } catch (error) {
        console.error('获取推荐票数量失败:', error);
    }
};

// 处理输入
const handleInput = (value) => {
    const num = parseInt(value);
    if (isNaN(num)) {
        ticketCount.value = 1;
    } else if (num < 1) {
        ticketCount.value = 1;
    } else if (num > userTickets.value) {
        ticketCount.value = userTickets.value;
    } else {
        ticketCount.value = num;
    }
};

// 提交投票
const handleSubmit = async () => {
    if (ticketCount.value <= 0 || ticketCount.value > userTickets.value) {
        return;
    }

    try {
        loading.value = true;
        await homeApi.vote({
            bookId: props.bookId,
            num: ticketCount.value,
        });
        
        ElMessage.success('投票成功！');
        emit('success');
        dialogVisible.value = false;
        
        // 更新用户推荐票数量
        await store.getUserInfo();
        await getMyRecommendTicketNum();
    } catch (error) {
        console.error('投票失败:', error);
        ElMessage.error('投票失败，请重试');
    } finally {
        loading.value = false;
    }
};
</script>

<style lang="scss" scoped>
.recommend-dialog {
    :deep(.el-dialog__body) {
        padding: 20px;
    }
}

.dialog-content {
    .ticket-info {
        .current-tickets {
            margin-bottom: 20px;
            font-size: 16px;
            
            .label {
                color: #666;
            }
            
            .value {
                color: #0A2463;
                font-weight: bold;
                margin-left: 8px;
            }
        }
        
        .ticket-input {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            
            .label {
                width: 80px;
                color: #666;
            }
            
            .input-group {
                display: flex;
                align-items: center;
                flex: 1;
                
                .ticket-btn {
                    width: 40px;
                    height: 40px;
                    padding: 0;
                    font-size: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                :deep(.el-input) {
                    width: 100px;
                    margin: 0 10px;
                    
                    .el-input__wrapper {
                        padding: 0 10px;
                    }
                    
                    input {
                        text-align: center;
                    }
                }
            }
        }
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
</style> 