<template>
	<h2 class="contentTitle">
		<div class="Levelone">
			{{ lang.ssAiExplore }}
		</div>
	</h2>

	<div class="aiex" v-loading="loading">
		<div
			class="cont"
			v-for="(i, ind) in listData"
			:key="ind"
			@click="gotoUrl(i)"
		>
			<img :src="i.img" alt="" />
			<div class="tit">
				{{ i.name }}
			</div>
		</div>
		<div @click="gotoPage" class="cont" style="display: flex;justify-content: center;align-items: center;">
				{{ lang.ssViewMore }}
		</div>
	</div>
    <opendetail ref="opendetailRef"></opendetail>
	 
</template>

<script setup>
import axios from 'axios';

import { ref,onMounted, inject } from "vue";
import { useRouter } from "vue-router";
import taideng from '@/assets/img/taideng.png'
import esy from '@/assets/img/esy.png'
import ludeng from '@/assets/img/ludeng.png'
import { userInfoStore } from '../../stores/counter'
import dian from '@/assets/icon/dianji.png'
import opendetail from './opendetail.vue'
const lang = inject('lang')
const opendetailRef = ref(null)
const user = userInfoStore()

const iframeRef1Url = ref('')
const cid = ref('')
const dialogVisible = ref(false)
const loading = ref(false)
const Tips = ref('')
const router = useRouter();
const listData = ref([]);

onMounted(() => {
    getdata()
})
// 打开课程弹框
const gotoUrl = (val) => {
    opendetailRef.value.gotoPage(val)

	// console.log('val',val);
	
	// iframeRef1Url.value = val.url
	// cid.value = val.courselink
	// dialogVisible.value = true
	// Tips.value = val.name
	// window.open(val.url, "_blank");

};
const gotoPage = () => {
	router.push(`/details/${lang.ssAiExplore}`);
};
const getdata =()=>{
	loading.value = true
	let kk = '4638538d-ad8c-11f0-99cb-005056924926,91d7d147-ad8c-11f0-99cb-005056924926,a4b3d989-ad8c-11f0-99cb-005056924926'
	axios.get('https://pbl.cocorobo.cn/api/pbl/getAIcourseType?con='+kk)
    .then(res => {
        console.log('res.data[0]',res.data[0]);
		let data = res.data[0]
		data.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
			}
		})
       
        listData.value = data       
        loading.value = false
    })
    .catch(err=>{
        console.log(err);
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
.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 {
			width: 100%;
			border-radius: 5px;
		}
		.tit{
			margin-top: 16px;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
}
.Levelone{
  width: 120px;
  background: #E0EAFB;
  border-radius: 5px;
  color: #5D8AFB;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 33px;
  font-size: 16px;
  font-weight: 500;
}
: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>
