<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<!-- 	<uni-icons type="left" size="18" color="#ffffff"></uni-icons> -->
			</view>
			<view class="X-title">个人中心</view>
			<view style="width: 8%; height: 1px;"></view>
		</view>
		<view class="ail">
			<view style="display: flex; align-items: center; margin-bottom: 20px;">
				<view class="touxiang">
					<button class="avatar-wrapper" type="balanced" open-type="chooseAvatar"
						@chooseavatar="onChooseavatar">
						<image src="http://www.nuoyunr.com/lananRsc/detection/touxiang.png" mode=""
							v-if="!userinfo.avatar"></image>
						<image :src=" baseUrl+userinfo.avatar " mode="" v-if="userinfo.avatar"></image>
					</button>
				</view>
				<view class="c-title" v-if="!userinfo.nickname" @click="gologin">立即登录</view>
				<!-- @click="inputDialogToggle" -->
				<view class="c-title" v-else>
					<view style="display: flex; align-items: center;">
						<!-- {{realName?realName:'用户昵称'}} -->
						<input style="width: 50%;" type="text" placeholder="请填写昵称" v-model="realName">
						<uni-icons style="margin-left: 5px;" type="compose" color="#ffffff" size="20"
							@click="dialogToggle()"></uni-icons>
					</view>
					<!-- <view class="sbai">	
					<image src="http://www.nuoyunr.com/lananRsc/detection/yue.png" mode=""></image>
					<text>当前余额：{{userinfo.balance / 100}}元</text>
				</view> -->

				</view>
				<!-- 青铜 -->

				<!-- 	<view class="vipimg" v-if="userinfo.userLevel == 1">
				<image src="http://www.nuoyunr.com/lananRsc/detection/by.png" mode=""></image>
			</view>
			<view class="vipimg" v-if="userinfo.userLevel == 2">
				<image src="http://www.nuoyunr.com/lananRsc/detection/hj.png" mode=""></image>
			</view>
			<view class="vipimg" v-if="userinfo.userLevel == 3">
				<image src="http://www.nuoyunr.com/lananRsc/detection/bj.png" mode=""></image>
			</view> -->


			</view>
			<!-- 	<view class="top-xia" @click="govip()">
			<view class="top-left">
				<view class="imgtop">
					<image src="http://www.nuoyunr.com/lananRsc/detection/left.png" mode=""></image>
				</view>
			</view>
			<view class="top-right">
				<view class="hai">
				<text v-if="userinfo.userLevel == 0">普通会员</text>
				 <text  v-if="userinfo.userLevel == 1">白银会员</text>
				  <text  v-if="userinfo.userLevel == 2">黄金会员</text>
				   <text  v-if="userinfo.userLevel == 3">白金会员</text>
				   
				   <text class="gx">·预约检测享折扣</text> </view>
				<view class="zong">
					<uni-icons  type="right" size="18" color="#E6BC97"></uni-icons>
				</view>
			</view>
		</view> -->
			<view class="bai-box">
				<view class="b-title">我的订单</view>
				<view class="sige">
					<view class="s-box" @click="goorder(5)">
						<view class="simg">
							<image src="http://www.nuoyunr.com/lananRsc/detection/dfk.png" mode=""></image>
						</view>
						<view class="zi">已退款</view>
					</view>
					<view class="s-box" @click="goorder(1)">
						<view class="simg">
							<image src="http://www.nuoyunr.com/lananRsc/detection/yfk.png" mode=""></image>
						</view>
						<view class="zi">待使用</view>
					</view>
					<view class="s-box" @click="goorder(2)">
						<view class="simg">
							<image src="http://www.nuoyunr.com/lananRsc/detection/ywc.png" mode=""></image>
						</view>
						<view class="zi">待评价</view>
					</view>
					<view class="s-box" @click="goorder('')">
						<view class="simg">
							<image src="http://www.nuoyunr.com/lananRsc/detection/qbdd.png" mode=""></image>
						</view>
						<view class="zi">全部订单</view>
					</view>
				</view>
			</view>
			<view class="bai-box" v-if="carobj == undefined">
				<view class="on-input">
					<view class="">请上传车辆信息</view>
					<view class="">
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
			</view>
			<!--  -->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in carlist" :key="index">
					<view class="bai-box">
						<view class="x-top">
							<!-- @click="gocarinfo(item.carId)" -->
							<view class="x-left">
								<view>
									<view class="dh-title">{{item.carBrand}}</view>
									<view class="xh-title">{{item.carNo}}</view>
								</view>
							</view>
							<view class="x-right">
								<view class="xh-title">您的爱车</view>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</view>
						<view class="x-xia">
							<view class="dix">
								<view class="x-icon">
									<image src="http://www.nuoyunr.com/lananRsc/detection/clby.png" mode=""></image>
								</view>
								<text>车辆提醒</text>
							</view>
							<view class="dixx">
								<text class="xh-title">下次年检时间：</text>
								<text class="xh-title">{{item.nextInspectionDate||''}}</text>
							</view>
							<!-- <view class="dixx">
										<text class="xh-title">下次保养时间：</text>
										<text class="xh-title">{{item.nextMaintenanceDate||''}}</text>
									</view>
									<view class="dixx">
										<text class="xh-title">下次保养里程：</text>
										<text class="xh-title">{{item.nextMaintenanceMileage||''}} km</text>
									</view> -->
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="aa-box" @click="gousers()">
						<view class="wdadada">+</view>
						<view class="wdadada" style="font-size: 14px; margin-top: 5px;">新增车辆信息</view>
					</view>
				</swiper-item>
			</swiper>
			<!--  -->

			<view class="dai-box">
				<view class="vinput" @click="goreservation()">
					<view class="dix">
						<view class="d-img" style="width: 20px;height: 20px;">
							<image src="http://www.nuoyunr.com/lananRsc/detection/yuyue2.png" mode=""></image>
						</view>
						<view class="zq">我的预约</view>
					</view>
					<view class="dix">
						<!-- <text class="xhui">去上传</text> -->
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>

					</view>
				</view>
				<view class="vinput" @click="gowei()">
					<view class="dix">
						<view class="d-img">
							<image src="http://www.nuoyunr.com/lananRsc/detection/zjsc.png" mode=""></image>
						</view>
						<view class="zq">委托授权</view>
					</view>
					<view class="dix">
						<!-- <text class="xhui">去上传</text> -->
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>

					</view>
				</view>
				<view v-if="openRz=='1'" class="vinput" @click="goshang()">
					<view class="dix">
						<view class="d-img">
							<image src="http://www.nuoyunr.com/lananRsc/detection/zjsc.png" mode=""></image>
						</view>
						<view class="zq">商家入驻</view>
					</view>
					<view class="dix">
						<!-- <text class="xhui">去上传</text> -->
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>

					</view>
				</view>

				<view class="vinput" @click="gosfz()">
					<view class="dix">
						<view class="d-img">
							<image src="http://www.nuoyunr.com/lananRsc/detection/zjsc.png" mode=""></image>
						</view>
						<view class="zq">实名认证</view>
					</view>
					<view class="dix">

						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>

					</view>
				</view>

				<view class="vinput" @click="goyhq()">
					<view class="dix">
						<view class="d-img">
							<image src="http://www.nuoyunr.com/lananRsc/detection/kq.png" mode=""></image>
						</view>
						<view class="zq">我的卡券</view>
					</view>

					<view class="">
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>
					</view>
				</view>
				<view class="vinput" @click="gocollect()">
					<view class="dix">
						<view class="d-img">
							<image src="http://www.nuoyunr.com/lananRsc/detection/wzsc.png" mode=""></image>
						</view>
						<view class="zq">文章收藏</view>
					</view>
					<view class="">
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>
					</view>
				</view>
				<view class="vinput" @click="outoflogin()">
					<view class="dix">
						<view class="d-img">
							<image src="http://www.nuoyunr.com/lananRsc/detection/xtsz.png" mode=""></image>
						</view>
						<view class="zq">退出登录</view>
					</view>
					<view class="">
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您确定要修改昵称吗"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<view style="width: 100%; height: 50px;"></view>
		<!-- <tabBar :msg="msg"></tabBar> -->
	</view>
</template>

<script>
	import request from '../../utils/request'
	import {
		getToken
	} from '@/utils/auth'
	import config from '@/config'
	import tabBar from '../../components/detection/tabBar.vue'
	import newRequest from "@/utils/newRequest";
	import {
		toast,
		showConfirm,
		tansParams
	} from '@/utils/common'
	export default {
		data() {
			return {
				indicatorDots: false,
				openRz: "0",
				autoplay: true,
				interval: 5000,
				duration: 100,
				msgType: 'success',
				realName: '用户昵称',
				userinfo: {},
				carlist: [],
				carobj: {
					nextInspectionDate: '',
					nextMaintenanceDate: ''
				},
				msg: '3',
				value: '',
				baseUrl: this.$baseUrl
			}
		},
		mounted() {

		},
		onShow() {
			this.getmy()
			this.getcarlist()
		},
		components: {
			tabBar,
		},
		methods: {
			async getcarlist() {
				if (!getToken()) {
					return
				}
				const res = await newRequest({
					url: '/app-api/appInspection/userOwn/getCars',
					method: 'get',
				})

				this.carlist = res.data
				console.log(this.carlist);
			},
			// 头像选择与上传
			onChooseavatar(e) {
				uni.uploadFile({
					url: this.baseUrl + '/system/user/profile/avatar',
					filePath: e.detail.avatarUrl,
					name: 'avatarfile',
					header: {
						Authorization: 'Bearer ' + getToken()
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						if (uploadFileRes.statusCode == 200) {
							this.getmy()
						}
					}
				});
			},
			// 修改昵称
			async updateProfile() {
				if (this.realName == "") {
					return uni.showToast({
						icon: 'error',
						title: '请填写昵称'
					})
				}
				const res = await request({
					method: 'PUT',
					url: '/system/user/profile/updateNickName',
					data: {
						realName: this.realName
					}
				})
				if (res.code == 200) {
					uni.showToast({
						title: '昵称修改成功'
					})
					// this.closenickNameInputPop()
					this.getmy()
				}
			},
			// 退出登陆
			outoflogin() {
				uni.clearStorageSync();
				uni.navigateTo({
					url: '/pages/detection/detection'
				})
			},
			async getmy() {
				console.log(getToken(), 111);
				if (!getToken()) {
					return
				}
				let res = await newRequest({
					url: '/app-api/rescue/getAppInfo',
					method: 'get',
				})
				console.log('个人信息', res);
				this.userinfo = res.data.user
				this.realName = res.data.user.nickname
				this.openRz = res.data.openRz
				let carres = await newRequest({
					url: '/app-api/appInspection/userOwn/getUserCar',
					method: 'get',
				})
				this.carobj = carres.data
				console.log('车辆信息', this.carobj);
			},
			goorder(id) {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				uni.navigateTo({
					url: '/pages/detection/my-order?id=' + id
				})
			},
			goreservation() {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				uni.navigateTo({
					url: '/pages/detection/my-reservation'
				})
			},
			goshang() {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				uni.navigateTo({
					url: '/pages/ruzhu/ruzhu'
				})
			},
			gologin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			gowei() {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				uni.navigateTo({
					url: '/pages/contract/contract'
				})
			},
			//去收藏
			gocollect() {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				uni.navigateTo({
					url: '/pages/detection/my-collect'
				})
			},
			gocarinfo(id) {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				uni.navigateTo({
					url: '/pages/detection/my-carinfo?id=' + id
				})
			},
			//行驶证
			gousers() {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				console.log('11');
				uni.navigateTo({
					url: '/pages/detection/my-user'
				})
			},
			//身份证
			gosfz() {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				if (this.userinfo.idCard != null) {
					uni.showToast({
						title: '已上传身份证'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/detection/my-card'
				})
			},
			//我的优惠券
			goyhq() {
				if (!getToken()) {
					showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}
					})
					reject('无效的会话，或者会话已过期，请重新登录。')
				}
				uni.navigateTo({
					url: '/pages/detection/my-coupon'
				})
			},
			//vip
			govip() {
				uni.navigateTo({
					url: '/pages/detection/my-vip'
				})
			},
			//
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.updateProfile()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {
				this.updateProfile()

			},
		}
	}
</script>

<style lang="scss" scoped>
	.aa-box {
		margin-top: 15px;
		width: 100%;
		height: 152px;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 20px;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}

	.swiper {
		height: 170px;
	}

	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		background: url('http://www.nuoyunr.com/lananRsc/jcbjt.png') center no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 10%;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: white;
	}

	.c-title {
		width: 50%;
		font-size: 18px;
		color: white;
		font-weight: bold;
	}

	.X-title {

		font-size: 18px;
		color: white;
		font-weight: bold;
	}

	.sbai {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: white;
		font-weight: bold;
		margin-top: 5px;

		image {
			width: 17px;
			height: 17px;
			margin-right: 5px;
		}
	}

	.on-input {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.t-sb {
		width: 50%;
		display: flex;
		align-items: center;

	}

	.xhui {
		color: #D9D9D9;
		font-size: 16px;
	}

	.dix {
		display: flex;
		align-items: center;
	}

	.dixx {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.touxiang {
		width: 60px;
		height: 60px;
		// background: #D9D9D9;
		border-radius: 50%;
		overflow: hidden;
		border: 2px solid #FFFFFF;
		margin: 0px 10px;
		margin-top: 0px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ail {
		box-sizing: border-box;
		padding: 15px;
		padding-top: 0px;
	}

	.top-xia {
		width: 100%;
		height: 50px;
		border-radius: 8px;
		background: linear-gradient(180deg, #373737 0%, #070707 100%);
		// background: linear-gradient(180deg, #F0DFCB 0%, #E6BC97 100%);
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top-left {
		width: 15%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.imgtop {
			width: 30px;
			height: 30px;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.top-right {
		width: 85%;
		height: 100%;
		border-radius: 8px;
		background: linear-gradient(180deg, #F0DFCB 0%, #E6BC97 100%);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		padding: 0px 15px;
	}

	.hai {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.zong {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		text-align: center;
		background-color: #373737;
	}

	.gx {
		font-size: 13px;
		font-weight: 400;
		color: #835530;
	}

	.bai-box {
		box-sizing: border-box;
		padding: 15px;
		background-color: white;
		border-radius: 8px;
		margin-top: 15px;
	}

	.dai-box {
		box-sizing: border-box;
		padding: 15px;
		border-radius: 8px;
		margin-top: 15px;
		background: white;
		box-shadow: 1px 1px 3px 1px #6b6b6b;
	}

	.b-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;

	}

	.sige {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.s-box {
		width: 25%;
		text-align: center;
	}

	.zi {
		margin-top: 5px;
		font-size: 13px;
		font-weight: 400;
		color: #333333;
	}

	.simg {
		width: 26px;
		height: 26px;
		margin: 0 auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.x-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
	}

	.x-left {
		display: flex;
		align-items: center;
	}

	.chebiao {
		width: 70px;
		height: 70px;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.dh-title {
		font-size: 20px;
		font-weight: 400;
		color: #333333;
		line-height: 20px;
		margin-bottom: 15px;
	}

	.xh-title {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
	}

	.x-right {
		display: flex;
		align-items: center;
	}

	.x-xia {
		margin-top: 15px;
	}

	.x-icon {
		width: 18px;
		height: 18px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.vinput {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 10px;
		margin-top: 10px;
	}

	.d-img {
		width: 18px;
		height: 18px;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.zq {
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.vipimg {
		width: 86px;
		height: 24px;
		margin-left: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.avatar-wrapper {
		height: 100%;
		height: 100%;
		margin: 0;
		background-color: 0;
		background: 0;
		padding: 0;
		border-radius: 0;
		border-radius: 0;
		border: 0;
		overflow: hidden;
	}

	.avatar-wrapper::after {
		border: none;
	}

	.wdadada {
		width: 100%;
		text-align: center;
		margin-top: 40px;
		font-size: 30px;
	}
</style>