<template>
	<view class="insurance-rescue mg-lr-24">
		<u-navbar title="二手车" leftIconColor="#000" rightIcon='../../static/common/white_left_arrrow.png' placeholder
			leftIconSize='38rpx' @leftClick="skipUp()">
		</u-navbar>
		<view class="mg-bot-20">
			<common-title :msg="'服务选择'"></common-title>
		</view>

		<view class="shop-good u-f u-f-jcfs u-f-aic u-f-fww mg-bot-34">
			<view :class="['item', activeShopGood == index ? 'active' : '']" v-for="(item,index) in shopGood"
				:key="item.id" @click="checkGood(item,index)">{{item.name}}</view>
		</view>

		<!-- 保险咨询 -->
		<view>
			<view class="mg-bot-20">
				<common-title :msg="'个人信息'"></common-title>
			</view>
			<text class="textalert">为了尽快和您沟通，我们需要获取你的联系方式</text>
			<view class="white-bg-wrap">
				<view class="form-input u-f u-f-jcsb u-f-aic fs28">
					<view class="light-gray requeyCheck">
						<text>本人姓名</text>
						<!-- <image src="../../static/common/requy.png" mode=""></image> -->
					</view>
					<view class="light-black">
						<input class="uni-input my-input" v-model="FormData.userName" placeholder="请输入真实姓名" />
					</view>
				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28">
					<view class="u-f u-f-jcfs u-f-aic requeyCheck">
						<text class="light-gray">联系方式</text>
					</view>
					<view class="light-black">
						<input type="number" maxlength="11" v-model="FormData.phoneNumber" class="uni-input my-input"
							placeholder="请输入电话号" />
					</view>
				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28" @click="skipCarMsg" style="padding-right:0rpx;">
					<view class="light-gray requeyCheck" style="width: 300rpx;">
						<text class="mg-right-14">车辆信息</text>
						<image src="../../static/common/requy.png" mode=""></image>
					</view>
					<view class="light-black" style="text-align: right;">
						<text>{{FormData.vehicleInformation}}</text>
					</view>
				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28">
					<view class="light-gray requeyCheck">
						<text class="mg-right-14">车辆年限</text>
						<image src="../../static/common/requy.png" mode=""></image>
					</view>
					<view class="light-black">
						<input class="uni-input my-input" v-model="FormData.vehicleAge" placeholder="请输入年份" />
					</view>
				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28">
					<view class="light-gray">所在城市</view>
					<view class="light-black u-f u-f-jcfs u-f-aic">
						<picker mode="region" :value="regionVal" @change="onaddress">
							<input disabled="true" class="uni-input my-input" v-model="FormData.cityName"
								placeholder="请输入当前城市" />
						</picker>
					</view>
				</view>
			</view>

			<view class="fix-bot">
				<view class="content u-f u-f-jcsb u-f-aic">
					<view class="btn line-gradient-btn" @click="submitForm">
						提交信息
					</view>
					<view class="btn main-line-btn" style="border-radius: 40rpx;font-size: 28rpx;"
						@click="showBottomPopup">
						联系客服
					</view>
				</view>
			</view>
		</view>
		<view class="modelContent">
			<uni-popup :position="'middle'" class="middle-wrap" :show="showBotPopup" @hidePopup="handleHidePopup">
				<view class="sys-mes-nofity subhint" v-if="serviceShow">
					<image src="../../static/common/pay_success.png" class="subSucc" mode=""></image>
					<view class="hintTitle">
						提交成功
					</view>
					<view class="hintDesc">
						您已提交成功，请等待客服联系!
					</view>
				</view>
				<view class="common-mes-nofity" v-else>
					<view class="top u-f u-f-aic u-f-jcc">联系客服</view>
					<view class="mg-top-28 u-f u-f-aic u-f-jcc">
						<text>客服电话：18956568956</text>
					</view>
					<view class="bot u-f u-f-jcc u-f-aic" @click="handleCall"><text class="confirm">拨打电话</text></view>
				</view>
			</uni-popup>

		</view>
	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	import QQMapWX from "../../qqmap-wx-jssdk.js";
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
		key: '5ZUBZ-FPKKX-ZJO4Q-7GNDH-K6XNE-5ABQF' // 必填
	});
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				activeShopGood: 0,
				shopGood: [],
				name: "",
				phone: "",
				carMsg: "",
				cardDate: "",
				regionVal: "",
				cityData: "",
				FormData: {
					userName: "",
					serviceTypeId: 0,
					serviceTypeName: "",
					phoneNumber: "",
					vehicleInformation: "",
					vehicleAge: "",
					province: "",
					city: "",
					area: "",
					areaCode: "",
					lon: "",
					lat: "",
					cityName: "",
					carID: "",
					typeName: "10"
				},
				carID: "",
				showBotPopup: false,
				serviceShow: false,
				userInfo: {},
			}
		},
		onLoad(opt) {
			let data = opt.data ? JSON.parse(decodeURIComponent(opt.data)) : ""
			let typeID = opt.id ? opt.id : ''
			let newArr = data ? [data.vehicleBrand, data.vehicleModel, data.vehicleConfig] : []
			this.FormData = opt.formData ? JSON.parse(decodeURIComponent(opt.formData)) : {}
			this.FormData.vehicleInformation = newArr.join(',');
			if (typeID) {
				this.FormData.carID = typeID
				this.carID = typeID
			}

			console.log(opt, this.FormData, '143');
			// this.FormData.cityName
		},
		onShow() {
			this.getstoreTypeListData()
			this.getUserInfo()
			this.getCarInfo()
			// 获取当前地址
			console.log(this.User.curcity.lng, this.User.curcity.lat, "this.User.curcity.lat");
		},

		methods: {
			//首页车辆
			async getCarInfo() {
				let res = await this.$http.get('/api/client/index/carInfo', )
				let carInfo = res.data.data
				if (carInfo && carInfo.id) {
					// this.FormData.vehicleAge = carInfo.year
					this.FormData.vehicleInformation = carInfo.vehicleBrand + '' + carInfo.vehicleModel + '' + carInfo
						.vehicleConfig
					// uni.setStorageSync('cartId', this.carInfo.id)
				}
				// this.carInfo = carInfo || {}
			},

			//个人中心-个人信息
			getUserInfo() {
				this.$http.get('/api/client/userInfo/info').then(res => {
					// this.userInfo = res.data.data
					this.FormData.phoneNumber = res.data.data.phoneNumber
					let that = this
					let lon = this.User.curcity.lng
					let lat = this.User.curcity.lat
					qqmapsdk.reverseGeocoder({
						location: [lat, lon].join(','),
						success: function(res) {
							// _this.FormData.lon = lon
							// _this.FormData.lat = lat
							// _this.addressComponent = res.result.address_component
							// console.log(this, res.result.address_component, this.addressComponent,
							// 	'222222');
							let address = res.result.address_component
							that.FormData.province = address.province;
							that.FormData.city = address.city;
							that.FormData.area = address.district;
							that.FormData.lon = lon;
							that.FormData.lat = lat;
							that.FormData.cityName = [address.province, address.city, address.district]
								.join(",")
							console.log(res.result.address_component);
						},
						fail: function(error) {
							console.error(error);
						},
						complete: function(res) {
							console.log(res);
						}
					})
					// this.User.setUserInfo(this.userInfo)
					// if (!res.data.data.nickName) {
					// 	this.show = true
					// }
				})
			},
			checkGood(data, index) {
				this.activeShopGood = index
				this.FormData.serviceTypeId = data.id
				this.FormData.serviceTypeName = data.name
				uni.setStorageSync('erShouCarChoice', this.activeShopGood)
			},
			submitForm() {
				if (!this.FormData.userName) {
					// uni.showToast({
					// 	title: '请填写姓名',
					// 	icon: 'none',
					// 	duration: 600
					// })
					// return
				} else if (!this.FormData.phoneNumber) {
					// uni.showToast({
					// 	title: '请填写联系方式',
					// 	icon: 'none',
					// 	duration: 600
					// })
					// return
				} else if (!this.FormData.vehicleInformation) {
					uni.showToast({
						title: '请填写车辆信息',
						icon: 'none',
						duration: 600
					})
					return
				} else if (!this.FormData.vehicleAge) {
					uni.showToast({
						title: '请填写车辆年限',
						icon: 'none',
						duration: 600
					})
					return
				}
				this.subaddUsedCarData()
				console.log(this.FormData, 'FormData');
			},
			//  提交
			subaddUsedCarData() {
				console.log('提交');
				this.$http.post('/api/client/index/addUsedCar',
					this.FormData
				).then((res) => {
					// uni.showToast({
					// 	title: '提交成功',
					// 	icon: 'none',
					// 	duration: 600
					// })
					this.showBotPopup = true
					this.serviceShow = true
					console.log(res);
				})
			},
			getstoreTypeListData() {
				this.$http.get('/api/client/index/storeTypeList', {
					storeTypeId: this.carID || this.FormData.carID
				}).then((res) => {
					let erShouCarChoice = uni.getStorageSync('erShouCarChoice') ? uni.getStorageSync(
						'erShouCarChoice') : 0
					this.activeShopGood = erShouCarChoice
					this.shopGood = res.data.data
					this.FormData.serviceTypeName = res.data.data[this.activeShopGood].name
					this.FormData.serviceTypeId = res.data.data[this.activeShopGood].id
				})
			},
			onaddress(e) {
				// requy
				this.FormData.province = e.detail.value[0]
				this.FormData.city = e.detail.value[1]
				this.FormData.area = e.detail.value[2]
				this.FormData.cityName = e.detail.value.join(',')
				this.cityData = e.detail.value.join(',')
				console.log(e.detail.value, '114');
			},
			showBottomPopup() {
				this.serviceShow = false
				this.showBotPopup = true;
			},
			skipCarMsg() {
				uni.navigateTo({
					// encodeURIComponent(JSON.stringify(
					// item))
					url: `/pagesA/add-car/add-car?type=99&formData=${encodeURIComponent(JSON.stringify(this.FormData))}`
				})
			},
			handleHidePopup() {
				this.showBotPopup = false;
				if (this.serviceShow == true) {
					this.serviceShow = false
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			skipUp() {
				console.log("fanhui");
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.textalert {
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 24rpx;
		display: block;
		color: #999999;
		text-align: center;
	}

	.insurance-rescue {
		padding-bottom: 40rpx;

		.shop-good {
			.item {
				padding: 16rpx 0;
				text-align: center;
				flex: calc(50% - 38rpx);
				background-color: #ffffff;
				border-radius: 18rpx;
				margin-right: 38rpx;
				font-size: 28rpx;

				&:nth-chid(odd) {
					margin-right: 0rpx;
					font-size: 28rpx;

				}

				&.active {
					text-align: center;
					color: #ffffff;
					background-color: #FF4502;
					font-size: 28rpx;

				}
			}
		}
	}

	.modelContent {
		.subhint {
			background: #fff;
			overflow: hidden;
			padding: 50rpx;
			border-radius: 10rpx;

			.subSucc {
				display: flex;
				margin: auto;
				margin-top: 60rpx;
				width: 68rpx;
				height: 68rpx;
			}

			.hintTitle {
				margin-top: 32rpx;
				text-align: center;
				font-weight: 600;
				color: #000;
				font-size: 38rpx;
			}

			.hintDesc {
				margin-top: 32rpx;
				text-align: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #000;
			}
		}
	}

	.requeyCheck {
		display: flex;
		align-items: flex-start;

		image {
			margin-left: -15rpx;
			width: 15px;
			height: 15px;
		}
	}

	.form-input {
		padding: 30rpx 24rpx;
		border-bottom: 1rpx solid #F0F0F0;

		.my-input {
			padding-right: 40rpx;
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			text-align: right;
		}
	}

	.must-fill {
		width: 34rpx;
		height: 34rpx;
	}

	.small-gray-right-arrow {
		width: 16rpx;
		height: 16rpx;
		background: url(../.././static/common/gray_right_arrow.png) no-repeat center center;
		background-size: 100%;
	}

	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 333;

		.content {
			background-color: #ffffff;
			padding: 10rpx 24rpx;

			.btn {
				text-align: center;
				padding: 22rpx 0;
				flex: calc(45% - 20rpx);
				margin-right: 20rpx;

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

	.call-phone {
		width: 74rpx;
		height: 74rpx;
		background: url(../.././static/common/call_phone.png) no-repeat center center;
		background-size: 100%;
	}

	.middle-wrap :deep(.uni-popup-insert) {
		width: 624rpx !important;
	}
</style>