<template>
    <Header v-if="!gotype.gotype"></Header>
    <el-page-header>
            <template #breadcrumb>
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">
                            <span style="color: #000;font-weight: normal;">{{ lang.ssAiLiteCourse }}</span>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>{{ params.title }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <router-link to="/">
                        <img style="height: 14px;object-fit: contain;" src="../assets/img/icon_return2.png" alt="">
                        {{ lang.ssBack }}
                    </router-link>
                </div>
            </template>

        <div class="iframDiv">
            <CourseSelect v-if="detailsTitle == lang.ssCourseList"></CourseSelect>
            <resource v-else-if="detailsTitle == lang.ssResCenter"></resource>
            <Practice v-else-if="detailsTitle == lang.ssPracticeCenter"></Practice>
            <other v-else-if="detailsTitle == lang.ssOtherCourseRes"></other>
            <AIExperienceCon v-else-if="detailsTitle == lang.ssAiExperience"></AIExperienceCon>
            <AIexplorationCon v-else-if="detailsTitle == lang.ssAiExplore"></AIexplorationCon>
        </div>
    </el-page-header>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';
import CourseSelect from '@/components/main/courseSelect.vue'
import resource from '@/components/main/resource.vue';
import Practice from '@/components/main/Practice.vue';
import other from '@/components/main/other.vue';
import AIExperienceCon from '@/components/main/AIExperienceCon.vue';
import AIexplorationCon from '@/components/main/AIexplorationCon.vue';
import Header from './header.vue';
import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
import { pageGotype } from '../stores/counter'

const { query, params } = useRoute()
console.log(query, params)
const gotype = pageGotype()
const lang = inject('lang')

const detailsTitle = ref('')
onMounted(()=>{
    detailsTitle.value = params.title
})
</script>

<style scoped lang="scss">
    a {
        text-decoration: none;
    }
</style>