<template>
	<view class="add-car mg-lr-24">
		<view class="add-car-info" v-if="showAddCar">
			<view class="input-view u-f u-f-fdr u-f-aic u-f-fwnw">
				<image class="search-icon" src="../../static/common/search.png"></image>
				<input @input="getCarBrandList" v-model="nametext" confirm-type="search" class="nav-bar-input"
					type="text" placeholder="搜索" />
			</view>


			<view class="hot-brand mg-bot-40">
				<view class="">
					<common-title :msg="'热门品牌'"></common-title>
				</view>
				<view class="hot-brand-list u-f u-f-jcsb u-f-fww mg-top-24">
					<view class="hot-brand-item mg-bot-30" v-for="(item,index) in hotCar" :key="index"
						@click="handleCarTypeSelect(item)">
						<view class="hot-brand-content u-f u-f-aic u-f-fdc">
							<!-- 车图 -->
							<view style="width: 84rpx;height:84rpx" class="mg-bot-18">
								<image :src="item.logo" mode="widthFix" style="width: 100%;height:100%"></image>
							</view>
							<text class="fs24 light-black">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="car-brand-list">
				<view class="mg-bot-40" v-for="itemList  in allCar" :key="itemList.letter">
					<view class="fw400 fs28 light-black mg-bot-24">{{itemList.letter}}</view>
					<view class="fw400 fs26 light-black mg-bot-28 u-f u-f-jcfs u-f-aic" v-for="item in itemList.carList"
						:key="item.id">
						<image :style="{width: '84rpx', height: '84rpx'}" src="../.././static/car-brand.png"
							:mode="'widthFix'" class="mg-right-10"></image>
						<text class="light-black">{{item.name}}</text>
					</view>
				</view>
			</view> -->

			<indexAddress :carList="carList" @select="handleCarTypeSelect"></indexAddress>


			<!-- 右侧导航开始 -->
			<!-- <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>

		<!-- 输入车牌号开始 -->
		<view class="fill-car-brand" v-else>
			<view class="fw400 fs30 light-black mg-bot-24">输入车牌自动识别车型</view>
			<carNumberInput @numberInputResult="numberInputResult" :defaultStr="defaultNum"></carNumberInput>
			<view class="light-gray fs24">蚂蚁车生活不会泄露您的个人信息，仅用于适配商品</view>
			<view class="identify-car-brand u-f u-f-aic u-f-jcc" v-show="false">
				<text :class="['btn fs28', activeIdentifyBtn ? 'active' : '']" @click="handleIdentifyCar">识别</text>
			</view>
			<view class="light-gray fs28 fw400" style="text-align: center;">未识别车型</view>
			<view class="identify-car-brand u-f u-f-aic u-f-jcc">
				<text class="line-btn light-black fs28" @click="handleOtherAddCar">其他加车方式</text>
			</view>
		</view>
		<!-- 输入车牌号结束 -->

		<!-- 系统消息通知开始 -->
		<!-- <uni-popup :position="'middle'" :mode="''" background-color="transparent" :show="showPopup&&!fatype"
			@hidePopup="handleHidePopup"> -->
		<uni-popup :position="'middle'" :mode="''" background-color="transparent" :show="false"
			@hidePopup="handleHidePopup">
			<view class="sys-mes-nofity">
				<view class="top"></view>
				<image class="carNoImg" src="/static/common/carNoImg.png" mode=""></image>
				<view class="u-f u-f-jcc u-f-aic fs30 fw400 main-color mg-bot-18 mg-top-28">输入车牌识别车型</view>
				<view class="u-f u-f-jcc u-f-aic fs24 fw400 light-gray mg-bot-46">精准适配商品和服务</view>
				<view class="u-f u-f-jcsb mg-lr-100">
					<view class="cancel-btn" @click="showPopup = false">取消</view>
					<view class="main-color-btn" @click="handleTry">去试试</view>
				</view>
			</view>
		</uni-popup>
		<!-- 系统消息通知结束 -->
	</view>
</template>

<script>
	import commonTitle from '../../components/common-title/common-title.vue'
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	import carNumberInput from '../../uni_modules/car-number-input/components/car-number-input/car-number-input'
	import indexAddress from '../../uni_modules/t-index-address/components/t-index-address/t-index-address'
	export default {
		components: {
			commonTitle,
			uniPopup,
			carNumberInput,
			indexAddress
		},
		data() {
			return {
				nametext: "",
				showAddCar: true,
				showPopup: true,
				tracingLeftPoint: "",
				acitiveRightMenu: 1,
				carList: [],
				hotCar: [],
				fatype: "",
				formData: {}
			}
		},
		computed: {
			activeIdentifyBtn() {
				// let allFill = this.input.number1 && this.input.number2 && this.input.number3 && this.input.number4 && this
				// 	.input.number5 && this.input.number6 && this.input.number7
				// return allFill
			}
		},
		onLoad(opt) {
			this.formData = opt.formData ? JSON.parse(decodeURIComponent(opt.formData)) : {}
			console.log(opt, 'opt');
			this.fatype = opt.type ? opt.type : ""
		},
		onShow() {
			this.getCarBrandList()
			this.getPopularVehicles()
		},

		methods: {
			//获取车型列表
			async getCarBrandList() {
				let data = {
					"name": this.nametext,
				}

				let res = await this.$http.get('/api/client/vehicle/getBrandList', data)
				console.log(res.data.data, 'res');
				let carList = res.data.data
				console.log(carList);
				this.carList = carList
			},


			// 打开车牌选择器
			carInputClick() {
				console.log(this.$refs);
				this.$refs.plateNumber.open();
			},

			//热门品牌
			getPopularVehicles() {
				this.$http.get('/api/client/vehicle/popularVehicles').then(res => {
					this.hotCar = res.data.data
				})
			},



			numberInputResult(e) {
				console.log('结果--' + e)
			},

			handleHidePopup() {
				this.showPopup = false;
			},
			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;
			},
			handleIdentifyCar() {
				uni.showToast({
					title: '未识别到该车车型请使用其他方式',
					icon: 'none',
					duration: 2000
				});
			},
			handleOtherAddCar() {
				this.showAddCar = true;
			},
			handleTry() {
				this.handleHidePopup()
				this.showAddCar = false;
			},
			handleCarTypeSelect(item) {
				uni.navigateTo({
					url: '/pages/car-type-select/car-type-select?data=' + encodeURIComponent(JSON.stringify(
						item)) + '&fatype=' + this.fatype + '&formData=' + encodeURIComponent(JSON.stringify(
						this.formData))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	$nav-height: 68rpx;

	.add-car {
		.add-car-info {


			.input-view {
				background-color: #ffffff;
				border: 1rpx solid #333333;
				height: $nav-height;
				line-height: $nav-height;
				border-radius: 34rpx;
				padding: 0 15px;
				color: #999999;
				margin-bottom: 22rpx;

				.search-icon {
					width: 30rpx;
					height: 30rpx;
					// background: url('../../static/common/search.png') no-repeat center center;
					background-size: 100%;
				}

				.nav-bar-input {
					width: 100%;
					height: 100%;
					padding: 0 5px;
					font-size: 12px;
				}
			}

			.hot-brand {
				.hot-brand-list {
					.hot-brand-item {
						width: calc(20% - 64rpx);
						margin-right: 64rpx;
					}
				}
			}

			.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;
					}
				}
			}
		}

		.fill-car-brand {
			.fill-car-box {
				.fc-item {
					width: calc((100% / 9) - 8rpx);
					height: 100rpx;
					background-color: #F8F8F8;
					margin-right: 8rpx;
					border-radius: 8rpx;

					&:last-child {
						margin-right: 0;
					}

					&.new-energy {
						background: #F1FFF3;
						border: 1rpx dashed #00CD22;
					}

					.circle {
						width: 10rpx;
						height: 10rpx;
						background-color: #333333;
						border-radius: 50%;
					}

					view {
						.my-input {
							width: 100%;
							height: 100%;
							background-color: #F8F8F8;
						}
					}
				}
			}

			.identify-car-brand {
				margin-top: 75rpx;
				margin-bottom: 58rpx;

				.btn {
					color: #ffffff;
					width: 414rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					background-color: #383838;
					border-radius: 40rpx;

					&.active {
						background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
					}
				}

				.line-btn {
					width: 414rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					background-color: #ffffff;
					border: 1rpx solid #333333;
					border-radius: 40rpx;
				}
			}
		}
	}

	.sys-mes-nofity {
		width: 100%;
		height: 615rpx;
		background-color: #ffffff;
		position: relative;
		border-radius: 14rpx;

		.top {
			border-radius: 14rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		}

		.carNoImg {
			width: 590rpx;
			height: 256rpx;
		}
	}
</style>