<template>
    <Header></Header>
    <el-page-header>
        <template #breadcrumb>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: `/details/${params.title}` }">{{ params.title }}</el-breadcrumb-item>
                <el-breadcrumb-item>{{ params.id }}</el-breadcrumb-item>
            </el-breadcrumb>
        </template>
        <div class="iframDiv">
            <iframe :src="iframeSrc" frameborder="0"
            allow="camera *; fullscreen *;fullscreen 'src'; microphone *"></iframe>
        </div>
    </el-page-header>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';  //1.先在需要跳转的页面引入useRouter
import main from './main.vue';
import Header from './header.vue';
const { query, params } = useRoute()

const iframeList = [
    {
        label: "情绪识别",
        src: "//ai-demos.cocorobo.cn/labs/emotion-recognition/"
    },{
        label: "物体识别",
        src: "//ai-demos.cocorobo.cn/object-detection_new/index.html"
    },{
        label: "语音识别",
        src: "//ai-demos.cocorobo.cn/labs/speech-recognition/"
    },{
        label: "图形化",
        src: "//beta.v.cocorobo.cn/?lang=zh-hans"
    },{
        label: "Python",
        src: "//beta.v.cocorobo.cn/python/?lang=zh-hans"
    },{
        label: "课程管理",
        src: "//beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/course?userid=a77e9404-efec-11e9-96f9-028edca3b798&oid=45facc0a-1211-11ec-80ad-005056b86db5&org=&role=0"
    },{
        label: "课程中心",
        src: "//beta.pbl.cocorobo.cn/pbl-student-table/dist/#/index?userid=a77e9404-efec-11e9-96f9-028edca3b798&oid=45facc0a-1211-11ec-80ad-005056b86db5&org=&tType=1&cid=&screenType=1"
    },{
        label: "学生评价",
        src: "//beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/works?userid=a77e9404-efec-11e9-96f9-028edca3b798&oid=45facc0a-1211-11ec-80ad-005056b86db5&org="
    },{
        label: "后台管理",
        src: "//beta.pbl.cocorobo.cn/pbl-teacher-table/dist/#/works?userid=a77e9404-efec-11e9-96f9-028edca3b798&oid=45facc0a-1211-11ec-80ad-005056b86db5&org="
    },
]
const iframeSrc = ref('')
onMounted(()=>{
    iframeSrc.value = iframeList.find(x=>x.label == params.id).src
})
</script>

<style lang="scss">
.el-page-header {
    padding: 20px 10%;
    background: #F0F2F5;
    min-height: calc(100vh - 60px);

    .el-page-header__header {
        display: none;
    }

    .el-page-header__main {
        width: 100%;
        height: calc(100% - 30px);

        .iframDiv {
            width: 100%;
            height: 100%;

            iframe {
                width: 100%;
                height: 100%;
                min-height: 660px;
            }
        }

    }
}
</style>