$('.detail_cont').hide()
// 字符上标
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 = ''
if(urlStr.includes('English')){
    // url = url.replace('English',change)
    // window.location.href = url
    apilang = 'English'
}else if(urlStr.includes('Chinese')){
    apilang = 'Chinese'
}else if(urlStr.includes('Russian')){
    apilang = 'Russian'
}else if(urlStr.includes('Spain')){
    apilang = 'Spain'
}
$(document).on('mouseover', '.area', function () {
    console.log($(this).attr("class"))
    console.log($(this))
    let id = $(this).attr("id")
    $('.detail_cont').empty()
    $.get(`http://www.ccdcdf.com:6080/api/index/getProductById?id=${id}&apilang=${apilang}`, function (res) {
        console.log('返回的数据', res)
        let data = res.data
        let str = ''

        // let title = convertToSuperscript(item.title)
        // let description = convertToSuperscript(item.description)

        // let objEncoded = encodeURIComponent(it);
        str += `
        <img src="../../../static/imgs/about/meeting.png" class="kuang" alt="">
        <p class="area_name">${data.title}</p>
        <p class="pro_time">${data.subtitle}</p>
        <div class="area_detail">
            <img src="${data.image}" class="area_img" alt="">
            <p class="text">
                ${data.content}
            </p>
        </div>
        `
        $('.detail_cont').append(str)
    })
    $('area').css('z-index', '2')
    // $(this).css('z-index','10')
    console.log($(this).position().top)
    console.log($(this).position().left)
    $('.detail_cont').css('left', $(this).position().left - 608 + 96)
    $('.detail_cont').css('top', $(this).position().top - 86)
    $('.detail_cont').show()
})
$(document).on('mouseleave', '.area', function () {
    $('.detail_cont').hide()
})
$(document).on('mouseover', '.detail_cont', function () {
    $('.detail_cont').show()
})
$(document).on('mouseleave', '.detail_cont', function () {
    $('.detail_cont').hide()
})
$(document).on('mouseleave', '.map', function () {
    $('.detail_cont').hide()
})