<template>
	<view class="chepai">
		<view class="header">
			<view class="header-left" :class="{headerActive:headerindex==1}" @click="remo">
				<img class="header-img" src="https://www.jiubaotongxue.love/image/demo13.png" alt="" />普通车牌
			</view>
			<view class="header-right" :class="{headerActives:headerindex==2}" @click="add">
				<img class="header-img" src="https://www.jiubaotongxue.love/image/demo14.png" alt="" />新能源车牌
			</view>
		</view>
		<view class="titlea">
			— <text class="t">请输入要绑定的车牌号</text> —
		</view>
		<view class="body-a">
			<view class="a-b" :class="{active:actives===index}" v-for="(item,index) in arr" :key="item.id"
				@click="ab(index)">
				{{item.as ? item.as :''}}

			</view>
		</view>
		<view class="boxs">
			<img class="boxs-i" src="https://www.jiubaotongxue.love/image/demo20.png" alt="" /><text class="txts">{{wxname ? wxname : '元芳'}}</text>
		</view>
		<view class="boxs">
			<img class="boxs-i" src="https://www.jiubaotongxue.love/image/demo20.png" alt="" /><text class="txts">{{tel ? tel :'暂无手机号码'}}</text>
		</view>
		<view class="ok" @click="fors">
			点击绑定爱车
		</view>
		<view class="kongbai" @click="kongbai">

		</view>
	</view>
	<view class="dibu" v-if="c===0">
		<view class="dibus">
			<view class="dibu-a" v-for="(item,index) in arry" :key="index" @click="ac(index)">
				{{item}}
			</view>
			<view class="dibu-b" @click="d1">
				
			</view>
		</view>
	</view>
	<view class="dibu" v-if="d===0">
		<view class="dibusa">
			<view class="dibu-a" v-for="(item,index) in zimu" :key="index" @click="av(index)">
				{{item}}
			</view>
			<view class="dibu-c" @click="d1">
				
			</view>
		</view>
	</view>
	<view class="dibu" :class="{q:e===0}" v-if="e===0">
		<view class="dibus">
			<view class="dibu-a" v-for="(item,index) in zimushu" :key="index" @click="an(index)">
				{{item}}
			</view>
			<view class="dibu-b" @click="d1">
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits,
		defineProps,
		onMounted
	} from 'vue';
	const actives = ref(100)
	const props = defineProps(['chuanzi'])
	const emit = defineEmits(['numString'])
	const wxname = ref()
	const wxImg = ref()
	const tel = ref()
	wxname.value=uni.getStorageSync('wxname')
	wxImg.value=uni.getStorageSync('wxImg')
	tel.value = uni.getStorageSync('phoneNumber')
	const c = ref(1)
	const d = ref(1)
	const e = ref(1)
	const headerindex = ref(0)
	const ab = (index) => {
		actives.value = index
		if (actives.value === 2) {
			actives.value++
			c.value = 1
			d.value = 1
			e.value = 0
			console.log('actives.value === 2');
		} else if (actives.value == 0) {
			c.value = 0
			d.value = 1
			e.value = 1
			console.log('actives.value == 0');
		} else if (actives.value == 1) {
			c.value = 1
			e.value = 1
			d.value = 0
			console.log('actives.value == 1');
		} else if (actives.value <= 10 && actives.value > 2) {
			e.value = 0
			c.value = 1
			d.value = 1
			console.log('actives.value <= 8');
		} else {
			actives.value = 100
			e.value = 1
			c.value = 1
			d.value = 1
			console.log('都没满足');


		}
	}
	const ac = (index) => {
		arr.value[actives.value].as = arry.value[index]
		ab(actives.value + 1)
	}
	const av = (index) => {
		arr.value[actives.value].as = zimu.value[index]
		ab(actives.value + 1)
	}
	const an = (index) => {
		arr.value[actives.value].as = zimushu.value[index]
		if (arr.value.length - 1 === actives.value) {
			e.value = 1
		} else {
			ab(actives.value + 1)
		}

	}
	const add = () => {
		if (arr.value.length >= 9) {
			return
		} else {
			zi.value = []
			arr.value.push({
				id: 9,
				as: ""
			})
			headerindex.value = 2
		}
	}
	const remo = () => {
		if (arr.value.length <= 8) {
			return
		} else {
			zi.value = []
			arr.value.pop()
			headerindex.value = 1
		}
		console.log(arr.value.length);
	}
	const zi = ref([])
	const fors = () => {
		e.value = 1
		c.value = 1
		d.value = 1
		console.log(1);
		arr.value.forEach((item, index) => {
			if (index != 2 && item.as) {
				zi.value.push(item.as)
			}
		})
		if (arr.value.length === zi.value.length + 1) {
			emit('numString', zi.value)
			const aq = zi.value
			zi.value = []
			console.log(zi.value);
			

		} else {
			console.log(arr.value.length, zi.value.length);
			zi.value = []
			uni.showToast({
				icon: 'none',
				title: "输入格式错误请重新输入"
			})
		}
	}
	const d1 = () => {
		console.log(actives.value);
		if (arr.value[actives.value].as && actives.value != 2) {
			arr.value[actives.value].as = ''
			actives.value = actives.value - 1
			ab(actives.value)

		} else if (actives.value == 2) {

			arr.value[actives.value].as = ''
			ab(actives.value - 1)
			// console.log(actives.value);
		} else if (actives.value == 3) {
			ab(actives.value - 2)

		} else if (actives.value <= 0) {
			e.value = 1
			c.value = 1
			d.value = 1
			console.log('都不满足');
		} else {
			e.value = 1
			c.value = 1
			d.value = 1
			console.log('都不满足');
		}
	}
	const kongbai = () => {
		e.value = 1
		c.value = 1
		d.value = 1
	}
	const arry = ref(['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂',
		'琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新', '港', '澳', '台',
	])
	const zimu = ref(['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z',
		'X', 'C', 'V', 'B', 'N', 'M'
	])
	const zimushu = ref(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O',
		'P', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'Z',
		'X', 'C', 'V', 'B', 'N', 'M', '港', '澳', '学', '领', '警'
	])
	const arr = ref([{
			id: 1,
			as: ""
		},
		{
			id: 2,
			as: ""
		},
		{
			id: 3,
			as: ""
		},
		{
			id: 4,
			as: ""
		},
		{
			id: 5,
			as: ""
		},
		{
			id: 6,
			as: ""
		},
		{
			id: 7,
			as: ""
		},
		{
			id: 8,
			as: ""
		}
	])
	onMounted(() => {
		console.log(props.chuanzi);
		arr.value = props.chuanzi
		arr.value.splice(2, 0, {
			id: 10,
			as: ''
		})
		console.log(arr.value.length);
		if (arr.value.length <= 8) {
			headerindex.value = 1

		} else if (arr.value.length == 9) {
			headerindex.value = 2
		} else {
			console.log('车牌号位数较少');
		}
	})
</script>

<style lang="scss">
	.chepai {
		width: 100%;
		height: 90%;
		position: fixed;
		background-color:white;
		color: white;
		margin-top: 28%;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		z-index: 1;

		.header {
			width: 100%;
			height: 100rpx;
			margin-top: 10rpx;
			display: flex;
			font-size: 30rpx;
			color: black;

			.header-left {
				width: 50%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.header-img{
					width: 60rpx;
					height: 60rpx;
				}
			}

			.header-right {
				width: 50%;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.header-img{
					width: 60rpx;
					height: 60rpx;
				}
			}

			.headerActive {
				border-bottom: 7rpx solid  #1C9FF7;
				color: #1C9FF7;
				font-weight: 700;
			}
			.headerActives {
				border-bottom: 7rpx solid  #2CD062;
				color: #2CD062;
				font-weight: 700;
			}
		}

		.titlea {
			width: 100%;
			font-size: 28rpx;
			text-align: center;
			color: #E3E3E3;
			margin-top: 60rpx;
			.t{
				color: #333333;
			}
		}

		.body-a {
			width: 100%;
			height: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: black;

			.a-b {
				border: 1rpx solid #ccc;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				margin-right: 11rpx;
				text-align: center;
				line-height: 88rpx;
				width: 72rpx;
				height: 88rpx;
				background: #E6F1FF;
				border-radius: 6rpx;
				font-size: 36rpx;

			}

			.a-b:nth-child(3) {
				width: 15rpx;
				height: 15rpx;
				background-color: black;
				border-radius: 50%;
			}

			.active {
				border: 1rpx solid #2264dc;
				color: #2264dc;
			}
		}
		.boxs{
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #555;
			border-top: 1rpx solid #f2f2f2;
			border-bottom: 1rpx solid #f2f2f2;
			.boxs-i{
				width: 50rpx;
				height: 50rpx;
				margin-left: 30rpx;
			}
			.txts{
				display: block;
				margin-left: 25rpx;
			}
		}

		.ok {
			width: 690rpx;
			height: 100rpx;
			background: linear-gradient( 276deg, #1C9FF7 0%, #1275F7 100%);
			box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(5,128,255,0.2);
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			margin-top: 84rpx;
			margin-left: 50%;
			transform: translateX(-50%);
		}

		.kongbai {
			width: 100%;
			height: 50%;
		}

	}

	.dibu {
		width: 100%;
		height: 500rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: #f5f5f5;
		z-index: 99;

		.dibus {
			position: absolute;
			width: 100%;
			min-height: 380rpx;
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;
			margin-top: 10rpx;

			.dibu-a {
				width: 10%;
				height: 90rpx;
				border: 1rpx solid white;
				margin-left: 5rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 90rpx;
				margin-top: 10rpx;
				margin-bottom: 0rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				background-color: white;
				box-shadow: 2rpx 2rpx 2rpx 0rpx #f5f5f5;
			}

			.dibu-b {
				width: 90rpx;
				height: 75rpx;
				text-align: center;
				line-height: 80rpx;
				// border: 1rpx solid white;
				// background-color: white;
				position: absolute;
				bottom: 2rpx;
				right: 40rpx;
				background-image: url('/static/image/清除、删除-01.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.dibu-c {
				width: 70%;
				height: 70rpx;
				position: fixed;
				bottom: 100rpx;
				border: 1rpx solid white;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				text-align: center;
				line-height: 70rpx;
				background-image: url('/static/image/删除.png');
				background-size: 50rpx 50rpx ;
				background-repeat: no-repeat;
				background-color: white;
				
			}
		}

		.dibusa {
			position: absolute;
			width: 100%;
			min-height: 380rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-content: flex-start;
			margin-top: 0rpx;

			.dibu-a {
				width: 10%;
				height: 90rpx;
				border: 1rpx solid white;
				margin-left: 5rpx;
				font-size: 28rpx;
				text-align: center;
				line-height: 90rpx;
				margin-top: 10rpx;
				margin-bottom: 0rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				background-color: white;
			}

			.dibu-b {
				width: 90rpx;
				height: 75rpx;
				text-align: center;
				line-height: 80rpx;
				// border: 1rpx solid white;
				position: absolute;
				bottom: 2rpx;
				right: 40rpx;
				// background-color: white;
				background-image: url('/static/image/清除、删除-01.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.dibu-c {
				width: 70%;
				height: 70rpx;
				position: fixed;
				bottom: 100rpx;
				border: 1rpx solid white;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				text-align: center;
				line-height: 70rpx;
				background-color: white;
				background-image: url('/static/image/删除.png');
				background-size: 50rpx 50rpx ;
				background-repeat: no-repeat;
				background-color: white;
				background-position:50% 12rpx;
			}
		}
	}

	.q {
		width: 100%;
		height: 600rpx;
	}
</style>