<template>
	<view class="insurance-rescue mg-lr-24">
		<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 v-show="activeShopGood !=1">
			<view class="mg-bot-20">
				<common-title :msg="'个人信息'"></common-title>
			</view>
			<view class="white-bg-wrap">
				<view class="form-input u-f u-f-jcsb u-f-aic fs28">
					<!-- <view class="light-gray">本人姓名</view> -->
					<view class="light-gray requeyCheck">
						<text>本人姓名</text>
						<image src="../../static/common/requy.png" mode=""></image>
					</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>联系方式</text>
							<image src="../../static/common/requy.png" mode=""></image>
						</view>
					</view>
					<view class="light-black">
						<input 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">
					<view class="light-gray">
						<view class="light-gray requeyCheck">
							<text>车辆信息</text>
							<image src="../../static/common/requy.png" mode=""></image>
						</view>
					</view>
					<view class="light-black">
						<input disabled="true" v-model="FormData.vehicleInformation" class="uni-input my-input"
							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">
						<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">
					<view class="light-gray">所在城市</view>
					<picker mode="region" :value="regionVal" @change="onaddress">
						<input disabled="true" class="uni-input my-input" v-model="FormData.cityName"
							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" @click="showBottomPopup">
						联系客服
					</view>
				</view>
			</view>
		</view>


		<!-- 救援服务 -->
		<!-- <view v-show="activeShopGood === 'jiuyuan'"> -->
		<view v-show="activeShopGood ==1">
			<view class="mg-bot-20">
				<common-title :msg="'救援电话'"></common-title>
			</view>
			<view class="white-bg-wrap">
				<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="handleCall(ServiceData.cusServicePhone,'1')">
						<image src="../../static/common/phoneImg.png" mode=""></image>
					</view>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28" @click="">
					<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">
						<text
							class="light-black mg-bot-10">{{addressComponent.province}}{{addressComponent.city}}{{addressComponent.district}}</text>
						<text class="light-gray">{{addressComponent.street_number}}</text>
					</view>
				</view>
			</view>

			<view class="fix-bot">
				<view class="content u-f u-f-jcsb u-f-aic">
					<view class="btn main-line-btn">
						联系客服
					</view>
				</view>
			</view>
		</view>

		<uni-popup :position="'middle'" :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="sys-mes-nofity" v-else>
				<view class="top u-f u-f-aic u-f-jcc">联系客服</view>
				<view class="mg-top-28">客服电话：{{ServiceData.cusServicePhone}}</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>

	</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: [],
				addressComponent: {},
				ServiceData: "",
				FormData: {
					userName: "",
					serviceTypeId: 0,
					serviceTypeName: "",
					phoneNumber: "",
					vehicleInformation: "",
					vehicleAge: "",
					province: "",
					city: "",
					area: "",
					areaCode: "",
					lon: "",
					lat: "",
					cityName: "",
					carID: ""
				},
				cityData: "",
				serviceShow: false,
			}
		},
		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(newArr, data, opt, 'opt');
		},
		onShow() {
			this.getLocation()
			this.getcustomerServiceData() //获取客服信息
			this.getstoreTypeListData() //获取分类信息
		},
		methods: {
			checkGood(data, index) {
				console.log(index);
				this.activeShopGood = index
				this.FormData.serviceTypeId = data.id
				this.FormData.serviceTypeName = data.name


				if (index == 1) {}
			},
			submitForm() {
				if (!this.FormData.userName) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none',
						duration: 800
					})
					return
				} else if (!this.FormData.phoneNumber) {
					uni.showToast({
						title: '请填写联系方式',
						icon: 'none',
						duration: 800
					})
					return
				} else if (!this.FormData.vehicleInformation) {
					uni.showToast({
						title: '请填写车辆信息',
						icon: 'none',
						duration: 800
					})
					return
				}
				this.subaddInsuranceRescueData()
			},
			subaddInsuranceRescueData(type) {
				this.$http.post('/api/client/index/addInsuranceRescue', this.FormData).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
					this.subaddInsuranceRescueData(type)
				}
				uni.makePhoneCall({
					phoneNumber: data
				});
			},
			// 
			getstoreTypeListData() {
				this.$http.get('/api/client/index/storeTypeList', {
					storeTypeId: this.FormData.carID
				}).then((res) => {
					this.shopGood = res.data.data
					this.FormData.serviceTypeName = res.data.data[0].name
					this.FormData.serviceTypeId = res.data.data[0].id
				})
			},
			getcustomerServiceData() {
				this.$http.get('/api/client/userInfo/customerService').then((res) => {
					this.ServiceData = res.data.data
				})
			},
			skipCarMsg() {
				uni.navigateTo({
					url: `/pages/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.cityName = e.detail.value.join(',')
				this.cityData = e.detail.value.join(',')
				console.log(e.detail.value, '114');
			},
			async getLocation() {
				let _this = this
				try {
					let res = await uni.getLocation({
						type: 'wgs84'
					});
					console.log("123123", res)
					let lat = res.latitude; // 获取纬度
					let lon = res.longitude; // 获取经度

					qqmapsdk.reverseGeocoder({
						location: [lat, lon].join(','),
						success: function(res) {
							// address_component
							_this.FormData.lon = lon
							_this.FormData.lat = lat
							_this.addressComponent = res.result.address_component
							console.log(this, res.result.address_component, this.addressComponent,
								'222222');
							console.log(res.result);
						}
					})
				} catch (e) {
					// console.error("获取位置信息失败：", e);
				}
			},

		}
	}
</script>

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

<style lang="scss" scoped>
	.insurance-rescue {
		.subhint {
			background: #fff;
			overflow: hidden;

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

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

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

	.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: center;

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

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

	.sys-mes-nofity {
		padding: 0 90rpx;
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		border-radius: 14rpx;

		.top {
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}
</style>