// 首页体系
// 字符上标
function convertToSuperscript(str) {
    var regex = /[\\\\|\?]+/; // 定义特殊符号的正则表达式

    if (regex.test(str)) {
        return str.replace(/([\\\\|\?])/g, '<sup>$1</sup>'); // 使用正则表达式全局替换特殊符号并添加上标样式
    } else {
        return str;
    }
}

let urlStr = window.location.href
let apilang = ''
let strIntroduce = ''
let moreStr = ''
if(urlStr.includes('English')){
    // url = url.replace('English',change)
    // window.location.href = url
    apilang = 'English'
    strIntroduce = 'INTRODUCE'
    moreStr = 'MORE'
}else if(urlStr.includes('Chinese')){
    apilang = 'Chinese'
    strIntroduce = '介绍'
    moreStr = '更多'
}else if(urlStr.includes('Russian')){
    apilang = 'Russian'
    strIntroduce = 'Презентация'
    moreStr = 'больше'
}else if(urlStr.includes('Spain')){
    apilang = 'Spain'
    strIntroduce = 'Introducción'
    moreStr = 'Más'
}
// 获取体系列表
$.get(`http://www.ccdcdf.com:6080/api/index/getSystemList?apilang=${apilang}`, function (res) {
    console.log('返回的数据', res)
    let str = ''
    let arr = res.data.slice(0, 6)
    arr.forEach(item => {
        let title = convertToSuperscript(item.title)
        let description = convertToSuperscript(item.description)

        // let objEncoded = encodeURIComponent(it);
        str += `
        <a href="./system/system_detail.html?data=${item.id}">
                    <div>
                    <span>${title}</span>
                    <p>${description}</p>
                    <div></div>
                    </div>
                </a>
        `
    })
    $('.info').append(str)
})

let baseUrl = 'https://ccdcfile.oss-cn-chengdu.aliyuncs.com'
// 获取技术列表
$.get(`http://www.ccdcdf.com:6080/api/index/getTechnologyList?apilang=${apilang}`, function (res) {
    console.log('返回的数据', res)
    let arr = res.data.slice(0, 4)
    let str = ''
    arr.forEach(item => {
        let title = convertToSuperscript(item.title)
        let description = convertToSuperscript(item.description)
        
        // let objEncoded = encodeURIComponent(it);
        str += `
        <a href="./technology/technology_detail.html?data=${item.id}">
        <div class="child" style="background: linear-gradient(180deg, rgba(30, 43, 95, 0) 0%, rgba(30, 43, 95, 0.8) 100%), url(${item.image}) center center no-repeat;
            background-size: 100% 100%;">
                        <div class="tec_sp">
                        <span>${title}</span>
                        <p>${description}</p>
                        </div>
                        <div class="tec_more">${moreStr}</div>
                    </div>
                </a>
        `
    })
    $('.tech').append(str)
})

// 获取实验室列表
$.get(`http://www.ccdcdf.com:6080/api/index/ObtainLaboratory?apilang=${apilang}`, function (res) {
    console.log('返回的数据', res)
    let arr = res.data.slice(0, 4)
    let str = ''
    arr.forEach(item => {
        let title = convertToSuperscript(item.title)
        title = title.toUpperCase()
        let description = convertToSuperscript(item.description)
        
        // let objEncoded = encodeURIComponent(it);
        str += `
        <a href="./team_lab/t_l_lab_detail.html?data=${item.id}">
        <div class="child " style=" background: linear-gradient(180deg, rgba(30, 43, 95, 0) 0%, rgba(30, 43, 95, 0.8) 100%), url(${baseUrl + item.covos}) center center no-repeat;
        background-size: 100% 100%;">
                        <span>${title}</span>
                        <p>${description}
                        </p>
                        <div>${moreStr}</div>
                    </div>
                </a>
        `
    })
    $('.team_Four').append(str)
})

// 获取产品列表
$.get(`http://www.ccdcdf.com:6080/api/index/getProductByCate?apilang=${apilang}`, function (res) {
    console.log('产品', res)
    let arr = res.data.sort(function(a,b){
        return a.views - b.views
    })
    arr = arr.slice(0,8)
    let str = ''
    arr.forEach(item => {
        let section = item.url.split('/')[2]
        console.log(section)
        let title = convertToSuperscript(item.title)
        // title = title.toUpperCase()
        let description = convertToSuperscript(item.description)
        
        // let objEncoded = encodeURIComponent(it);
        str += `
        <div class="swiper-slide pro" style="border-radius: 13px 13px 13px 13px;">
                        <img src="${item.image}" style="border-radius: 13px 13px 13px 13px; height:100%;width:auto;"/>
                        <div class="bg_p">
                            <p class="p_one">${title}</p>
                            <p class="p_two" style="display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2; 
                            overflow: hidden;
                            text-overflow: ellipsis;">${description}</p>
                            <a href="./product/product_type.html?data=${item.channel_id}&title=${section}">
                                <p class="p_more">${moreStr}</p>
                            </a>
                        </div>
                    </div>
        `
    })
    // let str1 = `
    // <div class="swiper-wrapper">
    // ${str}
    // </div>
    // <div class="swiper-button-next">
    //                 <img src="../static/imgs/home/right.png" alt="" class="icon next" style="margin-right: 33px;">
    //             </div>
    //             <div class="swiper-button-prev">
    //                 <img src="../static/imgs/home/left.png" alt="" class="icon prev" style="margin-left: 33px;">
    //             </div>
    //             <!-- <div class="swiper-scrollbar"></div> -->
    //             <div class="swiper-pagination"></div>
    //             <a href="./product/product.html" target="_self">
    //                 <div class="more"><p style="width: 40px;color: #C70009;">更多</p> <img style="width: 19px;
    //                 height: 10px;margin-right: 5px;" src="../static/imgs/home/red_more.png" alt=""></div>
    //             </a>
    // `
    $('.products').append(str)
     // 产品区域轮播
     var swiper = new Swiper('.proSwiper', {
        slidesPerView: 4,
        // spaceBetween: 20,
        spaceBetween: 10,
        slidesPerGroup: 4,
        loop: true,
        loopFillGroupWithBlank: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: false,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
})
// 产品区域鼠标移入效果
$('.pro').removeClass('swiper-slide-active')
// $('.pro').mouseenter(function () {
//     $(this).siblings().removeClass('swiper-slide-active')
//     $(this).addClass('swiper-slide-active')
// })
$(document).on('mouseenter','.pro',function(){
    $(this).siblings().removeClass('swiper-slide-active')
    $(this).addClass('swiper-slide-active')
})
$(document).on('mouseleave','.pro',function(){
    $(this).siblings().removeClass('swiper-slide-active')
    $(this).removeClass('swiper-slide-active')
})
// $('.pro').mouseleave(function () {
//     $(this).siblings().removeClass('swiper-slide-active')
//     $(this).removeClass('swiper-slide-active')
// })

// 获取首页视频
$.get(`http://www.ccdcdf.com:6080/api/index/HomepageVideo?apilang=${apilang}`, function (res) {
    console.log('返回的数据', res)
    $('.foot').empty()
    let str = ''
        // let objEncoded = encodeURIComponent(it);
        str += `
        <video src="${baseUrl + res.data[0].HomepageVideo}" class="video" controls muted autoplay  loop></video>
        `
    $('.foot').append(str)
})