<template>
	<view class="main ">
		<view class="nickname-pop">
			<text class="nickname-label text-lg text-bold">会员资料</text>
			<view class="nickname-input margin-bottom-xs">
				<text style="color: #d2c3af; width: 120px;">姓名 *</text>
				<input class="input-style" maxlength="10" v-model.trim="user.realName" placeholder="请输入真实姓名"
					border="surround" />
			</view>
			<view class="nickname-input margin-bottom-xs">
				<text style="color: #d2c3af; width: 120px;">品牌-型号 *</text>
				<input class="input-style" maxlength="10" v-model.trim="userCar.carBrand" placeholder="请输入车辆品牌型号"
					border="surround" />
			</view>

			<view class="nickname-input margin-bottom-xs" @click="carKeyboardshow = true">
				<text style="color: #d2c3af; width: 120px;">车牌号码 *</text>
				<u-keyboard ref="uKeyboard" mode="car" :show="carKeyboardshow" @change="valChange" :showCancel=false
					:tips="userCar.carNo" @backspace="backspace" @confirm="carKeyboardshow =false"></u-keyboard>
				<input class="input-style" maxlength="10" v-model.trim="userCar.carNo" placeholder="请输入车牌号码"
					:disabled="true" border="surround" />
			</view>

			<text class="nickname-label margin-top text-lg text-bold">车辆保养/保险信息</text>

			<view class="nickname-input margin-bottom-xs" @click="maintenanceDatePopShow = true">
				<text style="color: #d2c3af; width: 120px;">保养时间</text>
				<u-datetime-picker :show="maintenanceDatePopShow" v-model="currDate" confirmColor="#242a38"
					@confirm="maintenanceDateConfirm" mode="date"></u-datetime-picker>
				<input class="input-style" maxlength="10" v-model.trim="userCar.maintenanceDate" placeholder="请选择保养时间"
					:disabled="true" border="surround" />
			</view>
			<view class="nickname-input margin-bottom-xs">
				<text style="color: #d2c3af; width: 120px;">保养里程</text>
				<input class="input-style" type="number" maxlength="10" v-model.number="userCar.maintenanceMileage"
					placeholder="请输入保养里程" border="surround" />
			</view>

			<view class="nickname-input margin-bottom-xs" @click="insuranceDatePopShow = true">
				<text style="color: #d2c3af; width: 120px;">保险时间</text>
				<u-datetime-picker :show="insuranceDatePopShow" v-model="currDate" confirmColor="#242a38"
					@confirm="insuranceDateConfirm" mode="date"></u-datetime-picker>
				<input class="input-style" maxlength="10" v-model.trim="userCar.insuranceDate" placeholder="请选择保险时间"
					:disabled="true" border="surround" />
			</view>
			<view class="nickname-input margin-bottom-xs" @click="insuranceDatePopShow = true" v-if="userCar.carNature&&userCar.carNature != '非营运'">
				<text style="color: #d2c3af; width: 120px;">维护时间</text>
				<u-datetime-picker :show="insuranceDatePopShow" v-model="userCar.checkDate" confirmColor="#242a38"
					@confirm="insuranceDateConfirm" mode="date"></u-datetime-picker>
				<input class="input-style" maxlength="10" v-model.trim="userCar.insuranceDate" placeholder="请选择维护时间"
					:disabled="true" border="surround" />
			</view>
			
			<u-popup :show="show" :round="10"  mode="center"  @close="close" @open="open">
			        <view class="z-xin">
			            <view class="one">恭喜您 成为尊贵的白银会员</view>
						<view  class="one"> 享受各项优惠</view>
						<view  class="one">将赠送您如下优惠卷 </view>
						
						<view class="o-box" >
							<view class="youshang">							
								<text class="xbiao">￥</text>
								<text>汽修</text>
							</view>
							<view class="heng">
								<view class="zuo">50元优惠券</view>
								<view class="you">￥50元</view>
							</view>
						</view>
						<view class="anniux" @click="getgo()">
							<view class="">我知道了</view>
						</view>
			        </view>
				</u-popup>

			<view class="button-style">
				<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))" shape="circle"
					text="保存" @click="saveUserProfile" :customStyle="{color:'#000',height:'60rpx'}"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				userProfileInputShow: false,
				user: {
					realName: ''
				},
				imagesUrl: getApp().globalData.config.imagesUrl,
				baseUrl: getApp().globalData.config.baseUrl,
				quanbg: getApp().globalData.config.imagesUrl + 'quanbg.png',
				userCar: {
					carBrand: '',
					carModel: '',
					carNo: '',
					maintenanceDate: '',
					inspectionDate: '',
					insuranceDate: '',
					maintenanceMileage: '',
					checkDate:'',
					nextMaintenanceDate: '',
					nextMaintenanceMileage: '',
					nextInspectionDate: '',
					insuranceExpiryDate: '',

				},
				carKeyboardshow: false,
				maintenanceDatePopShow: false,
				inspectionDatePopShow: false,
				insuranceDatePopShow: false,
				currDate: Number(new Date())
			}
		},
		onLoad() {
			console.log('123');
		},
		onShow() {
			this.getUserInfo()
			this.getUserCar()
		},
		methods: {
			  open() {
			        console.log('执行失败');
			      },
			      close() {
			        this.show = false
			        console.log('成功');
			      },
			// 获取用户信息
			async getUserInfo() {
				const res = await this.$request({
					url: '/getAppInfo',
				})
				if (res.code == 200 && res.hasOwnProperty('user')) {
					this.user = res.user
				}

			},
			// 获取用户车辆信息
			async getUserCar() {
				const res = await this.$request({
					url: '/system/userCar/getUserCar',
				})
				if (res.code == 200 && res.hasOwnProperty('data')) {
					this.userCar = res.data
				}
			},
			// 车牌键盘 输入
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.userCar.carNo += val;
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.userCar.carNo.length) this.userCar.carNo = this.userCar.carNo.substr(0, this.userCar.carNo
					.length - 1);
			},
			// 车辆保养保险 日期选择器
			maintenanceDateConfirm(e) {
				this.userCar.maintenanceDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');

				this.maintenanceDatePopShow = false
			},
			inspectionDateConfirm(e) {
				this.userCar.inspectionDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.inspectionDatePopShow = false
			},
			insuranceDateConfirm(e) {
				this.userCar.insuranceDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.insuranceDatePopShow = false
			},
			getgo(){
					uni.navigateBack()
			},
			// 用户资料
			async saveUserProfile() {
					console.log(this.userCar);
				if (uni.$u.test.isEmpty(this.user.realName)) {
					return this.$modal.msgError('请填写真实姓名')
				}
				if (uni.$u.test.isEmpty(this.userCar.carBrand)) {
					return this.$modal.msgError('请填写车辆品牌')
				}
			
				if (uni.$u.test.isEmpty(this.userCar.carNo)) {
					return this.$modal.msgError('请填写车辆号码')
				}


				// 处理下一次时间
				// 保养日期 + 半年
				if (!uni.$u.test.isEmpty(this.userCar.maintenanceDate)) {
					let originalDate = new Date(this.userCar.maintenanceDate);
					const futureDate = new Date(originalDate.getFullYear(), originalDate.getMonth() + 6, originalDate
						.getDate());
					this.userCar.nextMaintenanceDate = futureDate.toISOString().substring(0, 10);

				}

				// 保养里程 + 6000
				if (!uni.$u.test.isEmpty(this.userCar.maintenanceMileage)) {
					this.userCar.nextMaintenanceMileage = parseInt(this.userCar.maintenanceMileage) + 6000;
				}


				// 年检日期 + 一年
				if (!uni.$u.test.isEmpty(this.userCar.inspectionDate)) {

					let originalDate = new Date(this.userCar.inspectionDate);
					const futureDate = new Date(originalDate.getFullYear(), originalDate.getMonth() + 12, originalDate
						.getDate());
					this.userCar.nextInspectionDate = futureDate.toISOString().substring(0, 10);
				}

				// 保险日期 + 一年
				if (!uni.$u.test.isEmpty(this.userCar.insuranceDate)) {

					let originalDate = new Date(this.userCar.insuranceDate);
					const futureDate = new Date(originalDate.getFullYear(), originalDate.getMonth() + 12, originalDate
						.getDate());
					this.userCar.insuranceExpiryDate = futureDate.toISOString().substring(0, 10);
				}

				console.log(this.userCar);
				const res = await this.$request({
					method: 'POST',
					url: '/system/user/profile/saveUserProfile?realName=' + this.user.realName,
					data: this.userCar
				})
				   
				console.log(123, res);
				if (res.msg == '恭喜您，成功升级白银级别会员') {
					  this.show = true
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					// this.$modal.msgSuccess(res.msg)
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #242a38;
		min-height: 100vh;
	}
	.one{
		width: 100%;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #FF861B;
	}
	.o-box{
		width: 100%;
		height: 50px;
		margin-top: 10px;
		background: url('http://www.nuoyunr.com/lananRsc/quanbg.png') no-repeat;
		background-position: center;
	    background-size:cover;
	    background-repeat: no-repeat;
		overflow: hidden;
		border-radius: 6px;

	}
	.heng{
		width: 85%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.zuo{
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}
	.you{
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FF861B;
	}
	.xbiao{
		width: 20px;
		height: 10px;
		background: linear-gradient(86deg, #FFB034 0%, #FF6714 100%);
		background: #FFB351;
		border-radius: 0px 0px 10px 0px;
		font-size: 10px;
		line-height: 15px;
		text-align: center;
		color: white;
		font-weight: bold;
	}
	.youshang{
		width: 40px;
		height: 20px;
		background: #FFB351;
		border-radius: 0px 0px 10px 0px;
		font-size: 10px;
		line-height: 10px;
		text-align: center;
		
	}
	.anniux{
		width: 80px;
		height: 30px;
		margin: 20px auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;font-weight: bold;
		background: linear-gradient(139deg, #FFB931 0%, #FF491F 100%);
		border-radius:  44px
	}
	.z-xin{
		width: 100%;
		background-color: white;
		height: 300px;
		box-sizing: border-box;
		overflow: hidden;
		padding: 15px;
		border-radius: 10px;
	}
	.nickname-pop {
		width: 700rpx;
		margin: 0 auto;
		padding: 70rpx 50rpx 0rpx;
		background: #242a38;
	}

	.nickname-input {
		width: 100%;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
	}

	.nickname-label {
		font-size: 30rpx;
		display: block;
		margin-bottom: 20rpx;
		text-align: center;
		color: #d2c3af;
	}

	.input-style {
		border-bottom: 1px solid #d2c3af;
		display: block;
		width: 100%;
		height: 60rpx;
		color: #d2c3af;
	}

	.button-style {
		width: 600rpx;
		margin: 40rpx auto;
	}
</style>
