<template>
	<view class="type-num-select mg-lr-24">
		<view class="car-brand u-f u-f-jcfs u-f-aic mg-bot-16">
			<image :src="carData.logo" class="mg-right-20"></image>
			<text>{{carData.name}}</text>
		</view>
		<view class="tab-list u-f  mg-bot-28">
			<view :class="['item fs26 light-black', activeTab == 'allCar' ? 'active' : '']"
				@click="handleTab('allCar')">全部车型</view>
			<view :class="['item fs26 light-black', activeTab == item.year ? 'active' : '']"
				v-for="(item,index) in carBrandTab" :key="index" @click="handleTab(item.year)">{{item.year}}</view>
		</view>
		<view class="tab-content">
			<view class="tc-list" v-for="(item,index) in carBrand" :key="index">
				<common-title :msg="item.year"></common-title>
				<view class="light-black fs26" style="padding-top: 30rpx;padding-bottom:40rpx;" v-for="(ite,ind) in item.children" :key="ite.id"
					@click="jumpToCarInfo(ite)">{{ite.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				activeTab: 'allCar',
				filterTabContent: [],
				carData: '',
				carBrand: [],
				carBrandTab: []	,
				vehicleBrandId:'',
				fatype:"",
				formData:{}
			}
		},

		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.data))
			this.formData = options.formData ? JSON.parse(decodeURIComponent(options.formData)) : {}
			console.log(data, 'options')
			// console.log(options,'options');
			this.carData = data
			this.vehicleBrandId = options.vehicleBrandId
			this.fatype=options.fatype
			this.getCarBrandYearList()
			// this.getCarDetails()
		},

		methods: {

			//获取车型年份
			getCarBrandYearList() {
				console.log(this.carData.id);
				this.$http.get('/api/client/vehicle/carBrandInfoList', {
					carBrandId: this.carData.id,
					year: this.activeTab == 'allCar' ? '' : this.activeTab
				}).then(res => {
					this.carBrand = res.data.data
				})
				this.$http.get('/api/client/vehicle/carBrandInfoList', {
					carBrandId: this.carData.id,
				}).then(res => {
					this.carBrandTab = res.data.data
				})
			},

			handleTab(year) {
				this.activeTab = year;
				this.getCarBrandYearList()
				// if (this.activeTab !== 'allCar')  {
				// 	console.log("year", year)
				// 	// this.filterTabContent = this.tabContnt.filter(item => item.id == id)
				// 	console.log("this.tabContnt", this.tabContnt)
				// } else {
				// 	this.filterTabContent = this.tabContnt
				// }
			},
			jumpToCarInfo(item) {
				console.log(item);
				let data = {
					brandLogo:item.logo,
					vehicleBrand:this.carData.vehicleBrand,
					vehicleModel:this.carData.name,
					vehicleBrandId:this.vehicleBrandId,
					vehicleModelId:this.carData.id,
					vehicleConfigId:item.id,
					vehicleConfig:item.name
				}
				console.log(data);
				console.log(this.fatype,'fatype');
				if(!this.fatype){
					uni.redirectTo({
						url: '/pages/car-info/car-info?data='+ encodeURIComponent(JSON.stringify(data))
					})
				}else if(this.fatype==99) {
					// 首页二手车
					uni.navigateTo({
						url:'/pages/ershou-car/ershou-car?formData=' + encodeURIComponent(JSON.stringify(this.formData))+'&data='+ encodeURIComponent(JSON.stringify(data))
					})
				} else if(this.fatype==98) {
					// 首页保险救援
					uni.navigateTo({
						url:'/pages/insurance-rescue/insurance-rescue?formData=' + encodeURIComponent(JSON.stringify(this.formData))+'&data='+ encodeURIComponent(JSON.stringify(data))
					})
				}
				
			}
		},
		mounted() {
			this.filterTabContent = this.tabContnt
		}
	}
</script>

<style lang="scss" scoped>
	.type-num-select {
		margin-bottom: 74rpx;

		image {
			width: 108rpx;
			height: 80rpx;
		}

		.tab-list {
			flex-wrap: wrap;

			.item {
				text-align: center;
				padding: 10rpx 20rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1rpx solid #D9D9D9;
				margin-right: 10rpx;
				margin-bottom: 10rpx;

				// &:nth-child(4n) {
				// 	margin-right: 0;
				// }
				&.active {
					color: #FF4502;
					border: 1rpx solid #FF4502;
				}
			}
		}
	}
</style>