<template>
	<view class="user">
		<view class="order-navbar">
			<u-navbar :title="title" :border-bottom="false" :background="background"></u-navbar>
		</view>
		<view class="user-hd">
			<view class="avater">
				<image :src="form.avatar_url?form.avatar_url:`${$picUrl}/static/news/avater.png`"></image>
			</view>
			<view class="info">
				<!-- p会员 无p游客 -->
				<view class="name">{{form.nick_name}}<text class="p">{{form.user_type_text}}</text></view>
				<!-- <view class="desc">真实姓名：张三</view> -->
				<view class="desc">{{form.mobile}}</view>
			</view>
		</view>
		<view class="user-show">
			<view class="a">
				<text>余额(元）</text>¥{{form.balance?form.balance:0.00}}
			</view>
			<view class="a">
				<text>积分(分）</text>{{form.points?form.points:0.00}}
			</view>
		</view>
		<view class="user-order" @click="goJump()">
			<view class="a">关联订单</view>
			<view class="b">
				<view class="num" v-show="form.order_num>0">{{form.order_num}}</view>
				<u-icon	name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="user-do">
			<view class="a">用户信息</view>
			<view class="b">编辑信息</view>
		</view>
		<view class="user-bd">
		<!-- 	<view class="item">
				<view class="a">登录密码</view>
				<view class="b"><view class="select select-on">****</view></view>
			</view> -->
			<view class="item">
				<view class="a">上级推广人</view>
				<view class="b">
					<view class="select select-on">{{form.inviter?form.inviter.nick_name:''}}</view>
					<!-- <u-icon style="margin-left: 10rpx;"	name="arrow-right"></u-icon> -->
				</view>
			</view>
			<!-- <view class="item">
				<view class="a">用户分组</view>
				<view class="b">
					<view class="select">请选择用户分组</view>
					<u-icon style="margin-left: 10rpx;"	name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="a">用户标签</view>
				<view class="b">
					<view class="select">请选择用户分组</view>
					<u-icon style="margin-left: 10rpx;"	name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="items">
				<view class="a">推广资格
					<u-switch v-model="checked" active-color="#55BD6A" ></u-switch></view>
				<view class="b">
					指定分销模式下，开启或关闭用户的推广权限
				</view>
			</view> -->
			<view class="items">
				<view class="a">用户状态
					<u-switch v-model="form.is_allow_promotion"
					:activeValue="1" :inactiveValue="0"
					 active-color="#55BD6A" ></u-switch>
				</view>
				<view class="b">
					指定分销模式下，开启或关闭用户的推广权限
				</view>
			</view>
			<view class="item">
				<view class="a">会员状态</view>
				<view class="b">
					<u-switch v-model="form.status"
					:activeValue="1" :inactiveValue="0"
					 active-color="#55BD6A" ></u-switch>
				</view>
			</view>
		</view>
		<view class="user-fd" @click="updateVipHandle">
			<view class="b">
				确认修改
			</view>
		</view>
	</view>
</template>

<script>
	import * as Vip from '@/api/user/vip'
	import * as newFunApi from '@/api/newFun'
	// import img from "@/static/news/login-bg.png"
	export default {
		data() {
			return {
				form:{
					address_id: null,
					avatar: null,
					avatar_id: null,
					avatar_url: null,
					balance: "",
					city: null,
					country: null,
					create_time: "",
					effective_time: null,
					expend_money: "",
					gender: "",
					grade: null,
					grade_id: null,
					inviter:null,
					is_allow_promotion:null,
					is_delete: null,
					last_login_time: null,
					mobile: "",
					nick_name: "",
					order_num:'',
					pay_money: "",
					platform: "",
					points: null,
					province: null,
					status:null,
					store_id: null,
					update_time: "",
					user_id: null,
					user_type: null,
					user_type_text: ""
				},
				checked: true,
				isScroll: true,
				background: {
					background: 'url(https://www.royaum.com.cn/static/news/login-bg.png) centertop no-repeat',
					// background: 'url('+	img+') center top no-repeat',
					backgroundSize: '100% auto',
				},
				title:'会员管理',
				total:0
				
			}
		},
		onPageScroll(e){
			if(e.scrollTop <= 44){
				this.isScroll = true;
			}else{
				this.isScroll = false;
			}
		},
		methods: {
			goJump(){
				if(this.title=='会员管理'){
					uni.navigateTo({
						url:"/pages/news3/shopOrder?user_id="+this.form.user_id+'&dataType='+'all'
					})
				}else{
					uni.navigateTo({
						url:"/pages/news3/shopDealerOrder?user_id="+this.form.user_id
					})
				}
			},
			async updateVipHandle(){
				let params={
					"user_id":this.form.user_id,
					"status":this.form.status?1:0,
					"is_allow_promotion":this.form.is_allow_promotion?1:0,
				}
				let res = await Vip.updateVip(params)
				
				if(res.status==200){
					uni.showToast({
						title: '修改成功'
					});
				}
				
			},
		},
		async onLoad(option) {
			console.log(JSON.parse(option.item))
			this.form = Object.assign({},this.form,JSON.parse(option.item))
			this.form.is_allow_promotion = this.form.is_allow_promotion==1?true:false
			this.form.status = this.form.status==1?true:false;
			this.title = option.title;
			
		}
	}
</script>

<style lang="scss" scoped>
.user{
	width: 100%;
	padding: 0 0 150rpx;
	box-sizing: border-box;
	overflow: hidden;
	background: url(https://www.royaum.com.cn/static/news/login-bg.png) center top no-repeat;
	
	background-size: 100% auto;
	min-height: 100vh;
	&-hd{
		padding: 60rpx 40rpx 30rpx;
		display: flex;
		align-items: flex-start;
		.avater{
			width: 114rpx;
			height: 114rpx;
			margin-right: 30rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.info{
			flex: 1;
			overflow: hidden;
			font-size: 28rpx;
			font-weight: 400;
			color: #5E5E5E;
			line-height: 55rpx;
			.name{
				font-size: 32rpx;
				font-weight: 500;
				color: #2A2A2A;
				display: flex;
				align-items: center;
				text{
					display: block;
					// width: 98rpx;
					border: 1px solid #FFB950;
					// height: 40rpx;
					padding:0 10rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFB343;
					line-height: 40rpx;
					border-radius: 40rpx;
					text-align: center;
					margin-left: 20rpx;
					background-color: #fff;
					&.p{
						color: #F34A40;
						border-color: #F34A40;
					}
				}
			}
		}
	}
	&-show{
		width: 704rpx;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		padding: 35rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.a{
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			font-weight: 400;
			color: #383838;
			text-align: center;
			&:first-child{
				border-right: 1px solid #F3F3F3;
			}
			text{
				display: block;
				font-size: 28rpx;
				font-weight: 400;
				color: #B2B2B2;
				margin-bottom: 20rpx;
				
			}
		}
	}
	&-order{
		width: 704rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		padding: 25rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 16rpx;
		.a{
		}
		.b{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #9E9E9E;
			.num{
				width: 44rpx;
				height: 44rpx;
				background: #FF6257;
				border-radius:44rpx;
				line-height: 44rpx;
				color: #fff;
				text-align: center;
				font-size: 20rpx;
				margin-right: 10rpx;
			}
		}
	}
	&-do{
		width: 704rpx;
		margin: 0 auto;
		padding: 35rpx 25rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.a{
			font-size: 28rpx;
			font-weight: 400;
			color: #A3A3A3;
		}
		.b{
			font-size: 28rpx;
			font-weight: 400;
			color: #307BF6;
		}
	}
	&-bd{
		width: 704rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto;
		padding: 0 20rpx;
		box-sizing: border-box;
		.item{
			padding: 25rpx 0;
			border-top: 1px solid rgba(242,242,242,0.83);
			display: flex;
			align-items: center;
			justify-content: space-between;
			&:first-child{
				border-top-color: #fff;
			}
			.a{
				font-size: 28rpx;
				font-weight: 400;
				color: #454545;
			}
			.b{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #9d9d9d;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.select{
					&-on{
						color:#454545;
					}
					color: #9d9d9d;
				}
			}
		}
		.items{
			padding: 25rpx 0;
			border-top: 1px solid rgba(242,242,242,0.83);
			&:first-child{
				border-top-color: #fff;
			}
			.a{
				font-size: 28rpx;
				font-weight: 400;
				color: #454545;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.b{
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #9d9d9d;
				text-align: left;
				padding-top: 10rpx;
			}
		}
	}
	&-fd{
		width: 100%;
		background-color: #fafafa;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 200;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.b{
			// width: 630rpx;
			width:100%;
			line-height: 83rpx;
			// background: #FFAAA4;
			background: #FF6257;
			border-radius: 83rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
}
</style>
