$(function() {
	// facetwp-radio 点击切换效果
	// $(document).on('click', '.facetwp-radio', function() {
	// 	$('.facetwp-radio').removeClass('checked');
	// 	$(this).addClass('checked');
	// });
	var id =''
	if(getQueryString("id")){
		id = getQueryString("id");
	}else{
		id = sessionStorage.getItem('brandsId');
	}
	var vm = new Vue({
		el: '#brandapp',
		data: {
			currentPage: 1, // 当前页码
			pageSize: 12, // 每页条数
			totalItems: 0, // 总数据量（后端分页用）
			energy:'',
			dataList: [],
			energylist:[]
		},
		computed: {
			// 当前页数据（前端分页）
			currentPageData() {
				const start = (this.currentPage - 1) * this.pageSize;
				return this.allData.slice(start, start + this.pageSize);
			},
			// 总页数
			totalPages() {
				return Math.ceil(this.totalItems / this.pageSize);
			},
			// 动态页码范围
			visiblePages() {
				const maxVisible = 5;
				let start = Math.max(1, this.currentPage - 2);
				let end = Math.min(start + maxVisible - 1, this.totalPages);
				return Array.from({
					length: end - start + 1
				}, (_, i) => start + i);
			}
		},
		watch: {
			currentPage() {
				this.fetchData(); // 后端分页时触发数据更新
			}
		},
		created: function() {
			this.fetchData()
			this.energylistfn()
		},
		methods: {
			fetchData() {
				var that = this
				AjaxUtils.get('apis/vehicle/new/list', {
					page: this.currentPage,
					per_page: this.pageSize,
					brand:id,
					energy:this.energy,
				}).done(function(data) {
					that.dataList = data.data.list
					that.allData = data.data.list; // 前端分页时存储所有数据
					that.totalItems = data.data.meta.total; // 后端分页时更新总数
					// if(that.dataList.length<=0){
					// 	that.isshow = true
					// 	that.licklistfn()
					// }else{
					// 	that.isshow = false
					// }
					// console.log(data.data.list);
				}).fail(function(error) {
					// console.error(error);
				});
			},
			energylistfn() {
				var that = this
				AjaxUtils.get('apis/vehicle/energy', {
					brand:id,
				}).done(function(data) {
					that.energylist = data.data
				}).fail(function(error) {
					// console.error(error);
				});
			},
			energyclick(item){
				if(item==''){
					this.energy =''
				}else{
					this.energy = item.id
				}
				this.fetchData()
			},
			prevPage() {
				if (this.currentPage > 1) this.currentPage--;
				$('html, body').animate({
					scrollTop: $('.navs').offset().top - 0
				}, 0);
			},
			nextPage() {
				if (this.currentPage < this.totalPages) {
					this.currentPage++
				};
				$('html, body').animate({
					scrollTop: $('.navs').offset().top - 0
				}, 0);
			},
			gotoPage(page) {
				this.currentPage = page;
			},
			godetil(item) {
				window.location.href = 'newcar-details.html?id=' + item.id
			}
		},
	})
	AjaxUtils.get('apis/brand/detail/'+id, {}).done(function(data) {
		var datas = data.data;
		$(".brandname").html(datas.name)
		$(".dese").html(datas.desc)
		
		$(".topimg").html('<img src="'+datas.toppic_full+'" class="attachment-full size-full"  decoding="async" fetchpriority="high" >')
		$(".descpicing").html('<img src="'+datas.descpic_full+'" alt="car">')
		var bannerhtml=''
		$.each(datas.banner,function(){
			bannerhtml+= `<div class="col-12"><a href="#"><img src="${this.pic_full}" alt="" /></a> </div>`
		});
		$(".slider").html(bannerhtml)
		initslick()
		var traithtml=''
		$.each(datas.trait,function(){
			traithtml+= `<div class="xz-card-68ae col-lg-4 col-md-6 col-sm-12">
				<h4 class="tit">${this.title}</h4><p class="txt">${this.content}</p>
			</div>`
		});
		$(".trait").html(traithtml)
	}).fail(function(error) {
		// console.error(error);
	});

	


})
function initslick(){
	$(".slider").slick({
	  slidesToShow: 3,
	  slidesToScroll: 1,
	  infinite: true,
	  autoplay: true,
	  dots: false,
	  draggable: true,
	  arrows: false,
	  cssEase: "linear",
	  lazyLoad: "progressive",
	  speed: 800,
	  autoplaySpeed: 2000,
	  responsive: [
	    {
	      breakpoint: 1200,
	      settings: {
	        slidesToShow: 3,
	      },
	    },
	    {
	      breakpoint: 1025,
	      settings: {
	        slidesToShow: 2,
	      },
	    },
	    {
	      breakpoint: 576,
	      settings: {
	        slidesToShow: 1,
	      },
	    },
	  ],
	});
}
$(function () {
	
});