<template>
	<view class="content">
	<view class="c-top">
		<view class="t-title">个人中心</view>
		<view class="dis-b" style="margin-top: 16px;">
			<view class="t-left">
				<view class="touxiang" >
					<u-upload
					
						:fileList="fileList6"
						@afterRead="afterRead"
						@delete="deletePic"
						name="6"
						multiple
						:maxCount="1"
						width="60"
						height="60"
					>
					<image :src=" baseUrl + userInfo.avatar " v-if="userInfo.avatar != '' " style="width: 60px; height: 60px; border-radius: 50%; z-index: 99;" mode="" ></image>
				</u-upload>
				</view>
				<view >
					<view class="t-zi1">
						<text>{{userInfo.realName || ''}}</text>
						<view class="paizi">
							<image src="../../static/rzsj.png" mode=""></image>
						</view>
					</view>
					<view class="x-baiz">{{userInfo.phonenumber || ''}}</view>
					<!-- <view class="t-biao">5.0 <uni-icons type="star-filled" size="18" color="#fffff"></uni-icons> </view> -->
				</view>
			</view>
		
		</view>
		<view class="t-bottom">
			<view class="top-box">
				<view class="t-lan">300</view>
				<view class="t-hui">累计完成(单)</view>
			</view>
		
			<view class="top-box" style="border: none;">
				<view class="t-lan">5.0</view>
				<view class="t-hui">当前星级</view>
			</view>
		</view>
	</view>
	<view class="t-ybr">
	
	</view>
	
	<view class="hui-content">
		<view class="">
			<view class="dix">
				<uni-icons type="wallet-filled" color="#0D2E8D" size="22"></uni-icons>
				<text>当前余额</text>
			</view>
			<view class="yey">1999.00</view>
		</view>
		<view class="dix">
			<text class="hui-zi">账户</text>
			<uni-icons type="right" color=" #AAAAAA" size="16"></uni-icons>
		</view>
	</view>
	<view class="hui-twotwo">
		<view class="ddis" @click="gorefuel()">
			<view class="left-icon">
				<image src="../../static/smrz.png" mode=""></image>
			</view>
			<view class="right-box">
				<view class="lefts">加油记录</view>
				<view class="">
					<uni-icons type="right" color=" #AAAAAA" size="14"></uni-icons>
				</view>
			</view>
		</view>
		<view class="ddis">
			<view class="left-icon">
				<image src="../../static/clxx.png" mode=""></image>
			</view>
			<view class="right-box">
				<view class="lefts">车辆信息维护</view>
				<view class="">
					<uni-icons type="right" color=" #AAAAAA" size="14"></uni-icons>
				</view>
			</view>
		</view>
	<!-- 	<view class="ddis">
			<view class="left-icon">
				<image src="../../static/bxwh.png" mode=""></image>
			</view>
			<view class="right-box">
				<view class="lefts">保险维护</view>
				<view class="">
					<uni-icons type="right" color=" #AAAAAA" size="14"></uni-icons>
				</view>
			</view>
		</view> -->
		<view class="ddis">
			<view class="left-icon">
				<image src="../../static/xtsz.png" mode=""></image>
			</view>
			<view class="right-box" @click="dialogToggle()">
				<view class="lefts">退出登录</view>
				<view class="">
					<uni-icons type="right" color=" #AAAAAA" size="14"></uni-icons>
				</view>
			</view>
		</view>
	</view>
	
	<!-- <view class="anniu" @click="getnaiv()">
		<view class="">测试页</view>
	</view> -->
		<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog  cancelText="关闭" confirmText="同意" title="通知" content="您确认退出吗" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<tabBar :msg="msg " ></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from'../../components/tabBar/tabBar.vue'
		import { getToken } from '@/utils/auth'
	export default {
		data() {
			return {
				msg:'3',
				fileList6:[],
				topdata:[
					{text:'待确认',id:1},
					{text:'进行中',id:2},
					{text:'已完成',id:3}
				],
				baseUrl:this.$baseUrl,
				userInfo:{},
				tabindex:0,
				title: 'user',
				checkedindex:false,
			}
		},
		onShow() {
		this.getUserinfo()
		},
		components:{
			tabBar,
		},
		methods: {
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.onChooseavatar(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			onChooseavatar(e) {
				uni.uploadFile({
					url: this.baseUrl + '/system/user/profile/avatar',
					filePath: e,
					name: 'avatarfile',
					header: {
						Authorization: 'Bearer ' + getToken()
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						if (uploadFileRes.statusCode == 200) {
							this.getUserinfo()
						}
					}
				});
			},
		async	getUserinfo(){
				
			let res = await	request({
					url: '/getRescueDriverInfo',
					method: 'get',
					
				})
					console.log('司机13',res);
				if(res.code == 200){
					uni.setStorageSync('userinfo',res.user)
					this.userInfo = res.user
				}
				
			},
		gorefuel(){
				uni.navigateTo({
					url:'/pages/my/refuel'
				})
			},
		dialogToggle() {
				this.$refs.alertDialog.open()
			},
		dialogConfirm(){
				this.$refs.alertDialog.close()
				this.gologin()
		},
		dialogClose(){
			this.$refs.alertDialog.close()
		},
		gologin(){
			this.$getclearInterval()
			uni.clearStorageSync();
			uni.reLaunch({
				url:'/pages/login/login'
			});
		}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
		padding-top: 40px;
		background: #F4F4F4;
		width: 100%;
		height: calc(100vh);
	}
	.dix{
		display: flex;
		align-items: center;
	}
		
	.htzit{
		display: flex;
		align-items: center;
		font-size: 15px;
		color: #999999;
	
	}
	.yey{
		font-size: 24px;
		font-weight: 500;
		color: #333333;
	}
	.xshui{
		font-size: 15px;
		font-weight: 400;
		color: #333333;
	}
	.changimg{
		width: 58px;
		height: 20px;
			margin-right: 5px;
			image{
				width: 100%;
				height: 100%;
			}
	}
	.shiwuimg{
		width: 15px;
		height: 15px;
			margin-right: 5px;
			image{
				width: 100%;
				height: 100%;
			}
	}
	.lefts{
		font-size: 14px;
		font-weight: 400;
		color: #333333;
	}
	.inanniu{
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #3CBC6F;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #3CBC6F;
	}
	.lanniu{
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #3C9CFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #3C9CFF;
	}
	.anniua{
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		background: #0D2E8D;
		color: #ffffff;
	}
	.dis-bb{
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 15px;
		border-bottom: 1px solid #EEEEEE;
	}
		
	.dis-tt{
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-top: 15px;
		border-top: 1px solid #EEEEEE;
	}
	.c-top{
		width: 100%;
		height: 150px;
		background: #0D2E8D;
		box-sizing: border-box;
		padding: 15px;
	}
	.t-title{
		font-size: 18px;
		font-weight: bold;
		color: #FFFFFF;
	}
	.dis-b{
		display: flex;
		justify-content: space-between;
	}
	.t-left{
		display: flex;
		.touxiang{
			width: 60px;
			height: 60px;
			border-radius: 50%;
			overflow: hidden;
			// background-color: #E3E3E3;
			border:1px solid white; 
			margin-right: 15px;
		}
	}
	.t-zi1{
		font-size: 16px;
		font-weight: bold;
		color: white;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}
	.t-biao{
		border-radius: 11px 11px 11px 0px;
		background: linear-gradient(90deg, #EE8342 0%, #EA3942 100%);
		color: white;
		text-align: center;
	}
	.t-right{
		
	}
	.t-zi2{
		font-size: 14px;
		font-weight: bold;
		color: white;
	}
	.t-bottom{
		background: #FFFFFF;
		box-shadow: 0px 4px 4px 0px rgba(13,46,141,0.15);
		border-radius: 8px;
		margin-top: 10px;
		box-sizing: border-box;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		z-index: 999999999;
	}
	.top-box{
		width: 50%;
		height: 100%;
		border-right: 1px solid #EEEEEE;
		text-align: center;
		
	}
	.t-lan{
		font-size: 28px;
		font-weight: bold;
		color: #0D2E8D;
	}
	.t-hui{
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}
	.t-ybr{
		width: 100%;
		z-index: 99;
		height: 80px;
		box-sizing: border-box;
		padding-top: 90px;
		display: flex;
		justify-content: space-around;
	
	}
	.anniu{
		width: 95%;
		height: 44%;
		border-radius: 6px;
		background-color: #0D2E8D;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.gang{
		width: 24px;
		height: 4px;
		background: #ffffff;
		border-radius: 4px 4px 4px 4px;
		margin: 2px auto;
	}
	.left-icon{
		width: 26px;
		height: 26px;
		border-radius: 4px;
		overflow: hidden;
		margin-right: 15px;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.hui-content{
		width: 90%;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 10px 15px;
		z-index: -999899;
		margin: 10px auto;
		border-radius: 8px;
		margin-top: 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;
		
	}
	.right-box{
		width: 85%;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ddis{
		display: flex;
		margin-top: 10px;
		
	}
	.hui-twotwo{
		width: 90%;
		background-color: #ffffff;
		box-sizing: border-box;
		padding: 10px 15px;
		z-index: -999899;
		margin: 10px auto;
		border-radius: 8px;
		margin-top: 0px;
		
		box-sizing: border-box;
		padding: 15px;
		
	}
	.content-box{
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		height: 222px;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		margin-bottom: 10px;
	}
	.hui-text{
		font-size: 16px;
		font-weight: 400;
		color: #666666;
	}
	.indexhei{
		color: #333333 !important;
		font-weight: bold !important;
	}
	.indexlan{
		background: #0D2E8D !important;
	}
	.x-baiz{
		font-size: 15px;
		font-weight: 400;
		color: #FFFFFF;
	}
		
	.hui-zi{
	
		font-size: 14px;
		font-weight: 400;
		color: #AAAAAA;
	}
	.paizi{
		width: 75px;
		height: 20px;
		margin-left: 15px;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
