$(function() {
	// 轮播图
	// var id = getQueryString("id")
	// const id = sessionStorage.getItem('vehicledetailId');
	var id =''
	if(getQueryString("id")){
		id = getQueryString("id");
	}else{
		id = sessionStorage.getItem('vehicledetailId');
	}
	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.value_full == '') {
			return ''
		}
		return `
					<div class="rental-slide">
						<img src="${product.value_full}" alt="banner">
						<div class="tag">${product.name}</div>
					</div>
			    `;
	}

	function generateslide1(product) {
		if (product.value_full == '') {
			return ''
		}
		return `
					<div class="img-box">
					    <img src="${product.value_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()
	}
	AjaxUtils.get('apis/vehicle/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)

		renderbanner(carinfo.albums)

		// console.log(data);
	}).fail(function(error) {
		// console.error(error);
	});
	// 相关产品数据
	// 生成产品卡片HTML
	function generateProductCard(product) {
		return `
			 		<div class="vehicle-card mb-24">
			 			<a href="vehicle-details.html?id=${product.id}" >
			 				<img src="${product.cover}" class="w-100" alt="${product.name}">
			 				<h3 class="h3 title">${product.name}</h3>
			 				<h6>${product.price}</h6>
			 				<div class="vehica-car-card__separator"></div>
			 				<div class="vehica-car-card__info">
								<div class="vehica-car-card__info">
									<div class="vehica-car-card__info__single" data-i18n="bay"></div>
									<div class="vehica-car-card__info__single">
										${product.brand}</div>
									<div class="vehica-car-card__info__single" >
										${product.model}
									</div>
									<div class="vehica-car-card__info__single" >
										${product.energy}
									</div>
									<div class="vehica-car-card__info__single" >
										${product.type}
									</div>
								</div>
			 				</div>
			 			</a>
			 		</div>
			 	`;
	}

	// 渲染相关产品
	function renderRelatedProducts() {
		const container = document.getElementById('relatedProductsContainer');
		if (container) {
			container.innerHTML = relatedProductsData.map(product =>
				generateProductCard(product)
			).join('');
		}
	}
	var relatedProductsData = []
	AjaxUtils.get('apis/vehicle/list', {
		page: 1,
		per_page: 5,
		vehicle_id: id
	}).done(function(data) {
		relatedProductsData = data.data.list
		renderRelatedProducts();
	}).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);
		});
	})
})