<template>
	<view class="page flex-col">
		<view class="group_1 flex-col align-center">
			<view class="flex-row response align-center justify-between padding-left">
				<view class="flex-row">
					<button class="avatar-wrapper" type="balanced" open-type="chooseAvatar" :disabled="!loginStatus"
						@chooseavatar="onChooseavatar">
						<u-avatar :src="user.avatar" size="129"></u-avatar>
					</button>
					<view class="flex-row align-center margin-left">
						<text class="text_2 margin-right-xs" v-if="!loginStatus"
							@click="$tab.redirectTo('/subLoginPages/pages/login')">请登陆</text>
						<text class="text_2 margin-right-xs" v-else>{{ user.nickName }} </text>
						<u-icon name="edit-pen-fill" color="#ffffff" @click="nickNameInputShow = true"
							v-if="loginStatus"></u-icon>
						<view style="height: 1px; width: 20px;"></view>
						<u--image @click="getqrcode()" :src="imagesUrl+'qrcode.png'" width="40px"
							height="80rpx"></u--image>
					</view>
				</view>

				<image class="image_2" :src="imagesUrl + 'huiyuan.png'"
					@click="$tab.navigateTo('/pages/tabBar/mine/rules')" />

			</view>


			<view class="user_level flex-col align-center" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"
				@click="getRechrge()">
				<view class="group_6  flex-row">
					<text
						class="text_3">{{ findDictLabel(user.userLevel,userLevel) ? findDictLabel(user.userLevel,userLevel) : '普通会员'  }}

					</text>
					<text class="text_4">去充值</text>
					<image class="image_5" :src="imagesUrl+'arr2.png'" />
				</view>
				<view class="text-wrapper_1 flex-row justify-between">
					<text class="text_16">{{ user.balance /100 || 0 }} 元</text>
					<text class="text_5">完善会员资料领取白银会员</text>
				</view>
			</view>
			<!-- 公司员工核销 -->
			<template v-if="user.roles[0].roleKey == 'insider'">

				<view class="w700  padding" style="background-color: #313744; color: #d2c3af; border-radius: 10rpx;">
					<text>{{user.roles[0].roleName || '' }}</text>
					<u-grid :border="true" col="2">
						<u-grid-item @click="goValidation(0)">
							<u-icon :customStyle="{color:'#d2c3af'}" name="scan" size="60rpx"></u-icon>
							<text class="grid-text ">订单核销</text>
						</u-grid-item>
						<u-grid-item @click="goValidation(1)">
							<u-icon :customStyle="{color:'#d2c3af'}" name="file-text" size="60rpx"></u-icon>
							<text class="grid-text">核销记录</text>
						</u-grid-item>
					</u-grid>
				</view>
			</template>

			<template v-if="user.roles[0].roleKey == 'instructor'">

				<view class="w700  padding" style="background-color: #313744; color: #d2c3af; border-radius: 10rpx;">
					<text>{{user.roles[0].roleName || '' }}</text>
					<u-grid :border="true" col="1">
						<u-grid-item @click="this.$tab.navigateTo('/pages/tabBar/mine/appointmentRecord')">
							<u-icon :customStyle="{color:'#d2c3af'}" name="file-text" size="60rpx"></u-icon>
							<text class="grid-text">预约练车记录</text>
						</u-grid-item>
					</u-grid>
				</view>
			</template>


			<template v-if="user.roles[0].roleKey == 'dealers'">

				<view class="list flex-row justify-between" @click="">
					<view class="left flex-row justify-between">
						<image class="icon" :src="imagesUrl+'lianxiren.png'" />
						<text class="title"><text>{{user.roles[0].roleName || '' }}</text> <text
								class="text-bold text-lg margin-left-xs"></text></text>
					</view>
					<view class="right flex-row align-center" v-if="user.isAuthenticationDealers == 1">
						<text class="var">已认证</text>
					</view>
					<view class="right flex-row align-center" v-else
						@click="this.$tab.navigateTo('/pages/tabBar/mine/authentication')">
						<text class="var">去认证</text>
						<image class="arr" :src="imagesUrl+'arr3.png'" />
					</view>
				</view>


			</template>


			<template v-if="loginStatus">

				<view class="list flex-row justify-between"
					@click="this.$tab.navigateTo('/subCouponPages/index/index')">
					<view class="left flex-row justify-between">
						<image class="icon" :src="imagesUrl+'lianxiren.png'" />
						<text class="title">我的优惠券</text>
					</view>
					<view class="right flex-row align-center">
						<text class="var"></text>
						<image class="arr" :src="imagesUrl+'arr3.png'" />
					</view>
				</view>
				<view class="list flex-row justify-between" v-if="!userCar.carRegisterDate" @click="getdoingcar()">
					<view class="left flex-row justify-between" >
						<image class="icon" :src="imagesUrl+'lianxiren.png'" />
						<text class="title">行驶证上传</text>
					</view>
					<view class="right flex-row align-center">
						<text class="var">去上传</text>
						<image class="arr" :src="imagesUrl+'arr3.png'" />
					</view>
				</view>
				<view class="list flex-row justify-between" @click="this.$tab.navigateTo('/pages/tabBar/mine/carInfo')">
					<view class="left flex-row justify-between">
						<image class="icon" :src="imagesUrl+'lianxiren.png'" />
						<text class="title">联系人</text>
					</view>
					<view class="right flex-row align-center">
						<text class="var">{{ user.realName || '请设置' }}</text>
						<image class="arr" :src="imagesUrl+'arr3.png'" />
					</view>
				</view>

				<view class="list flex-row justify-between" @click="this.$tab.navigateTo('/pages/tabBar/mine/carInfo')">
					<view class="left flex-row justify-between">
						<image class="icon" :src="imagesUrl+'tel.png'" />
						<text class="title">联系电话</text>
					</view>
					<view class="right flex-row align-center">
						<text class="var">{{ user.phonenumber || '请设置'}}</text>
						<image class="arr" :src="imagesUrl+'arr3.png'" />
					</view>
				</view>

				<view class="list flex-row justify-between" @click="this.$tab.navigateTo('/pages/tabBar/mine/carInfo')">
					<view class="left flex-row justify-between">
						<image class="icon" :src="imagesUrl+'chepai.png'" />
						<text class="title">车辆品牌型号</text>
					</view>
					<view class="right flex-row align-center">
						<text class="var">{{ userCar.carBrand || '请设置'}} </text>
						<image class="arr" :src="imagesUrl+'arr3.png'" />
					</view>
				</view>
				<view class="list flex-row justify-between" @click="this.$tab.navigateTo('/pages/tabBar/mine/carInfo')">
					<view class="left flex-row justify-between">
						<image class="icon" :src="imagesUrl+'lianxiren.png'" />
						<text class="title">车牌号</text>
					</view>
					<view class="right flex-row align-center">
						<text class="var">{{ userCar.carNo || '请设置'}}</text>
						<image class="arr" :src="imagesUrl+'arr3.png'" />
					</view>
				</view>

				<view class="group_13 flex-col margin-top">
					<view class="text-wrapper_6 flex-row justify-between">
						<text class="text_17">上次保养时间</text>
						<text class="text_18">{{ userCar.maintenanceDate || '无记录'}}
						</text>
					</view>
					<image class="image_3" :src="imagesUrl+'line1.png'" />
					<view class="text-wrapper_6 flex-row justify-between">
						<text class="text_17">上次保养里程</text>
						<text class="text_18">{{ userCar.maintenanceMileage || '无记录'}}
						</text>
					</view>
					<image class="image_3" :src="imagesUrl+'line1.png'" />
					<view class="text-wrapper_6 flex-row justify-between">
						<text class="text_17">注册日期</text>
						<text class="text_18">{{ userCar.carRegisterDate ||  '无记录'}}</text>
					</view>
					<image class="image_3" :src="imagesUrl+'line1.png'" />
					<view class="text-wrapper_6 flex-row justify-between">
						<text class="text_17">保险时间</text>
						<text class="text_18">{{ userCar.insuranceDate ||  '无记录'}}</text>
					</view>
				</view>
				<view class="flex-row justify-between align-center self-start margin-left">
					<image class="label_10 margin-top margin-bottom margin-right-xs" :src="imagesUrl+'tixing.png'" />
					<text class="text-group_10">车辆提醒</text>
				</view>
				<view class="group_13 flex-col">
					<view class="text-wrapper_6 flex-row justify-between">
						<text class="text_17">建议下次保养时间</text>
						<text class="text_18">{{ userCar.nextMaintenanceDate ||  '无记录'}}</text>
					</view>
					<image class="image_3" :src="imagesUrl+'line1.png'" />
					<view class="text-wrapper_6 flex-row justify-between">
						<text class="text_17">建议下次保养里程</text>
						<text class="text_18">{{ userCar.nextMaintenanceMileage || '无记录'}}
						</text>
					</view>
						<image class="image_3" :src="imagesUrl+'line1.png'" />
					<view class="text-wrapper_6 flex-row justify-between" v-if="userCar.nextCheckDate">
						<text class="text_17">建议下次里维护时间</text>
						<text class="text_18">{{ userCar.nextCheckDate || '无记录'}}
						</text>
					</view>
					<image class="image_3" :src="imagesUrl+'line1.png'" />
					<view class="text-wrapper_6 flex-row justify-between">
						<text class="text_17">年检到期时间</text>
						<text class="text_18">{{ userCar.nextInspectionDate ||  '无记录'}}</text>
					</view>
					<image class="image_3" :src="imagesUrl+'line1.png'" />
					<view class="text-wrapper_6 flex-row justify-between">
						<text class="text_17">保险到期时间</text>
						<text class="text_18">{{ userCar.insuranceExpiryDate ||  '无记录'}}</text>
					</view>
				</view>
				<view class="section_8 flex-row margin-top" @click="feedbackInputShow = true">
					<view class="image-text_1 flex-row justify-between">
						<image class="label_1" :src="imagesUrl+'tousu.png'" />
						<text class="text-group_1">投诉及建议</text>
					</view>
					<image class="image_4" :src="imagesUrl+'arr3.png'" />
				</view>

				<view class="section_9 flex-row">
					<u-button color="linear-gradient(to bottom, rgb(244, 230, 186), rgb(252, 236, 210))" text="退出"
						@click="logout" :customStyle="{color:'#000'}"></u-button>
				</view>
			</template>
		</view>
		<u-popup :show="nickNameInputShow" mode="center" :closeable="true" @close="closenickNameInputPop"
			:customStyle="{backgroundColor:'transparent'}">
			<view class="nickname-pop">
				<text class="nickname-label">您的新昵称(10字之内)</text>
				<view class="nickname-input">
					<input type="nickname" class="input-style" maxlength="10" v-model.trim="newNickName"
						placeholder="请输入昵称" border="surround" @blur="bindblur" @input="bindinput" />
				</view>
				<view class="button-style">
					<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))" shape="circle"
						text="保存" @click="updateProfile" :customStyle="{color:'#000'}"></u-button>
				</view>
			</view>
		</u-popup>



		<u-popup :show="feedbackInputShow" mode="center" :closeable="true" @close="feedbackInputShow = false"
			:customStyle="{backgroundColor:'transparent'}">
			<view class="nickname-pop">
				<text class="nickname-label">投诉或建议</text>
				<view class="margin-top-sm margin-bottom-sm">
					<u-radio-group v-model="feedbackCategory" placement="row" size="32rpx" labelSize="32">
						<u-radio shape="square" label="建议" name="建议" labelSize="28" labelColor="#d2c3af"
							:customStyle="{marginRight:'10rpx'}"></u-radio>
						<u-radio shape="square" label="投诉" name="投诉" labelSize="28" labelColor="#d2c3af"></u-radio>
					</u-radio-group>
				</view>
				<view class="nickname-input">
					<u--textarea v-model.trim="feedbackText" placeholder="请输入内容"></u--textarea>
				</view>
				<view class="button-style">
					<u-button color="linear-gradient(to right, rgb(244, 230, 186), rgb(252, 236, 210))" shape="circle"
						text="提交" @click="addFeedbackWx" :customStyle="{color:'#000'}"></u-button>
				</view>
			</view>
		</u-popup>

		<view class="zhezhao" v-show="ping == true" @click="ping = false">
			<view class="z-box">
				<canvas style="width:100px; height: 120px;" canvas-id="myQrcode"></canvas>
				<text style="color: white; margin-top: 20px;">点任意区域关闭</text>
			</view>
		</view>

		<u-popup :show="codeShow" :round="10" mode="center" @close="closeCodePop" :closeable='true'>
			<view style="box-sizing: border-box; padding: 40px; 0px">
				<canvas style="width:100px; height: 100px;" canvas-id="myQrcode"></canvas>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>
<script>
	import drawQrcode from 'weapp-qrcode';
	import {
		getToken
	} from '@/utils/auth'
	export default {
		data() {
			return {
				ping: false,
				codeShow: false,
				type: 'center',
				ueseid: '',
				imagesUrl: getApp().globalData.config.imagesUrl,

				baseUrl: getApp().globalData.config.baseUrl,
				backgroundImage: getApp().globalData.config.imagesUrl + 'userBg.png',
				constants: {},
				loginStatus: false,
				user: {
					realName: ''
				},
				userLevel: [],
				newNickName: '',
				nickNameInputShow: false,
				userProfileInputShow: false,
				userCar: {
					carBrand: '',
					carModel: '',
					carNo: '',
					maintenanceDate: '',
					inspectionDate: '',
					insuranceDate: '',
					maintenanceMileage: '',
					nextMaintenanceDate: '',
					next_maintenance_mileage: '',
					next_inspection_date: '',
					insurance_expiry_date: ''
				},
				feedbackCategory: '建议',
				feedbackText: '',
				feedbackInputShow: false,
				maintenanceDatePopShow: false,
				inspectionDatePopShow: false,
				insuranceDatePopShow: false,
				currDate: Number(new Date())

			}
		},
		onLoad() {
			let texts = 'https://www.nuoyunr.com/lananwx?id=' + this.userid
			drawQrcode({
				width: 100,
				height: 100,
				canvasId: 'myQrcode',
				text: texts,
			})
		},
		onShow() {
			this.open()
			this.getUserInfo()
			this.getDict('user_level')
			this.getUserCar()
		},
		methods: {
			//行驶证上传
			getdoingcar() {
				uni.navigateTo({
					url: '/pages/tabBar/mine/license'
				})
			},
			getqrcode() {
				uni.navigateTo({
					url: '/pages/tabBar/mine/qrcode'
				})
			},
			// js 触发的函数:置空即可
			moveHandle: function() {},

			getclone() {
				this.$refs.popup.close()
			},
			open() {

				let texts = 'https://www.nuoyunr.com/lananwx?id=' + this.userid
				drawQrcode({
					width: 100,
					height: 100,
					canvasId: 'myQrcode',
					text: texts,
				})
			},
			closeCodePop() {
				this.codeShow = false
			},
			showCode() {

				this.codeShow = true
				let texts = 'https://www.nuoyunr.com/lananwx?id=' + this.userid
				drawQrcode({
					width: 200,
					height: 200,
					canvasId: 'myQrcode',
					text: texts,
				})
			},

			//去支付
			getRechrge() {
				uni.navigateTo({
					url: '/pages/tabBar/mine/Recharge'
				})
			},
			// 获取用户信息
			async getUserInfo() {
				const res = await this.$request({
					url: '/getAppInfo',
				})
				if (res.code == 200 && res.hasOwnProperty('user')) {
					this.loginStatus = true
					this.user = res.user
					this.ueseid = res.user.userId
					this.user.avatar = this.baseUrl + res.user.avatar;
				}
				const userBalance = await this.$request({
					url: "/system/userBalance/balance"
				})
				if (userBalance.code == 200 && userBalance.hasOwnProperty('data') && userBalance.data.balance > 0) {
					this.$set(this.user, 'balance', userBalance.data.balance)
				} else {
					this.$set(this.user, 'balance', 0)
				}
				console.log(res);
			},
			// 获取用户车辆信息
			async getUserCar() {
				const res = await this.$request({
					url: '/system/userCar/getUserCar',
				})
				if (res.code == 200 && res.hasOwnProperty('data')) {
					this.userCar = res.data
				}
			},
			// 退出登陆
			async logout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/tabBar/index/index')
					})
				})
			},
			// 获取字典数据
			async getDict(dictType) {
				const res = await this.$request({
					url: '/system/dict/data/list',
					method: 'get',
					params: {
						dictType
					}
				})
				this.userLevel = res.rows
				console.log(res);
			},
			// 字典值翻译成标签
			findDictLabel(dictValue, dictType) {
				let find = dictType.find((item, index) => {
					return item.dictValue == dictValue
				})
				if (find) {
					return find.dictLabel;
				} else {

				}
			},
			// 头像选择与上传
			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.getUserInfo()
						}
					}
				});
			},
			// 修改昵称
			async updateProfile() {
				if (uni.$u.test.isEmpty(this.newNickName)) {
					return uni.showToast({
						icon: 'error',
						title: '请填写昵称'
					})
				}
				const res = await this.$request({
					method: 'PUT',
					url: '/system/user/profile/updateNickName',
					data: {
						nickName: this.newNickName
					}
				})
				if (res.code == 200) {
					uni.showToast({
						title: '昵称修改成功'
					})
					this.closenickNameInputPop()
					this.getUserInfo()
				}
			},
			closenickNameInputPop() {
				this.nickNameInputShow = false
			},
			bindblur(e) {
				this.newNickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.newNickName = e.detail.value; // 获取微信昵称
			},
			// 用户资料
			async saveUserProfile() {
				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.carModel)) {
					return this.$modal.msgError('请填写车辆型号')
				}
				if (uni.$u.test.isEmpty(this.userCar.carNo)) {
					return this.$modal.msgError('请填写车辆号码')
				}

				const res = await this.$request({
					method: 'POST',
					url: '/system/user/profile/saveUserProfile',
					data: {
						realName: this.user.realName,
						carBrand: this.userCar.carBrand,
						carModel: this.userCar.carModel,
						carNo: this.userCar.carNo,
						maintenanceDate: '',
						inspectionDate: '',
						insuranceDate: '',
						maintenanceMileage: '',
						nextMaintenanceDate: '',
						next_maintenance_mileage: '',
						next_inspection_date: '',
						insurance_expiry_date: ''
					}
				})
				console.log(123, res);
				if (res.code == 200) {
					this.$refs.uToast.show({
						message: res.msg,
						position: "top",
						type: 'success'
					})
					this.closeUserProfileInputPop()
					this.getUserInfo()
				}
			},
			closeUserProfileInputPop() {
				this.userProfileInputShow = false
			},
			// 评论提交
			async addFeedbackWx() {
				if (uni.$u.test.isEmpty(this.feedbackCategory)) {
					return this.$modal.msgError('请选择分类')
				}
				if (uni.$u.test.isEmpty(this.feedbackText)) {
					return this.$modal.msgError('请填写内容')
				}
				if (uni.$u.test.rangeLength(this.feedbackText, [20, 60])) {
					return this.$modal.msgError('文字内容应在10-30字之间')
				}

				const res = await this.$request({
					url: '/system/userFeedback/addFeedbackWx',
					method: 'POST',
					data: {
						feedbackCategory: this.feedbackCategory,
						feedbackText: this.feedbackText
					}
				})
				this.$refs.uToast.show({
					message: res.msg,
					position: "top",
					type: 'success'
				})
				this.feedbackText = ''
				this.feedbackInputShow = false
			},
			// 充值
			async pay() {
				const res = await this.$request({
					url: '/pay/createOrder',
					method: 'get',
				})
				console.log(res);
			},

			// 核销界面
			goValidation(tab) {
				this.$tab.navigateTo("/pages/tabBar/mine/validation?tab=" + tab)
			},
			// 车辆保养保险 日期选择器
			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
			}


		},
	};
</script>
<style scoped lang="scss">
	@import './index.rpx.css';

	/deep/.u-icon__icon.data-v-2ee87dc9 {
		font-family: uicon-iconfont;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 22px !important;
	}

	.zhezhao {
		width: 100%;
		height: calc(100vh);
		background-color: black;
		position: fixed;
		top: 0px;
	}

	.z-box {
		position: fixed;
		left: 40%;
		top: 30%;
	}

	.text-group_1 {
		font-size: 32rpx;
	}

	.text_17 {
		font-size: 32rpx;
	}

	.text_18 {
		font-size: 32rpx;
	}

	.page {
		background-color: #242a38;
		height: 100vh;
	}


	.user_level {
		width: 700rpx;
		border-radius: 25rpx;
		margin: 20rpx 0;
	}

	.list {
		background-color: rgba(255, 255, 255, 0.06);
		border-radius: 10px;
		width: 699rpx;
		height: 87rpx;
		margin: 20rpx auto;

		.left {
			width: 176rpx;
			height: 26rpx;
			margin: 30rpx 0 0 42rpx;

			.icon {
				width: 27rpx;
				height: 26rpx;
			}

			.title {
				width: 130rpx;
				height: 26rpx;
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx;
				font-family: MicrosoftYaHei;
				font-weight: NaN;
				text-align: left;
				white-space: nowrap;
				line-height: 26rpx;
			}
		}

		.right {
			height: 87rpx;
			margin-right: 40rpx;

			.var {
				color: rgba(210, 195, 175, 1);
				font-size: 32rpx;
				line-height: 26rpx;
			}

			.arr {
				width: 12rpx;
				height: 22rpx;
				margin: 0 0 0 24rpx;
			}
		}

	}

	/* 头像能力 按钮样式 */
	.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;
	}



	.nickname-pop {
		width: 680rpx;
		padding: 70rpx 50rpx 0rpx;
		background: #242a38;
		border-radius: 10rpx;
	}

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

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