// let businessContent = null;
// 内容部分
const businessContent = document.querySelector('.business-content');
console.log(businessContent);
const businessBgImg = document.querySelector('#businessBgImg');
const business_card = document.querySelectorAll('.business-card');
const business_card_group = document.querySelector('.business-card-group');
console.log("我是"+business_card_group.children);

const businessList = [
    {
        img:"images/IMUT_day.jpg",
        name:"蓝牙手环",
        desc:"专注力提升设备是坤班核心业务之一，涵盖智能硬件研发、定制化生产、调试维护等全流程服务，聚焦提升学习/工作专注力，适配校园与企业多场景。"
    },

    {
        img:"images/IMUT_night.jpg",
        name:"UE5",
        desc:"基于UE5引擎的三维场景搭建与渲染服务，提供高精度模型制作、虚拟场景定制、可视化效果呈现，服务于影视、教育、工业等多个领域。",
    },

    {
        img:"images/IMUT_day.jpg",
        name:"AI影视人才",
        desc:"AI影视人才平台是坤班重点布局方向，整合人工智能技术与影视行业需求，提供人才匹配、AI工具开发、场景落地等一站式解决方案。",
    },

    {
        img:"images/IMUT_night.jpg",
        name:"中国通",
        desc:"海外通业务聚焦跨境技术合作与对接，整合海内外优质资源，搭建国际技术交流桥梁，助力项目出海与海外资源引进。",
    },    
];

business_card.forEach(card=>{
    console.log("card"+card);

    // console.log("businessList:"+businessList);
    
        card.addEventListener('mouseover',function(){
        // console.log(Array.from(business_card_group.querySelectorAll('.business-card')));
        //  const a = businessList.indexOf(card);
        //  console.log(a);
         
        const arrayindex = Array.from(business_card);
        const index = arrayindex.indexOf(card);
                console.log(businessList[index].name);
            businessContent.innerHTML = 
            `
                <div class="business-content-title" style="color:black;">${businessList[index].name}</div>
                <div class="business-content-desc" style="color:black;">${businessList[index].desc}</div>
            `;

            businessBgImg.style.opacity = 0;
            setTimeout(() => {
            businessBgImg.src = businessList[index].img;
            businessBgImg.onload = function() {
                businessBgImg.style.opacity = 1;
            };
        }, 300);
        // businessBgImg.style.transition = 'opacity 1s ease-in-out';
            // console.log(businessBgImg.style.transition);
            

        //    console.log(businessBgImg.src);
            
        })
});