<template>
	<view class="car-type-select mg-lr-24">
		<!-- 车辆类型选择开始 -->
		<view class="car-brand-list">
			<view>
				<view class="car-brand u-f u-f-jcfs u-f-aic">
					<image :src="carData.logo" class="mg-right-20" mode="widthFix"></image>
					<text>{{carData.name}}</text>
				</view>
				<view class="fw400 fs26 light-black u-f u-f-jcfs u-f-aic" style="padding: 18rpx 0"
					v-for="item in carBrandList" :key="item.id" @click="selectModel(item)">
					<text class="light-black">{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- 车辆类型选择结束 -->

		<!-- 右侧导航开始 -->
		<!-- 	<view class="navgate">
			<scroll-view :scroll-y="true" :scroll-into-view="tracingLeftPoint" :scroll-with-animation="true"
				style="height: 486rpx;" :show-scrollbar="false">
				<view
					:class="['navgate-item deep-gray u-f u-f-aic u-f-jcc', acitiveRightMenu === item.id ? 'active' : '' ]"
					v-for="item in rightMenu" :key="item.id" @click="handleRightScroll(item.id, item.name)">
					{{item.name}}</view>
			</scroll-view>
		</view> -->
		<!-- 右侧导航结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tracingLeftPoint: "",
				acitiveRightMenu: 1,
				allCar: [{
					letter: 'A',
					carList: [{
							name: 'A6',
							id: '1'
						},
						{
							name: 'A6',
							id: '2'
						},
						{
							name: 'A6',
							id: '3'
						},
						{
							name: 'A6',
							id: '4'
						},
						{
							name: 'A6',
							id: '5'
						},
						{
							name: 'A6',
							id: '6'
						},
						{
							name: 'A6',
							id: '7'
						},
						{
							name: 'A6',
							id: '8'
						},
						{
							name: 'A6',
							id: '9'
						},
						{
							name: 'A6',
							id: '10'
						},
					]
				}, ],
				rightMenu: [{
						name: '当',
						id: 20
					},
					{
						name: '热',
						id: 30
					},
					{
						name: 'A',
						id: 1
					},
					{
						name: 'B',
						id: 2
					},
					{
						name: 'C',
						id: 3
					},
					{
						name: 'D',
						id: 4
					},
					{
						name: 'E',
						id: 5
					},
					{
						name: 'F',
						id: 6
					},
					{
						name: 'G',
						id: 7
					},
					{
						name: 'H',
						id: 8
					},
					{
						name: 'I',
						id: 9
					},
					{
						name: 'J',
						id: 10
					},
					{
						name: 'K',
						id: 11
					},
					{
						name: 'L',
						id: 12
					},
					{
						name: 'M',
						id: 13
					},
					{
						name: 'N',
						id: 14
					},
					{
						name: 'O',
						id: 15
					},
					{
						name: 'P',
						id: 16
					},
					{
						name: 'Q',
						id: 17
					}
				],
				carData: '',
				carBrandList: [],
				carDetails: '',
				fatype: "",
				formData: {}
			}
		},
		onLoad(options) {
			this.fatype = options.fatype ? options.fatype : ""
			let data = JSON.parse(decodeURIComponent(options.data))
			this.formData = options.formData ? JSON.parse(decodeURIComponent(options.formData)) : {}
			console.log(data, 'options');
			this.carData = data
			this.getCarBrandList()
			// this.getCarDetails()
		},

		methods: {

			//
			getCarBrandList() {
				this.$http.post('/api/client/vehicle/getCarBrandList', {
					id: this.carData.id
				}).then(res => {
					this.carBrandList = res.data.data
				})
			},

			selectModel(item) {
				item.vehicleBrand = this.carData.name
				console.log(item, 'item');

				uni.navigateTo({
					url: '/pagesD/car-type-num-select/car-type-num-select?data=' + encodeURIComponent(JSON
							.stringify(item)) + '&vehicleBrandId=' + this.carData.id + '&fatype=' + this.fatype +
						'&formData=' + encodeURIComponent(JSON.stringify(this.formData))
				})

			},


			// getCarDetails(){
			// 	this.$http.get('/api/client/vehicle/details',{
			// 		id:this.carData.id
			// 	}).then(res=>{
			// 		this.carDetails = res.data.data
			// 	})
			// },





			handleRightScroll(id, name) {
				// 	let distance = this.getScrollDistance(id)
				// 	console.log("distance", distance)

				// 	uni.pageScrollTo({
				// 		scrollTop: distance,
				// 		duration: 300
				// 	});

				this.acitiveRightMenu = id
				// this.tracingLeftPoint = 'scroll' + id
			},
			getScrollDistance(id) {
				var distance = 0;
				console.log("getScrollDistance", id);

				if (id !== 1) {
					for (let i = 0; i < id; i++) {
						let length = this.allCity[i].cityList.length
						distance += uni.upx2px(38 + 40) + uni.upx2px(length * (35 + 40))
					}
				}

				return distance;
			},

		}
	}
</script>

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

			image {
				width: 100rpx;
				height: auto;
			}
		}

		.navgate {
			position: fixed;
			right: 0rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 42rpx;
			z-index: 999;

			.navgate-item {
				width: 30rpx;
				height: 30rpx;
				margin-top: 7rpx;
				font-weight: 400;
				font-size: 18rpx;

				&.active {
					border-radius: 50%;
					color: #ffffff;
					background: #FF4502;
				}
			}
		}
	}
</style>