<template>
	<view>
		<image src="../../static/beijing.png" class="background" mode=""></image>
		<view class="onetop">
			<ul>
				<li class="onetop-1" @click='receive'>
					<view class="onetop-2">
						<view class="onetop-3">
							<image :src="UserInfo.beijintupian" mode="" style="border: 0px;"></image>
						</view>
						<text>{{UserInfo.username}}</text>
						<text
							style="font-size: 12px;position:absolute;left:85px;top: 45px; color:#f2e2ac;">身份:{{UserGrade}}</text>
						<text style="font-size: 12px;position: absolute;right: 50px;">ID:<text
								style="color: red;font-size: 12px;">{{UserInfo.id}}</text> </text>
					</view>
					<view class="onetop-4">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>
			</ul>
		</view>
		<view class="twotop">
			<ul>
				<li class="twotopLi" @click="addcom" v-if="IsShow[6]==6">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1" style="width:30rpx;height:24rpx;">
							<image src="../../static/qiche.png" mode="" />
						</view>
						<text>添加专员</text>
					</view>
					<view class="iehicleInformation-2">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>
				<li class="twotopLi" @click="vehicle" v-if="IsShow[0]==0">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1" style="width:30rpx;height:24rpx;">
							<image src="../../static/qiche.png" mode="" />
						</view>
						<text>车辆信息</text>
					</view>
					<view class="iehicleInformation-2">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>
				<li class="twotopLi" @click='qrCode' v-if="IsShow[1]==1">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1">
							<image src="../../static/01.png" mode="" style="width: 32rpx;height:29rpx;"></image>
						</view>
						<text>专属二维码</text>
					</view>
					<view class="iehicleInformation-2">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>
				<li class="twotopLi" @click="wyPromotion" v-if="IsShow[2]==2">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1" style="width:34rpx;height:32rpx;">
							<image src="../../static/02.png" mode=""></image>
						</view>
						<text>提现金额</text>
					</view>
					<view class="iehicleInformation-2">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>
				<li class="twotopLi" @click="customer" v-if="IsShow[3]==3">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1" style="width: 32rpx;height:31rpx ;">
							<image src="../../static/03.png" mode=""></image>
						</view>
						<text>我的客户</text>
					</view>
					<view class="iehicleInformation-2">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>
				<li class="twotopLi" @click='commissioner' v-if="IsShow[4]==4">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1" style="width:29rpx;height:32rpx;">
							<image src="../../static/04.png"></image>
						</view>
						<text>我的专员</text>
					</view>
					<view class="iehicleInformation-2">
						<image :src="zhijiao"></image>
					</view>
				</li>

				<li class="twotopLi" @click='record' v-if="IsShow[5]==5">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1" style="width:26rpx;height:30rpx">
							<image src="../../static/06.png"></image>
						</view>
						<!-- {{recordnum}} -->
						<text>领取产品记录 </text>
					</view>
					<view class=" iehicleInformation-2">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>
				<li class="twotopLi" @click='Exsit' v-if="IsShow[10]==10">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1" style="width:26rpx;height:30rpx">
							<image src="../../static/06.png"></image>
						</view>
						<!-- {{recordnum}} -->
						<text>退出系统 </text>
					</view>
					<view class=" iehicleInformation-2">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>

				<li class="twotopLi" @click='particulars' v-if="false">
					<view class="iehicleInformation">
						<view class="iehicleInformation-1" style="width:26rpx;height:30rpx">
							<image src="../../static/06.png"></image>
						</view>
						<text>进入明细</text>
					</view>
					<view class=" iehicleInformation-2">
						<image :src="zhijiao" mode=""></image>
					</view>
				</li>
			</ul>
		</view>
		<!-- 套餐详情 -->
		<view class="packagedetails" v-if="IsShow[8]==8">
			<view class="packagedetails-0">
				现金补贴规则
			</view>
			<view class="packagedetails-1">
				<text>{{rulelist[0].texts==null?'暂无规则':rulelist[0].texts}}</text>
			</view>
		</view>
		<view class="numview" style="display: block;text-align: center;" v-if="IsShow[9]==9">
			<view style="color:red;font-size: 12px;">任务单量:<text style="color:red;">{{HaveNumber}}</text> 单</view>
			<view style="color:red;font-size: 12px;">现已完成:<text style="color:red;">{{HaveNumberNow}}</text> 单</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zhijiao: '../../static/zhijiao.png',
				UserGrade: '',
				// -----------------------------------------------------
				// 登录后的用户信息
				UserInfo: null,
				// 任务单量
				HaveNumber: 0,
				// 已完成单量
				HaveNumberNow: 0,
				userImg: '../../static/users.png',
				IsShow: [],
				// 规则model
				rulemodel: {
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 1,
					"Sort": [{
						"Field": "add_time",
						"Type": 1
					}]
				},
				rulelist: [],
				// 领取记录
				recordnum: 0,
				modelrecord: {
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 50,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				},
				numModel: {
					"KeyWord": "",
					"TotalCount": 0,
					"PageIndex": 1,
					"PageSize": 1,
					"Sort": [{
						"Field": "",
						"Type": 0
					}]
				}
				// WxInfo: {
				// 	"ParentUserId": 0,
				// 	"InviteeUserId": 0,
				// 	"beijintupian": "",
				// 	"birthday": "",
				// 	"ID_card": "",
				// 	"address": "",
				// 	"id": 0,
				// 	"username": "",
				// 	"password": "",
				// 	"author": "",
				// 	"status": "",
				// 	"type": 0,
				// 	"full_name": "",
				// 	"add_time": "2022-01-25T09:57:09.828Z",
				// 	"update_time": "2022-01-25T09:57:09.828Z",
				// 	"remark": "",
				// 	"avatar": "",
				// 	"phone": "",
				// 	"updphone": "",
				// 	"openid": "",
				// 	"sex": "",
				// 	"balance": 0
				// },
			}
		},
		onLoad() {
			this.ShowRule()
			// 获取用户信息
			// this.GetUserInfo()
			// 获取经理专员固定单量
			this.ShowNum()
		},
		onShow() {
			// 判断是否登录
			this.IsLogin()
			// 实时更新用户信息
			this.ShowUserInfoByID()
			// 获取经理专员固定单量
			this.ShowNum()
			// 实时获取已完成单量
			this.ShownNowNum()
			// 获取缓存数据进行展示用户数据
			this.GetUserInfoByStoreage()
			// 根据角色展示开放权限
			this.IsShowModel()
			// 查询领取记录数量
			this.ShowRecordNum()
		},
		methods: {
			// 获取用户头像
			// GetUserInfo() {
			// 	let jsonstorage = uni.getStorageSync('userinfo').data
			// 	let that = this
			// 	uni.getUserProfile({
			// 		desc: '获取头像',
			// 		success(res) {
			// 			console.log('获取信息', res)
			// 			let datainfo = JSON.parse(res.rawData)
			// 			console.log('daainfo', datainfo)
			// 			that.WxInfo.id = jsonstorage.id
			// 			that.WxInfo.beijintupian = datainfo.avatarUrl
			// 			that.WxInfo.username = datainfo.nickName
			// 			that.UpdInfo()
			// 		}
			// 	})
			// },
			// // 修改用户信息
			// UpdInfo() {
			// 	let jsonstorage = uni.getStorageSync('userinfo')
			// 	let that = this
			// 	this.API.UpdateWXUserInfo(that.WxInfo).then(res => {
			// 		console.log('res修改', res)
			// 		jsonstorage.data.username = res.data.data.username
			// 		jsonstorage.data.beijintupian = res.data.data.beijintupian
			// 		uni.setStorageSync('userinfo', jsonstorage)
			// 	})
			// },

			Exsit() {
				uni.removeStorageSync('token')
				uni.removeStorage({
					key: 'userinfo',
					success() {
						uni.redirectTo({
							url: '../login/login'
						})
					}
				})
			},

			// 判断是否授权登录
			IsLogin() {
				let jsonstorage = uni.getStorageSync('userinfo')
				if (jsonstorage == undefined || jsonstorage == '' || jsonstorage == null) {
					uni.redirectTo({
						url: '../login/login',
					})
				}
			},

			// 跳转至用户下级信息
			particulars() {
				uni.navigateTo({
					url: '../userDetail/userDetail'
				})
			},
			// 查询领取记录
			ShowRecordNum() {
				let jsonstorage = uni.getStorageSync('userinfo').data
				// 	// 查询领取记录
				this.modelrecord.KeyWord = jsonstorage.id
				this.API.GetRecordList(this.modelrecord).then(res => {
					console.log('数据', res)
					this.recordnum = res.data.data.total
				})
			},
			// 查询规则
			ShowRule() {
				this.API.GetListRichTextrule(this.rulemodel).then(res => {
					console.log('规则', res)
					this.rulelist = res.data.data.rows
				})
			},
			// 根据角色展示开放权限
			IsShowModel() {
				// 超级管理员0 管理员1 普通用户2 销售专员3 销售经理4
				let jsonstorage = uni.getStorageSync('userinfo').data
				if (jsonstorage.type == 2) {
					this.IsShow[10] = 10
					this.IsShow[0] = 0
				} else if (jsonstorage.type == 4) {
					this.IsShow[0] = 0
					this.IsShow[1] = 1
					this.IsShow[2] = 2
					this.IsShow[3] = 3
					this.IsShow[4] = 4
					this.IsShow[5] = 5
					this.IsShow[6] = 6
					this.IsShow[9] = 9
					this.IsShow[8] = 8
					this.IsShow[10] = 10
				} else if (jsonstorage.type == 3) {
					this.IsShow[0] = 0
					this.IsShow[1] = 1
					this.IsShow[2] = 2
					this.IsShow[3] = 3
					this.IsShow[9] = 9
					this.IsShow[8] = 8
					this.IsShow[10] = 10
				}
			},
			// 根据ID实时查询用户数据并存入缓存
			ShowUserInfoByID(){
				let jsonstorage=uni.getStorageSync('userinfo')
				this.API.GetUserById(jsonstorage.data.id).then(res=>{
					console.log('实时数据',res)
					if(res.data.code==200){
						jsonstorage.data=res.data.data
						uni.setStorageSync('userinfo',jsonstorage)
					}
				})
			},
			// 实时查询已完成单量
			ShownNowNum() {
				let jsonstorage = uni.getStorageSync('userinfo').data
				this.API.GetUserById(jsonstorage.id).then(res => {
					console.log('数据', res)
					if (res.data.code == 200) {
						this.HaveNumberNow = res.data.data.nowNum

					}
				})
			},
			//实时查询固定经理专员单量
			ShowNum() {
				let jsonstorage=uni.getStorageSync('userinfo').data
				this.API.GetModelNum(this.numModel).then(res=>{
					console.log('数据',res)
					if(res.data.code==200){
						if(jsonstorage.type==3){
							this.HaveNumber=res.data.data.rows[0].commissionerNum
						}else if(jsonstorage.type==4){
							this.HaveNumber=res.data.data.rows[0].managerNum
						}else{
							this.HaveNumber=0
						}
					}else{
						this.HaveNumber = 0
					}
				})
			},
			// 获取登录后的缓存信息
			GetUserInfoByStoreage() {
				let jsonstorage = uni.getStorageSync('userinfo')
				if (jsonstorage.code == 200) {
					this.UserInfo = jsonstorage.data
					if (this.UserInfo.type == 0) {
						this.UserGrade = '超级管理员'
					} else if (this.UserInfo.type == 1) {
						this.UserGrade = '管理员'
					} else if (this.UserInfo.type == 2) {
						this.UserGrade = '普通用户'
					} else if (this.UserInfo.type == 3) {
						this.UserGrade = '推广专员'
						// this.HaveNumber = this.UserInfo.commissionerNum
						this.HaveNumberNow = this.UserInfo.nowNum
					} else if (this.UserInfo.type == 4) {
						this.UserGrade = '客户经理'
						// this.HaveNumber = this.UserInfo.managerNum
						this.HaveNumberNow = this.UserInfo.nowNum
					} else {
						this.UserGrade = '暂无身份'
					}
				}
				console.log('缓存数据', jsonstorage)
			},
			// 推广二维码
			qrCode() {
				uni.navigateTo({
					url: '../zhiwen-share/zhiwen-share'
				});
			},
			// 添加专员
			addcom() {
				uni.navigateTo({
					url: '../addcommiss/addcommiss'
				})
			},
			receive() {
				uni.navigateTo({
					url: '../personalinfo/personalinfo'
				});
			},
			vehicle() {
				// 跳转至车辆管理页面
				uni.navigateTo({
					url: '../makeAnAppointment/makeAnAppointment'
				});
			},
			// 提现金额
			wyPromotion() {
				let jsonstorage = uni.getStorageSync('userinfo').data
				if (jsonstorage.status == 0) {
					uni.navigateTo({
						url: '../wyPromotion/wyPromotion?usermodel=' + decodeURIComponent(JSON.stringify(this
							.UserInfo))
					});
				} else {
					uni.showToast({
						title: '已被拉黑,无法提现',
						icon: 'none'
					})
				}
			},
			customer() {
				uni.navigateTo({
					url: '../customer/customer'
				});
			},
			commissioner() {
				uni.navigateTo({
					url: '../commissioner/commissioner'
				});
			},
			record() {
				uni.navigateTo({
					url: '../record/record'
				});
			},
		}
	}
</script>

<style>
	.numview>view {
		margin-top: 5px;
	}

	/* 背景图片 */
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		/* border-radius:50% 50% 0 0 ; */
		background-size: 100% 100%;
		z-index: -1;
	}

	/* 头像 */
	.onetop {
		padding-top: 20rpx;
		width: 100%;
		height: 120rpx;
		background-color: #343434;
	}

	.onetop-1 {
		width: 700rpx;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 40rpx;
	}

	.onetop-2 {
		display: flex;
		align-items: center;
	}

	.onetop-2 text {
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.onetop-3 {
		display: flex;
		justify-content: ;
		align-items: center;
		width: 100rpx;
		height: 100rpx;
		border: #FFFFFF 2rpx solid;
		border-radius: 50rpx;
		overflow: hidden;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.onetop-3 image {
		width: 100%;
		height: 100%;
	}

	.onetop-4 {
		width: 20rpx;
		height: 18rpx;
		margin-right: 20rpx;
		display: flex;
		/* justify-content: ; */
	}

	.onetop-4 image {
		width: 100%;
		height: 100%;
	}

	/* 车辆信息 */
	.twotopLi {
		/* background-color: #F8F8F8; */
		margin: 20rpx auto;
		width: 700rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #212121;
		/* background-color: #F0AD4E; */
		border-radius: 40rpx;
	}

	.iehicleInformation {
		/* background-color: #DD524D; */
		display: flex;
		justify-content: ;
		align-items: center;
	}

	.iehicleInformation-1 {
		/* background-color: #4CD964; */
		display: flex;
		justify-content: ;
		align-items: center;
		/* width:30rpx;
		height: 24rpx; */
		margin-left: 35rpx;
		margin-right: 35rpx;
	}

	.iehicleInformation-1 image {
		width: 100%;
		height: 100%;
	}

	.iehicleInformation text {
		color: #FFFFFF;
		font-size: 30rpx;
	}

	.iehicleInformation-2 {
		width: 20rpx;
		height: 20rpx;
		margin-right: 35rpx;
		display: flex;
		justify-content: ;
	}

	.iehicleInformation-2 image {
		width: 100%;
		height: 100%;
	}

	/* 套餐详情 */
	.packagedetails {
		width: 700rpx;
		height: 300rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		/* justify-content: space-around; */
		align-items: center;
		/* background-color: #007AFF; */

	}

	.packagedetails-0 {
		margin-top: 20rpx;
		color: #f4e8b1;
		text-align: center;
		font-size: 26rpx;
	}

	.packagedetails-1 {
		width: 90%;
		height: 200rpx;
		line-height: 35rpx;
		/* margin: -20rpx auto; */
		font-size: 22rpx;
		text-align: justify;
		color: #FFFFFF;
		/* background-color: #4CD964; */
	}
</style>
