<template>
    <div class="text-main mb-3 flex items-center justify-between">
        <div class="flex items-center">
            <div :class="seqClass">1</div>选择知识点（从左侧勾选）
        </div>
        <div class="flex items-center gap-2">
            <el-button size="small" @click="handleBatchAdd">批量添加知识点</el-button>
            <el-button size="small" type="danger" @click="handleClearAll">一键清空</el-button>
        </div>
    </div>
    <div class="flex flex-row flex-wrap gap-3">
        <el-tag v-for="k in knowledgeCheckNodes" type="primary" round closable @close="removeKnowledge(k)">{{k.name}}</el-tag>
    </div>

    <!-- 批量添加知识点弹窗 -->
    <el-dialog v-model="showBatchDialog" title="批量添加知识点" width="500px">
        <el-form :model="batchForm" label-width="100px">
            <el-form-item label="知识点ID">
                <el-input
                    v-model="batchForm.knowledgeIds"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入知识点ID，多个ID用逗号分隔，例如：1,2,3,4"
                />
                <div class="text-gray-500 text-xs mt-1">支持逗号、空格、换行分隔</div>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showBatchDialog = false">取消</el-button>
                <el-button type="primary" @click="handleBatchSave" :loading="batchLoading">保存</el-button>
            </div>
        </template>
    </el-dialog>
    <div class="text-main mt-10 mb-3 flex items-center">
        <div :class="seqClass">2</div>试题设置
    </div>
    <div class="flex flex-row flex-wrap gap-10">
        <div v-for="t in qTypes" class="flex items-center gap-3">
            <el-text class="font-bold break-keep">{{t.dictLabel}}</el-text>
            <el-input-number v-model="t.count" :min="0" :precision="0" style="width: 120px;"/>
            <el-text class="text-gray-500">题</el-text>
            <el-input-number v-model="t.score" :min="0" :precision="1" style="width: 120px;" placeholder="分数"/>
            <el-text class="text-gray-500">分</el-text>
        </div>
    </div>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" size="large" @click="buildPaper">生成试卷</el-button>
    </div>
</template>

<script setup name="QuestionIntelligent">
import {ref} from 'vue'
import {useProvidePaperQuestionCondition} from "@/views/dz/papers/hooks/usePaperQuestionCondition.js";
import {useInjectPaperKnowledgeCondition} from "@/views/dz/papers/hooks/usePaperKnowledgeCondition.js";
import {ElMessageBox} from "element-plus";

const props = defineProps({
    exactMode: Boolean
})
const emits = defineEmits(['submit'])

const seqClass = 'inline-block rounded-full bg-blue-100 w-5 h-5 text-center mr-2'
const {knowledgeCheckNodes, removeKnowledge, clearAllKnowledge, batchAddKnowledge} = useInjectPaperKnowledgeCondition()
const {qTypes} = useProvidePaperQuestionCondition(props.exactMode, false)

const showBatchDialog = ref(false)
const batchLoading = ref(false)
const batchForm = ref({
    knowledgeIds: ''
})

const handleClearAll = async () => {
    if (knowledgeCheckNodes.value.length === 0) {
        ElMessage.warning('当前没有已选知识点')
        return
    }

    try {
        await ElMessageBox.confirm(
            `确定要清空所有 ${knowledgeCheckNodes.value.length} 个已选知识点吗？`,
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }
        )
        clearAllKnowledge()
        ElMessage.success('已清空所有知识点')
    } catch {
        // 用户取消
    }
}

const handleBatchAdd = () => {
    batchForm.value.knowledgeIds = ''
    showBatchDialog.value = true
}

const handleBatchSave = async () => {
    if (!batchForm.value.knowledgeIds || !batchForm.value.knowledgeIds.trim()) {
        ElMessage.warning('请输入知识点ID')
        return
    }

    batchLoading.value = true
    try {
        await batchAddKnowledge(batchForm.value.knowledgeIds)
        showBatchDialog.value = false
        batchForm.value.knowledgeIds = ''
    } finally {
        batchLoading.value = false
    }
}

const buildPaper = function () {
    // 过滤掉 count=0 的项
    const filteredQTypes = qTypes.value.filter(t => t.count > 0)
    emits('submit', filteredQTypes)
}
</script>

<style scoped>

</style>
