<template>
	<h2 class="contentTitle">
		<div class="Levelone">
			{{ lang.ssAiExperience }}
		</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>
</template>

<script setup>
import { ref,onMounted, inject } from "vue";
import { useRouter } from "vue-router";
import axios from 'axios';
const router = useRouter();
const lang = inject('lang')
const loading = ref(false)
const listData = ref([
	// {
	// 	name: "手写数字识别的原理演示",
	// 	url: "https://aihub.cocorobo.cn/homes/details?0",
	// 	img: "https://aihub.cocorobo.cn/aihub/static/media/%E6%89%8B%E5%86%99%E6%95%B0%E5%AD%97%E8%AF%86%E5%88%AB.06caf300.png",
	// },
	// {
	// 	name: "CNN 解释器",
	// 	url: "https://aihub.cocorobo.cn/homes/details?1",
	// 	img: "https://aihub.cocorobo.cn/aihub/static/media/CNN%20%E8%A7%A3%E9%87%8A%E5%99%A8(%E5%B1%82%E8%AE%A1%E7%AE%97%E8%BF%87%E7%A8%8B.469b6d97.png",
	// },
	// {
	// 	name: "数据分类器",
	// 	url: "https://aihub.cocorobo.cn/homes/details?2",
	// 	img: "https://aihub.cocorobo.cn/aihub/static/media/%E6%95%B0%E6%8D%AE%E5%88%86%E7%B1%BB%E5%99%A8(%E8%B0%83%E5%8F%82%E8%BF%87%E7%A8%8B).bd57672f.png",
	// },
]);
// 拉取用户信息并处理
const gotoUrl = (val) => {
	window.open(val.link, "_blank");
};

const gotoPage = () => {
	router.push(`/details/${lang.ssAiExperience}`);
};
onMounted(() => {
    getdata()
})
const getdata =()=>{
	loading.value = true
	let kk = '0d210c77-ad80-11f0-99cb-005056924926,4638538d-ad8c-11f0-99cb-005056924926,c3d15958-ad80-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;
}
</style>
