const toggleToc = document.getElementById('toggleToc');
const scrollTopBtn = document.getElementById('scrollTop');
const tocItems = document.querySelectorAll('.toc-item');
const sections = document.querySelectorAll('section > div[id]');

// 移动端目录切换
toggleToc.addEventListener('click', function() {
toc.classList.toggle('hidden');
if (!toc.classList.contains('hidden')) {
toc.classList.add('translate-x-0');
toc.classList.remove('-translate-x-full');
} else {
toc.classList.add('-translate-x-full');
toc.classList.remove('translate-x-0');
}
});

// 点击目录项关闭移动端目录
tocItems.forEach(item => {
item.addEventListener('click', function() {
if (window.innerWidth < 768) {
toc.classList.add('hidden', '-translate-x-full');
toc.classList.remove('translate-x-0');
}
});
});

// 回到顶部按钮
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
scrollTopBtn.classList.remove('opacity-0', 'invisible');
scrollTopBtn.classList.add('opacity-100', 'visible');
} else {
scrollTopBtn.classList.add('opacity-0', 'invisible');
scrollTopBtn.classList.remove('opacity-100', 'visible');
}

// 高亮当前目录项
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (pageYOffset >= (sectionTop - 200)) {
current = section.getAttribute('id');
}
});

tocItems.forEach(item => {
item.classList.remove('nav-item-active');
if (item.getAttribute('href').substring(1) === current) {
item.classList.add('nav-item-active');
}
});
});

// 回到顶部功能
scrollTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});

// 初始化14本价值体系层级结构图
const ctx = document.getElementById('valueSystemChart').getContext('2d');
new Chart(ctx, {
type: 'radar',
data: {
labels: [
'基础保障层\n(时本、工本、器本)',
'民生服务层\n(教本、医本)',
'组织协作层\n(组本、合本)',
'制度保障层\n(义本、权本、法本、主权本)',
'生产流通层\n(技本、产本、销本)'
],
datasets: [{
label: '价值重要性权重',
data: [90, 85, 80, 95, 88],
backgroundColor: 'rgba(37, 99, 235, 0.2)',
borderColor: 'rgba(37, 99, 235, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(37, 99, 235, 1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(37, 99, 235, 1)'
}]
},
options: {
elements: {
line: {
tension: 0.2
}
},
scales: {
r: {
angleLines: {
display: true
},
suggestedMin: 50,
suggestedMax: 100
}
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: function(context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.r !== null) {
label += context.parsed.r + '%';
}
return label;
}
}
}
}
}
});

// 点击外部关闭移动端目录
document.addEventListener('click', function(event) {
if (window.innerWidth < 768 &&
!toc.contains(event.target) &&
!toggleToc.contains(event.target) &&
!toc.classList.contains('hidden')) {
toc.classList.add('hidden', '-translate-x-full');
toc.classList.remove('translate-x-0');
}
});
});
</script>
</body>
</html>