<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="con">
                <div v-for="l in i.ch" :key="l" class="conL" @click="gotoPage(l)">
                    <img :src="l.img" alt="">
                    <div>{{ l.name }}</div>
                </div>
            </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>
</template>

<script setup>
import axios from 'axios';
import { ref,onMounted, inject } from 'vue';
const lang = inject('lang')

const listData = ref([])
const loading = ref(false)


onMounted(() => {
    requestUser()
})
// 拉取用户信息并处理
const requestUser = () => {
    loading.value = true
    axios.get(`https://pbl.cocorobo.cn/api/pbl/selectAiExp?cl=0`)
    .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 = 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 gotoPage = (val)=>{
    window.open(val.link, "_blank")
}

</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;
    }
}
.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;
		}
	}
}
</style>