const items = document.querySelectorAll('.problem_box_item');
items.forEach(item => {
    item.addEventListener('click', () => {
        // 移除其他项的样式
        // items.forEach(i => i.classList.remove('problem_box_item_sele'));
        // 添加当前点击项的样式
        if(item.classList.contains('problem_box_item_sele')) {
            item.classList.remove('problem_box_item_sele')
        } else {
            item.classList.add('problem_box_item_sele');
        }
    });
});

const menuBtn = document.querySelector('.head_tab_menu');
const maskBox = document.querySelector('.mask-box');
const menuBox = document.querySelector('.menu-box');

menuBtn.addEventListener('click', () => {
	document.body.style.overflow='hidden';
	maskBox.classList.add('mask-box-show');
	menuBox.classList.add('menu-box-show')
});

maskBox.addEventListener('click', () => {
	document.body.style.overflow='visible';
	maskBox.classList.remove('mask-box-show')
	menuBox.classList.remove('menu-box-show')
});

menuBox.addEventListener('click', (event) => {
	event.stopPropagation(); // 停止事件冒泡
});

// 滚动关于我们
const toAbout = document.querySelectorAll('.toAbout');
toAbout.forEach(item => {
	item.addEventListener('click', () => {
		document.getElementById('aboutClass').scrollIntoView({behavior: 'smooth'})
	})
});

// 滚动合作伙伴
const toCooperation = document.querySelectorAll('.toCooperation');
toCooperation.forEach(item => {
	item.addEventListener('click', () => {
		document.getElementById('cooperationClass').scrollIntoView({behavior: 'smooth'})
	})
});

// 滚动联系我们
const contactBtn = document.querySelectorAll('.toContactMy');
contactBtn.forEach(item => {
	item.addEventListener('click', () => {
		document.getElementById('contactMy').scrollIntoView({behavior: 'smooth'})
	})
});

// 滚动顶部
const toHeadBox = document.querySelectorAll('.toHeadBox');
toHeadBox.forEach(item => {
	item.addEventListener('click', () => {
		document.getElementById('headBox').scrollIntoView({behavior: 'smooth'})
	})
});


// 充电桩滚动切换
const userItem = document.querySelectorAll('.user_box_item');
let userItemNumber = (Number((userItem.length / 2).toFixed(0)) - 1)

let userScrollIndex = 0
const userLeftBtn = document.querySelector('.scroll_btn_left');
const userRightBtn = document.querySelector('.scroll_btn_right');
const userScroll = document.querySelector('.user_box_scroll_center');

userLeftBtn.addEventListener('click', () => {
	if(userScrollIndex != 0) {
		userScrollIndex--
		let ere = (50 * userScrollIndex) + '% - ' + (0.625 * userScrollIndex) + 'rem'
		userScroll.style.cssText = 'transform: translate(calc(-'+ ere + '), 0);'
	}
});

userRightBtn.addEventListener('click', () => {
	if(userScrollIndex < userItemNumber) {
		userScrollIndex++
		let ere = (50 * userScrollIndex) + '% - ' + (0.625 * userScrollIndex) + 'rem'
		userScroll.style.cssText = 'transform: translate(calc(-'+ ere + '), 0);'
	}
});