<template>
	<view class="insurance-rescue mg-lr-24" style="padding-bottom: 126rpx;">
		<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 mg-bot-20', activeShopGood == index ? 'active' : '']" v-for="(item,index) in shopGood"
				:key="item.id" @click="checkGood(item,index)">{{item.name}}</view>
		</view>

		<view class="flex-box" v-if="activeShopGood == 1">
			<view v-for="(item,index) in actList" :key="item.id" class="flex-info" @click="handleActList(item,index)">
				<image mode="" class="img-box" :src="tabIndex==index?item.highlightPicture:item.ordinaryPicture">
				</image>
				<view :class="tabIndex==index?'name-box name-boxActive':'name-box'">{{item.name}}</view>
			</view>
		</view>
		<!-- 保险咨询 -->
		<view v-show="activeShopGood!=0">
			<view class="mg-bot-20">
				<common-title :msg="'个人信息'"></common-title>
			</view>
			<view class="flex-wrap" v-if="tabIndex!=3&&activeShopGood==1">
				预估价格: <text class="info-color" v-if="tabIndex==0">￥{{estimatedPrice || 0}}</text>
				<text class="info-color" v-if="tabIndex==1">￥{{inspectionPrice || 0}}</text>
				<text class="info-color" v-if="tabIndex==2">￥{{warrantyPrice || 0}}</text>
			</view>
			<view class="white-bg-wrap">
				<view class="form-input u-f u-f-jcsb u-f-aic fs28" style="position: relative;"
					v-if="(tabIndex==0||tabIndex==3)&&activeShopGood==1">
					<view class="light-gray">当前地址</view>
					<picker mode="region" :value="regionVal" @change="onaddress">
						<input disabled="true" class="uni-input my-input" v-model="FormData.currentLocation"
							placeholder="" />
						<image v-if="!FormData.currentLocation" src="/pagesA/states/youjiantou.png" mode=""
							class="jt-r"></image>
					</picker>
				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28" v-if="(tabIndex==0||tabIndex==3)&&activeShopGood==1">
					<view class="light-gray">具体位置</view>
					<view class="light-black">
						<input class="uni-input my-input" v-model="FormData.specificLocation" placeholder="请输入具体地址" />
					</view>

				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28" style="position: relative;"
					v-if="(tabIndex==0||tabIndex==3)&&activeShopGood==1">
					<view class="light-gray">目的地</view>
					<picker mode="region" :value="regionVal" @change="onaddress1">
						<input disabled="true" class="uni-input my-input" v-model="FormData.currentDestination"
							placeholder="" />
						<image v-if="!FormData.currentDestination" src="/pagesA/states/youjiantou.png" mode=""
							class="jt-r"></image>
					</picker>
				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28" v-if="(tabIndex==0||tabIndex==3)&&activeShopGood==1">
					<view class="light-gray">具体位置</view>
					<view class="light-black">
						<input class="uni-input my-input" v-model="FormData.specificDestination"
							placeholder="请输入具体地址" />
					</view>

				</view>

				<view class="form-input u-f u-f-jcsb u-f-aic fs28"
					v-if="tabIndex==1||tabIndex==2||activeShopGood==2||activeShopGood==3||activeShopGood==4">
					<view class="light-gray requeyCheck">
						<text class="mg-right-14">本人姓名</text>
					</view>
					<view class="light-black">
						<input v-model="FormData.userName" class="uni-input my-input" 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">
						<view class="light-gray requeyCheck">
							<text class="mg-right-14">联系方式</text>
							<image src="../../static/common/requy.png" mode=""></image>
						</view>
					</view>
					<view class="light-black">
						<input v-model="FormData.phoneNumber" type="number" maxlength="11" class="uni-input my-input"
							placeholder="请输入电话号" />
					</view>
				</view>

				<view class="form-input u-f u-f-jcsb u-f-aic fs28" @click="skipCarMsg"
					v-if="tabIndex==1||tabIndex==2||activeShopGood==2||activeShopGood==3||activeShopGood==4">
					<view class="light-gray">
						<view class="light-gray requeyCheck">
							<text class="mg-right-14">车辆信息</text>
							<image src="../../static/common/requy.png" mode=""></image>
						</view>
					</view>
					<view class="light-black">
						<text class="uni-input"
							style="text-align: right;">{{FormData.vehicleInformation||'请输入车辆型号'}}</text>
					</view>
				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28"
					v-if="tabIndex==1||tabIndex==2||activeShopGood==2||activeShopGood==3||activeShopGood==4">
					<view class="light-gray">车辆年限</view>
					<view class="light-black">
						<input v-model="FormData.vehicleAge" class="uni-input my-input" placeholder="请输入年份" />
					</view>
				</view>
				<view class="form-input u-f u-f-jcsb u-f-aic fs28"
					v-if="tabIndex==1||tabIndex==2||activeShopGood==2||activeShopGood==3||activeShopGood==4">
					<view class="light-gray">所在城市</view>
					<picker mode="region" :value="regionVal" @change="onaddressWhereIsCity">
						<input disabled="true" class="uni-input my-input" v-model="FormData.whereIsCity"
							placeholder="请输入当前地址" />
					</picker>
				</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 v-show="activeShopGood === 'jiuyuan'"> -->
		<view v-show="activeShopGood == 0">
			<view class="mg-bot-20">
				<common-title :msg="'救援电话'"></common-title>
			</view>
			<view class="white-bg-wrap" style="padding-left: 20rpx;">
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-46">
					<view class="u-f u-f-fdc">
						<text class="mg-bot-26 light-gray">救援电话</text>
						<text class="light-black">{{ServiceData.cusServicePhone}}</text>
					</view>
					<view class="call-phone" @click="showModal(ServiceData.cusServicePhone,'1')">
						<image src="../../static/common/phoneImg.png" mode=""></image>
					</view>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28">
					<view class="u-f u-f-fdc">
						<text class="mg-bot-26 light-gray">当前定位</text>
					</view>
					<view class="fs28 u-f u-f-fdc u-f-aife" style="width: 500rpx;">
						<text
							class="light-black mg-bot-10">{{addressComponent.province}}{{addressComponent.city}}{{addressComponent.district}}</text>
						<text class="light-gray">{{formattedAddresses.recommend}}</text>
					</view>
				</view>
			</view>

			<view class="fix-bot">
				<view class="content u-f u-f-jcsb u-f-aic" @click="showModal(ServiceData.cusServicePhone,'1')">
					<view class="btn main-line-btn" style="border-radius: 40rpx;">
						联系客服
					</view>
				</view>
			</view>
		</view>
		<view class="hintCont">
			为了尽快和您沟通，我们需要获取你的联系方式
		</view>
		<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-jcc u-f-aic">
					<text>客服电话：{{ServiceData.cusServicePhone}}</text>
				</view>
				<view class="bot u-f u-f-jcc u-f-aic" @click="handleCall(ServiceData.cusServicePhone,'2')"><text
						class="confirm">拨打电话</text></view>
			</view>
		</uni-popup>
		<u-modal :show="showPhone" @cancel="showPhone=false" @confirm="confirmOpen" :showCancelButton="true"
			ref="uModal" :content='PhoneContent'></u-modal>
		<u-modal :show="iscontentInfo" title="救援地址" :content='contentInfo' @confirm="confirmOpen"></u-modal>
	</view>
</template>

<script>
	// var QQMapWX = require('../../qqmap-wx-jssdk');

	import commonTitle from "../.././components/common-title/common-title.vue"
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	import QQMapWX from "../../qqmap-wx-jssdk.js";
	// 实例化API核心类
	var qqmapsdk = new QQMapWX({
		key: '5ZUBZ-FPKKX-ZJO4Q-7GNDH-K6XNE-5ABQF' // 必填
	});
	export default {
		components: {
			commonTitle,
			uniPopup
		},
		data() {
			return {
				showBotPopup: false,
				activeShopGood: 0,
				shopGood: [],
				tabIndex: 0,
				actList: [],
				addressComponent: {},
				ServiceData: "",
				FormData: {
					userName: "",
					serviceTypeId: 0,
					serviceTypeName: "",
					phoneNumber: "",
					vehicleInformation: "",
					vehicleAge: "",
					province: "",
					city: "",
					area: "",
					areaCode: "",
					lon: "",
					lat: "",
					cityName: "",
					carID: ""
				},
				cityData: "",
				iscontentInfo: false,
				contentInfo: '',
				serviceShow: false,
				serviceTypeId: '',
				serviceTypeName: '',
				estimatedPrice: '', //酒后代驾预估金额
				inspectionPrice: '', //代检车预估价格
				warrantyPrice: '', //代保修预估价格
				showPhone: false,
				PhoneContent: "是否确认拨打救援电话，拨打电话的同时，我们会上传您的位置信息",
				carInfo: {},
				formattedAddresses: {}
			}
		},
		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(',');
			console.log('this.FormData', this.FormData);
			if (typeID) {
				this.FormData.carID = typeID
				this.carID = typeID
			}
			console.log(newArr, data, opt, 'opt');
			this.getCarInfo() //获取分类信息
		},

		onShow() {
			this.getLocation()
			this.getcustomerServiceData() //获取客服信息
			this.getstoreTypeListData() //获取分类信息
			console.log(this.FormData, 'this.FormData.vehicleInformation');
		},
		methods: {

			//首页车辆
			async getCarInfo() {
				let res = await this.$http.get('/api/client/index/carInfo', )
				let carInfo = res.data.data
				let newArr = carInfo ? [carInfo.vehicleBrand, carInfo.vehicleModel, carInfo.vehicleConfig] : []
				// let carInfo = res.data.data
				// this.carInfo = carInfo || {}
				this.FormData.vehicleInformation = newArr.join(',');
				// this.FormData.vehicleAge = carInfo.year;
				// this.FormData.
			},

			// 拨打手机号弹窗
			showModal(data, type) {
				// this.showPhone = true;
				this.cusServicePhonePhone = data
				this.cusServicePhoneType = type
				this.iscontentInfo = true
				this.contentInfo = `我们已获取您的定位信息，会根据当前地址联系您【${this.formattedAddresses.recommend}】`
			},

			confirmOpen() {
				this.iscontentInfo = false;
				this.handleCall(this.cusServicePhonePhone, this.cusServicePhoneType)
			},

			handleActList(item, index) {
				console.log('我要的id222', item.id)
				this.serviceTypeId = item.id
				this.tabIndex = index
				console.log(index);
				if (index == 1) {
					this.inspectionPrice = item.inspectionPrice
				} else if (index == 2) {
					this.warrantyPrice = item.warrantyPrice
				}
				this.serviceTypeName = item.name
				// this.reset()
				this.FormData.phoneNumber = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').phoneNumber :
					''
			},
			reset() {
				this.FormData = {
					userName: "",
					serviceTypeId: 0,
					serviceTypeName: "",
					phoneNumber: "",
					// vehicleInformation: "",
					vehicleAge: "",
					province: "",
					city: "",
					area: "",
					areaCode: "",
					lon: "",
					lat: "",
					cityName: "",
					carID: ""
				}
				this.getLocation()
			},
			checkGood(item, index) {
				this.serviceTypeId = item.id
				this.serviceTypeName = item.name
				this.activeShopGood = index
				this.tabIndex = 0
				this.actList = item.children
				// this.reset()
				this.FormData.phoneNumber = uni.getStorageSync('userinfo') ? uni.getStorageSync('userinfo').phoneNumber :
					''
				console.log(this.FormData.phoneNumber, 'this.FormData.phoneNumber');
			},
			submitForm() {
				// if (!this.FormData.userName) {

				// } else if (!this.FormData.phoneNumber && /^[1][3,4,5,7,8][0-9]{9}$/.test(this.FormData.phoneNumber) ==
				// 	false) {
				// 	uni.showToast({
				// 		title: '请填写正确的联系方式',
				// 		icon: 'none',
				// 		duration: 800
				// 	})

				// 	return
				// } else if (!this.FormData.vehicleInformation) {
				// 	uni.showToast({
				// 		title: '请填写车辆信息',
				// 		icon: 'none',
				// 		duration: 800
				// 	})
				// 	return
				// }
				let regexp = /^[1][3,4,5,7,8][0-9]{9}$/
				if (this.tabIndex == 0 || this.tabIndex == 3) {

					if (!this.FormData.phoneNumber) {
						uni.showToast({
							title: '请填写联系方式',
							icon: 'none',
							duration: 300
						})
						return
					} else if (!regexp.test(this.FormData.phoneNumber)) {
						uni.showToast({
							title: '请填写正确的联系方式',
							icon: 'none',
							duration: 800
						})
						return
					}
				}
				if (this.tabIndex == 1 || this.tabIndex == 2) {
					if (!this.FormData.phoneNumber) {
						uni.showToast({
							title: '请填写联系方式',
							icon: 'none',
							duration: 300
						})
						return
					} else if (!regexp.test(this.FormData.phoneNumber)) {
						uni.showToast({
							title: '请填写正确的联系方式',
							icon: 'none',
							duration: 800
						})
						return
					}
					if (!this.FormData.vehicleInformation) {
						uni.showToast({
							title: '请填写车辆信息',
							icon: 'none',
							duration: 300
						})
						return
					}
				}
				this.subaddInsuranceRescueData()
			},
			subaddInsuranceRescueData(type) {
				let params = {
					...this.FormData,
					serviceTypeId: this.serviceTypeId,
					serviceTypeName: this.serviceTypeName
				}
				this.$http.post('/api/client/index/addInsuranceRescue', params).then((res) => {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 300
					})
					if (!type) {
						this.showBotPopup = true
						this.serviceShow = true
					}

				})
			},
			handleHidePopup() {
				this.showBotPopup = false;
				if (this.serviceShow) {
					this.serviceShow = false
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			showBottomPopup() {
				this.serviceShow = false
				this.showBotPopup = true;
			},
			handleCall(data, type) {
				if (type == 1) {
					this.FormData.province = this.addressComponent.province
					this.FormData.city = this.addressComponent.city
					this.FormData.district = this.addressComponent.district
				}
				uni.makePhoneCall({
					phoneNumber: data,
					success: () => {
						this.subaddInsuranceRescueData(type)
					}
				});
			},
			// 
			getstoreTypeListData() {
				this.$http.get('/api/client/index/storeTypeList', {
					storeTypeId: this.FormData.carID || 4
				}).then((res) => {
					this.shopGood = res.data.data
					console.log(this.activeShopGood, 'this.activeShopGood');
					// if (this.activeShopGood == 1) {
					console.log('this.actList', this.actList);
					console.log('this.shopGood', this.shopGood);
					if (this.shopGood.length) {
						this.actList = this.shopGood[1].children
						this.serviceTypeId = this.actList && this.actList[0].id
						this.serviceTypeName = this.actList && this.actList[0].name
						this.estimatedPrice = this.shopGood[1].estimatedPrice
					}

					// }
				})
			},
			getcustomerServiceData() {
				this.$http.get('/api/client/userInfo/customerService').then((res) => {
					this.ServiceData = res.data.data
				})
			},
			skipCarMsg() {
				uni.navigateTo({
					url: `/pagesA/add-car/add-car?type=98&formData=${encodeURIComponent(JSON.stringify(this.FormData))}`
				})
			},
			onaddress(e) {
				this.FormData.province = e.detail.value[0]
				this.FormData.city = e.detail.value[1]
				this.FormData.area = e.detail.value[2]
				this.FormData.currentLocation = e.detail.value.join(',')
				this.cityData = e.detail.value.join(',')
				console.log(e.detail.value, '114');
			},
			onaddress1(e) {
				this.FormData.province = e.detail.value[0]
				this.FormData.city = e.detail.value[1]
				this.FormData.area = e.detail.value[2]
				this.FormData.currentDestination = e.detail.value.join(',')
				this.cityData = e.detail.value.join(',')
				console.log(e.detail.value, '114');
			},
			onaddressWhereIsCity(e) {
				this.FormData.province = e.detail.value[0]
				this.FormData.city = e.detail.value[1]
				this.FormData.area = e.detail.value[2]
				this.FormData.whereIsCity = e.detail.value.join(',')
				console.log(e, "所在城市");
				this.cityData = e.detail.value.join(',')
			},
			async getLocation() {
				let _this = this
				try {
					let res = await uni.getLocation({
						type: 'wgs84'
					});
					let lat = res.latitude; // 获取纬度
					let lon = res.longitude; // 获取经度
					qqmapsdk.reverseGeocoder({
						location: [lat, lon].join(','),
						success: function(res) {
							let addressComponent = res.result.address_component
							let formattedAddresses = res.result.formatted_addresses
							// address_component
							// this.FormData.whereIsCity
							_this.FormData.lon = lon
							_this.FormData.lat = lat
							_this.addressComponent = res.result.address_component
							_this.formattedAddresses = formattedAddresses
							_this.FormData.whereIsCity = addressComponent.province + ',' + addressComponent
								.city + ',' + addressComponent.district
							_this.FormData.currentLocation = addressComponent.province + ',' +
								addressComponent
								.city + ',' + addressComponent.district
							// _this.FormData.specificLocation = res.result.address_component.street + res.result.address_component.street_number


							_this.FormData.specificLocation = res.result.formatted_addresses.recommend

							console.log(_this, res.result.address_component, this.addressComponent,
								'222222');
							console.log(res.result, '地址哈哈哈');
						}
					})
					console.log(_this.FormData.whereIsCity, "addressaddressaddressaddress");
				} catch (e) {
					// console.error("获取位置信息失败：", e);
				}
			},

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

	.info-color {
		color: #FF4502;
	}

	.flex-wrap {
		display: flex;
		justify-content: flex-end;
		font-size: 30rpx;
		padding: 10rpx 0;
		color: #ccc;
	}

	.height-box {
		height: 100rpx;
	}

	.insurance-rescue {
		.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;
			}
		}

		.shop-good {
			.item {
				padding: 16rpx 0;
				text-align: center;
				width: 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;
				}
			}
		}
	}

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

	.requeyCheck {
		display: flex;
		align-items: flex-start;
		width: 140rpx;

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

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

		image {
			width: 74rpx;
			height: 74rpx;
		}
	}

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

	.img-box {
		width: 50rpx;
		height: 50rpx;
		margin: 10rpx auto;
	}

	.flex-box {
		display: flex;
		justify-content: space-between;
		margin-bottom: 50rpx;

	}

	.flex-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.name-box {
		font-size: 28rpx;
		color: #999999;
	}

	.name-boxActive {
		color: #FE4F22;
	}

	.hintCont {
		color: #999;
		font-size: 23rpx;
		text-align: center;
		margin-top: 12rpx;
	}

	.jt-r {
		position: absolute;
		right: 0px;
		width: 20rpx;
		height: 26rpx;
		top: 50%;
		transform: translateY(-50%);
	}
</style>