$(function() {
	// 搜索模块展开收起
	const filterToggle = document.querySelector('.filter-toggle');
	const filterWrapper = document.querySelector('.filter-wrapper');
	
	if (filterToggle && filterWrapper) {
		filterToggle.addEventListener('click', function() {
			filterWrapper.classList.toggle('expanded');
		});
	}

	var vm = new Vue({
		el: '#app',
		data: {
			currentPage: 1, // 当前页码
			pageSize: 12, // 每页条数
			totalItems: 0, // 总数据量（后端分页用）
			dataList: [],
			brandListAll:[],
			selectedLetter: 'hot',
			selectedBrand: '',
			selectedenergy:'',
			letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
				'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
			],
			energyList:[],
			is_hot:'',
			isnone:false,
			isFilterOpen: false, // 控制筛选面板的开关状态
		},
		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(); // 后端分页时触发数据更新
			},
			isFilterOpen(newVal) {
				// 当筛选面板状态改变时，控制body滚动
				document.body.style.overflow = newVal ? 'hidden' : '';
			}
		},
		created: function() {
			this.getbrand('',1)
			this.getenergy()
			this.fetchData()
		},
		mounted() {
			// 创建遮罩层
			const overlay = document.createElement('div');
			overlay.className = 'filter-overlay';
			document.body.appendChild(overlay);

			// 点击遮罩层关闭
			overlay.addEventListener('click', () => {
				this.isFilterOpen = false;
			});

			// 点击其他区域关闭筛选面板
			document.addEventListener('click', (e) => {
				const filterContainer = document.querySelector('.filter-container');
				const filterBtn = document.querySelector('.filter-btn');
				
				// 如果点击的不是筛选面板内部元素，也不是筛选按钮，则关闭面板
				if (this.isFilterOpen && 
					!filterContainer.contains(e.target) && 
					!filterBtn.contains(e.target)) {
					this.isFilterOpen = false;
				}
			});
		},
		methods: {
			toggleFilter() {
				this.isFilterOpen = !this.isFilterOpen;
			},
			getbrand(letter,is_hot){
				var that = this
				AjaxUtils.get('apis/brand/letterAll', {
					letter:letter,
					is_hot:is_hot,
				}).done(function(data) {
					that.brandListAll= data.data
				}).fail(function(error) {
					// console.error(error);
				});
			},
			getenergy(){
				var that = this
				AjaxUtils.get('apis/energy/preset', {}).done(function(data) {
					that.energyList= data.data
				}).fail(function(error) {
					// console.error(error);
				});
			},
			fetchData() {
				var that = this
				AjaxUtils.get('apis/vehicle/new/list', {
					page: this.currentPage,
					per_page: this.pageSize,
					brand:this.selectedBrand,
					energy:this.selectedenergy
				}).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.isnone = false
					}else{
						that.isnone = true
					}
				}).fail(function(error) {
					// console.error(error);
				});
			},
			filterByLetter(letter) {
				this.selectedLetter = letter;
				if (this.selectedLetter === 'all') {
					this.getbrand('','')
				} else if (this.selectedLetter === 'hot') {
					this.getbrand('',1)
				} else {
					this.getbrand(letter,'')
				}
			},
			selectBrand(brand) {
				if(this.selectedBrand==brand){
					this.selectedBrand = '';
				}else{
					this.selectedBrand = brand;
				}
				this.fetchData()
			},
			selectenergy(item) {
				if(item=='all'){
					this.selectedenergy =''
				}else{
					this.selectedenergy = 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
			},
		},
	})
})