$(function() {
	// 轮播图
	var id = getQueryString("id")

	function initSlick() {
		$(".rental-slider").slick({
			slidesToShow: 1,
			slidesToScroll: 1,
			arrows: false,
			fade: true,
			asNavFor: ".as-nav-slider",
		});
		$(".as-nav-slider").slick({
			slidesToShow: 5,
			slidesToScroll: 1,
			// slide: true,
			asNavFor: ".rental-slider",
			dots: false,
			arrows: false,
			centerMode: false,
			variableWidth: true,
			focusOnSelect: true,
			responsive: [{
					breakpoint: 1200,
					settings: {
						slidesToShow: 4,
					},
				},
				{
					breakpoint: 1025,
					settings: {
						slidesToShow: 3,
					},
				},
			],
		});
	}
	// 生成HTML
	function generateslide(product) {
		if (product.pic_full == '') {
			return ''
		}
		return `
					<div class="rental-slide">
						<img src="${product.pic_full}" alt="banner">
					</div>
			    `;
	}

	function generateslide1(product) {
		if (product.pic_full == '') {
			return ''
		}
		return `
					<div class="img-box">
					    <img src="${product.pic_full}" alt="car">
					</div>
			    `;
	}
	// 渲染轮播图
	function renderbanner(lbdata) {
		const rentalslider = document.getElementById('rental-slider');
		rentalslider.innerHTML = lbdata.map(product =>
			generateslide(product)
		).join('');
		const asnavslider = document.getElementById('as-nav-slider');
		asnavslider.innerHTML = lbdata.map(product =>
			generateslide1(product)
		).join('');
		initSlick()
	}
	// Introduction
	function Introductionhtml(data){
		var html='';
		$.each(data,function(){
			html+="<li>"+this.content+"</li>"
		});
		$("#section1 ul").html(html)
	}
	// Highlighted
	function Highlightedhtml(data){
		var html='';
		$.each(data,function(){
			html+="<li><strong>"+this.title+"</strong><br>"+this.content+"</li>"
		});
		$("#section2 ul").html(html)
	}
	// video
	function videohtml(data){
		var html=`<iframe width="100%" src="${data}" title="YouTube video player" frameborder="0"
		allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
		referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe>`
		$("#section3").append(html)
	}
	
	// FAQ
	function FAQhtml(data){
		var html='';
		$.each(data,function(){
			html+=`<div class="schema-faq-section" >
				<strong class="schema-faq-question">${this.title}</strong>
				<p class="schema-faq-answer">${this.content}</p>
			</div>`
		});
		$("#faqs").html(html)
	}
	
	
	
	
	AjaxUtils.get('apis/vehicle/new/'+id+'/detail', {
		id: id
	}).done(function(data) {
		var carinfo = data.data
		$(".carname").html(carinfo.name)
		$(".carpice").html(carinfo.price)
		$(".carbrand").html(carinfo.brand_name)
		$(".carstype").html(carinfo.type_name)
		$(".careng").html(carinfo.energy_name)
		$(".carstatus").html(carinfo.store_status_name)
		$(".carkm").html(carinfo.mileage)
		// $(".carage").html(carinfo.start_use)
		$(".carage").html(carinfo.vehicle_age)
		$(".condition_desc").html(carinfo.condition_desc)
		$(".Locations").html(carinfo.location_name)
		$(".views").html(carinfo.views)
		$("#brands").html('<a href="brand.html?id='+carinfo.brand+'">'+carinfo.brand_name+'</a>')
		
		videohtml(carinfo.video)
		Introductionhtml(carinfo.content)
		Highlightedhtml(carinfo.trait)
		renderbanner(carinfo.album)
		FAQhtml(carinfo.asked)
		console.log(data);
	}).fail(function(error) {
		console.error(error);
	});

	$("#subbtn").click(function() {
		var name = $("#name").val()
		var phone = $("#Phone").val()
		var content = $("#content").val()
		var Email = $("#Email").val()

		AjaxUtils.post('apis/contact/add', {
			name: name,
			phone: phone,
			content: content,
			email: Email,
			vehicle_id: id
		}).done(function(result) {
			alert(result.data.message)
			console.log(result);
		}).fail(function(error) {
			console.error(error);
		});
	})

	// 锚点导航功能
	const navItems = document.querySelectorAll('.nav-item');
	const contentScroll = document.getElementById('pro-content');

	// 点击导航链接时的滚动
	navItems.forEach(item => {
		const link = item.querySelector('.nav-link');
		link.addEventListener('click', function(e) {
			// e.preventDefault();
			const targetId = this.getAttribute('href').substring(1);
			const targetElement = document.getElementById(targetId);
			
			if (targetElement) {
				// 滚动到目标位置
				// const offset = targetElement.offsetTop - contentScroll.offsetTop;
				// contentScroll.scrollTo({
				// 	top: offset,
				// 	behavior: 'smooth'
				// });

				// 更新选中状态
				navItems.forEach(navItem => {
					navItem.classList.remove('current');
				});
				item.classList.add('current');
			}
		});
	});

	// 页面加载时激活第一个导航链接
	if (navItems.length > 0) {
		navItems[0].classList.add('current');
	}
	
	var vm = new Vue({
		el: '#contapp',
		data: {
			
		},
		created: function() {
		},
		methods: {
			
		},
	})
	
	
})