<template>
    <div class="container-bgc">
        <div class="top">
            <div class="title">{{ setting.title }}</div>
        </div>
        <!-- 右边箭头 -->
        <button class="submit-right" @click="SubRight"></button>
        <!-- 左边按钮 -->
        <button class="submit-left" @click="SubLeft"></button>
        <div class="question-body">
            <div class="sumTotal">第<span>{{ currentKnowledgeIndex + 1 }}</span>个/共{{ Knowledges.length }}个</div>
            <div class="question">{{ currentKnowledgeTitle }}</div>
            <el-scrollbar max-height="210px">
                <div class="txt" v-html="currentKnowledge"></div>
            </el-scrollbar>
            <div class="finished" v-show="isStudy">已学习</div>
        </div>
        <div class="submit-buttons">
            <button class="submit-btn" @click="reset">退出</button>
            <button class="submit-btn" @click="enter">完成学习</button>
            <!-- <router-link class="submit-btn" :to="{ path:'/studyPage'}" >返回</router-link> -->
            <!-- <router-link class="submit-btn" @click="finishStudy">完成学习</router-link> -->
        </div>

    </div>
</template>

<script lang="ts" setup name="knowledgePage">
import settingStore from "@/store/modules/setting";
import { ref, computed, onMounted, } from "vue"
import { ElMessage } from 'element-plus'
import { getKnowledgeService, knowledgeCheckService } from '@/api/user'
import { useRouter } from 'vue-router';
const router = useRouter()
const setting = settingStore();
const isStudy = ref(false)
//左箭头
const SubLeft = () => {
    console.log(currentKnowledgeIndex.value)
    if (currentKnowledgeIndex.value >= 1) {
        currentKnowledgeIndex.value = currentKnowledgeIndex.value - 1
    } else {
        ElMessage.warning('已是第一个知识点')
    }
    isStudy.value = true
}
const index = ref(0)
//右箭头
// const activeData = ref({})
const SubRight = async() => {
    await knowledgeCheckService(Knowledges.value[currentKnowledgeIndex.value].id)
    Knowledges.value[currentKnowledgeIndex.value].isStudy = true
    if (currentKnowledgeIndex.value + 1 < Knowledges.value.length) {
        currentKnowledgeIndex.value++; // 更新到下一题

    }
    else {
        ElMessage.success('知识点已学习完毕，请提交')
    }
    isStudy.value = Knowledges.value[currentKnowledgeIndex.value].isStudy
    console.log(Knowledges.value);
    
}

const Knowledges = ref<any[]>([]);
const getKnowledge = async () => {
    const res: any = await getKnowledgeService();
    Knowledges.value = res.result.kpVlist
    // isStudy.value = Knowledges.value[currentKnowledgeIndex.value].isStudy
    console.log(Knowledges.value, 'ress')
}
// 当前题目的索引
const currentKnowledgeIndex = ref(0);
const currentKnowledge = computed(() => {
    // 确保 questions.value 至少有一个元素
    if (Knowledges.value.length > 0) {
        return Knowledges.value[currentKnowledgeIndex.value].knowledgeContext;
    }
    return '';
});
const currentKnowledgeTitle = computed(() => {
    // 确保 questions.value 至少有一个元素
    if (Knowledges.value.length > 0) {
        return Knowledges.value[currentKnowledgeIndex.value].knowledgeName;
    }
    return '';
});

const reset = () => {
    router.push('/studyPage')
}
const enter = () => {
    console.log('gggg');
    const allStudied = Knowledges.value.every(item => item.isStudy);
    if (allStudied) {
        router.push('/studyPage');
        localStorage.setItem('isStudy', 'true');
    } else {
        ElMessage.error('请先完成所有学习内容')
    }
}

onMounted(() => { getKnowledge() });
</script>

<style lang="scss" scoped>
.container-bgc {
    position: relative;
    width: 100%;
    // height: 1000px;
    min-height: 100vh;
    // background-color: #091d22;
    background: url("@/assets/images/bg3.png") no-repeat;
    background-size: cover;

    .submit-right {
        background: url("@/assets/images/right.png") no-repeat;
        background-size: contain;
        width: 60px;
        /* 按钮宽度 */
        height: 60px;
        /* 按钮高度 */
        border: none;
        cursor: pointer;
        position: absolute;
        right: 0;
        /* 紧靠右部 */
        top: 40%;
        /* 垂直居中*/
    }

    .submit-left {
        background: url("@/assets/images/left.png") no-repeat;
        background-size: contain;
        width: 60px;
        /* 按钮宽度 */
        height: 60px;
        /* 按钮高度 */
        border: none;
        cursor: pointer;
        position: absolute;
        left: 0;
        /* 紧靠左部 */
        top: 40%;
        /* 垂直居中*/
    }

    .top {
        width: 100%;
        height: 75px;
        text-align: center;
        font-size: 42px;
        line-height: 75px;
        font-style: italic;
        background: url("@/assets/images/topbgc.png") no-repeat;
        background-size: cover;

        .title {
            color: #fff;
        }
    }

    .question-body {
        position: relative;
        background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center;
        /* 添加 background-position */
        background-size: 99%;
        /* 确保背景图片覆盖整个元素 */
        width: 1100px;
        /* 100% 宽度以确保背景图片完全显示 */
        height: 600px;
        /* 固定高度 */
        margin-top: 100px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 30px;

        .sumTotal {
            font-size: 30px;
            /* 字体大小 */
            text-align: right;
            /* 水平居中 */
            letter-spacing: 3px;
            /* 字符间距，单位可以是 px、em 等 */
            color: #dc4758;
            margin-top: 48px;
            margin-bottom: -50px;
        }

        .question {
            font-size: 42px;
            /* 字体大小 */
            text-align: center;
            /* 水平居中 */
            letter-spacing: 3px;
            /* 字符间距，单位可以是 px、em 等 */
            margin-top: 25px;
            margin-bottom: 20px;
            color: #fff;
        }

        .scrollbar-demo-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            margin: 20px;
            margin-top: 30px;
            text-align: center;
            border-radius: 4px;
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
        }

        .txt {
            margin-top: 28px;
            margin-left: 20px;
            margin-right: 20px;
            font-size: 18px;
            /* 字体大小 */
            font-family: Consolas, sans-serif;
            /* 字体样式 */
            letter-spacing: 1.5px;
            /* 字符间距，单位可以是 px、em 等 */
            line-height: 1.5;
            /* 行间距，1.5 表示字体大小的 1.5 倍 */
            color: #9b9a9a;
        }

        .finished {
            font-size: 30px;
            /* 字体大小 */
            text-align: right;
            /* 水平居中 */
            letter-spacing: 3px;
            /* 字符间距，单位可以是 px、em 等 */
            color: #dc4758;
            margin-top: 30px;
            margin-right: 20px;
        }
    }

    .submit-buttons {
        display: flex;
        /* 使用 Flexbox 布局 */
        flex-direction: row;
        /* 水平排列按钮 */
        justify-content: center;
        /* 水平居中 */
        gap: 450px;
        /* 按钮之间的间距 */
        margin-top: 10px;
    }

    .submit-btn {
        background: url("@/assets/images/Button.png") center;
        background-size: contain;
        /* 确保背景图片覆盖整个元素 */
        background-color: transparent;
        /* 背景颜色设置为透明 */
        border: none;
        /* 移除边框 */
        //cursor: pointer;
        /* 鼠标悬停时显示手型 */
        width: 300px;
        height: 41px;
        font-size: 17px;
        font-weight: bold;
        /* 文字加粗 */
        color: #fff;
        display: flex;
        align-items: center;
        /* 垂直居中 */
        justify-content: center;
        /* 水平居中 */
        text-decoration: none
    }

    .el-scrollbar {
        height: 290px;
    }
}
</style>
