<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>
			<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 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>
						<image src="../../static/common/requy.png" mode=""></image>
					</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">
					<view class="light-gray requeyCheck">
						<text>车辆信息</text>
						<image src="../../static/common/requy.png" mode=""></image>
					</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 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.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" @click="showBottomPopup">
						联系客服
					</view>
				</view>
			</view>
		</view>
		<view class="modelContent">
			<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">客服电话：18956568956</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"
	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,
			}
		},
		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()
		},

		methods: {
			checkGood(data, index) {
				this.activeShopGood = index
				this.FormData.serviceTypeId = data.id
				this.FormData.serviceTypeName = data.name
			},
			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) => {
					this.shopGood = res.data.data
					this.FormData.serviceTypeName = res.data.data[0].name
					this.FormData.serviceTypeId = res.data.data[0].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: `/pages/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'
					})
				}
			},
		}
	}
</script>

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

<style lang="scss" scoped>
	.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;

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

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

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

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

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

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