<template>
    <div class="alexp"  v-loading="loading">
        <div v-for="i in listData" :key="i.id" class="areaL">
            <div class="tit">{{ i.name }}</div>
           <div class="aiex">
                <div
                    class="cont"
                    v-for="l in i.ch" :key="l"  @click="gotoPage(l)"
                >
                    <img :src="l.img" alt="" />
                    <div class="tit">
                        {{ l.name }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
    <opendetail ref="opendetailRef"></opendetail>
        <!-- <el-dialog
            v-model="dialogVisible"
            :before-close="handleClose"
            fullscreen
            :show-close="false"
        >
            <template #header>
               <div class="topH">
					<div class="backA"></div>
					<div class="dialog-header">
						{{ Tips }}
					</div>
					<div class="backA">
						<div class="bABtn" style="flex-shrink: 0;" @click="openCourseDetail">进入课程</div>
						<div @click="dialogVisible = false" style="cursor: pointer;display: flex;align-items: center;gap: 5px;">
                            <img src="../../assets/icon/backk.svg" alt="">
							<span style="flex-shrink: 0;">返回</span>
						</div>
					</div>
				</div>
            </template>
            <div class="fileArea" @click="openDra">
                <img src="../../assets/icon/filemr.svg" alt="">
            </div>
            <el-drawer
                v-model="drawer"
                direction="rtl"
                size="500px"
                :close-on-click-modal="false"
                :show-close="false"
                :before-close="handleClose"
            >
                <template #header>
                    <div class="fileArea" @click="drawer = false">
                        <img src="../../assets/icon/draCha.svg" alt="">
                    </div>
                </template>
                <template #default>
                    <div class="draCon">
                        <div class="dratit">
                            <div class="tit" :class="[drawertit == 0 ? 'tit2':'']" @click="drawertit = 0">文本</div>
                            <div class="tit" :class="[drawertit == 1 ? 'tit2':'']" @click="drawertit = 1">附件({{ inst.file.length }})</div>
                        </div>
                        <div class="draconL" v-if="drawertit == 0">
                             <div v-html="inst.content"></div>
                        </div>
                        <div class="draCon" v-if="drawertit == 1">
                            <div class="pdflist" v-if="inst.file.length">
                                <div v-for="item in inst.file" :key="item.id">
                                    <div @click="cutPdf(item.url)" class="pdfCS" :class="[pdfUrl == item.url? 'pdfback' : '']">
                                        <div class="pdfCSTit">{{ item.name }}</div>
                                        <img style="flex-shrink: 0;" src="../../assets/icon/xiazai.png" alt="" >
                                    </div>
                                </div>
                            </div>
                            <div style="flex: 1;" v-if="inst.file.length">
                                <iframe :src="pdfUrl" width="100%" height="100%" frameborder="0"></iframe>
                            </div>
                        </div>
                    </div>
                   

                </template>
            </el-drawer>
          
            <iframe 
                allow="camera *; microphone *; display-capture; midi; encrypted-media; fullscreen; geolocation; clipboard-read; clipboard-write; accelerometer; autoplay; gyroscope; payment; picture-in-picture; usb; xr-spatial-tracking;"
                ref="iframeRef1" 
                :src="iframeRef1Url" 
                style="width: 100%;height: 100%;"
                frameborder="0">
            </iframe>
        </el-dialog> -->
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref,onMounted, inject } from 'vue';
import { userInfoStore } from '../../stores/counter'
import opendetail from './opendetail.vue'
const user = userInfoStore()
const lang = inject('lang')
const iframeRef1Url = ref('')
const cid = ref('')
const dialogVisible = ref(false)
const Tips = ref('')
const listData = ref([])
const loading = ref(false)
const opendetailRef = ref(null)

onMounted(() => {
    requestUser()
})
// 拉取用户信息并处理
const requestUser = () => {
    loading.value = true

    axios.get(`https://pbl.cocorobo.cn/api/pbl/selectAiExp?cl=1`)
    .then(res => {
        console.log(res);
        let data = res.data

        let data0 = data[0]
        data0.forEach(item => {
            if (lang.lang == 'hk') {
                item.name = item.namehk
            }else if (lang.lang == 'en') {
                item.name = item.namecom
            }
        })
        let data1 = res.data[1]
		data1.forEach(item => {
			if (lang.lang == 'hk') {
				item.name = item.namehk
				item.link = item.linkhk
			}else if (lang.lang == 'en') {
				item.name = item.namecom
				item.link = item.linkcom
			}
		})
        data0.forEach(item1 => {
            // 在第二个数组中查找匹配的数据
            const matchedItems = data1.filter(item2 => item2.levA === item1.id);
            // 将匹配的数据存入ch属性
            item1.ch = matchedItems;
        });
        listData.value = data[0]        
        loading.value = false
    })
    .catch(err=>{
        console.log(err);
        loading.value = false
    })
};
const handleClose = (done) => {
    done()
}
const gotoPage = (val)=>{
    opendetailRef.value.gotoPage(val)
    // window.open(val.link, "_blank")
    // console.log('val',val);
	// iframeRef1Url.value = val.link
	// cid.value = val.courselink
    // inst.value = JSON.parse(val.inst)
    // console.log('inst',{...inst.value});
    
    // if ({...inst.value}.file.length) {
    //     pdfUrl.value = {...inst.value}.file[0].url
    // }
	// dialogVisible.value = true
	// Tips.value = val.name
}
// const openCourseDetail = () => {
// 	let id = cid.value
// 	console.log(user.user)
// 	// 会返回复制得课程
// 	top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/getcopyCourseByUseridSz", [id, user.user.userid], function (res) {
// 		console.log(res)
// 		if (res.value[0].length > 0) {
// 		// let isSave = res.value[0].filter(x => {
// 		//   return x.courseId == id
// 		// })
// 		//这个是打开指定的课程接口
// 		top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 2, user.user.type);
// 		} else {
// 			updateCourseId(id, "studyDetail")
// 		}
// 	}, [], { "type": "POST", "withCredentials": true });
// }
// const updateCourseId = (id, type) => {
//   top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/copyCourseSz", [id, user.user.userid], function (res) {
//     console.log(res)
//     if (res.value[0][0].courseId != "") {
//       if (type == "openCourseNewUpdate") {
//         top.U.MD.D.I.openInApplication("openCourseNewUpdate", res.value[0][0].courseId)
//       } else {
//         top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 3, user.user.type);
//       }
//     }
//   }, [], { "type": "POST", "withCredentials": true });
// }
</script>

<style lang="scss" scoped>
.alexp{
    display: flex;
    flex-direction: column;
    gap: 20px;
    .areaL{
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .tit{
        font-size: 16px;
        color: #000;
        font-weight: 600;
    }
    .con{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        // grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 0px;
        .conL{
            flex: 1;
            box-sizing: border-box;
            // background: #fff;
            // border-radius: 10px;
            display: flex;
            cursor: pointer;
            flex-direction: column;
            justify-content: space-between;
            img{
                width: 100%;
                object-fit: cover;
                cursor: pointer;
            }
        }
    }
}
.aiex {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	.cont {
		border-radius: 4px;
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 1;
		cursor: pointer;
		padding: 12px;
		box-sizing: border-box;
		min-height: 36px;
		background: #fff;
		img {
			height: 170px;
            width: 100%;
            object-fit: cover;
			border-radius: 5px;
		}
		.tit{
			margin-top: 16px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
            font-weight: normal;
            color: #555555;
            font-size: 14px;
		}
	}
}
:deep(.el-dialog__body){
	width: 100% !important;
	height: calc(100% - 65px);
	padding: 0 !important;
	position: relative;
}
.dialog-header{
	font-size: 18px;
	display: flex;
	gap: 10px;
}
.courseL{
	background: #FFFFFF;
	cursor: pointer;
	color: #F5A70C;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 10px;
	box-sizing: border-box;
	border-radius: 5px;
	font-weight: 600;
	font-size: 18px;
	border: 2px #e7e7e7 solid;
	top: 10px;
	left: 65%;
    gap: 5px;
    img{
        height: 25px;
        object-fit: contain;
    }
}
</style>