<template>
	<view class="userManage" :style="{height: contentHeight,}">
		<view style="padding: 10px 0; background: #fff;">
			<u-tabs :list="list" :is-scroll="false" :current="current" name="Name" @change="change"
				:active-color="mainColor" bg-color="#FFF" height="80" bar-width="100"></u-tabs>
		</view>
		<view class="Um_Search" v-if="current==0">
			<u-search :show-action="false" @search="init(1)" style="background-color: #fff;" height="70" shape="round"
				placeholder="请输入昵称" v-model="msg.Name"></u-search>
		</view>
		<view class="Um_Search" v-if="current==1">
			<u-search :show-action="false" @search="getDistriData(1)" style="background-color: #fff;" height="70"
				shape="round" placeholder="请输入昵称" v-model="dsMsg.Name"></u-search>
		</view>

		<view style="height: calc(100vh - 50px); background: #fff;" v-if="dataList.length == 0">
			<u-empty text="暂无相关数据" mode="order"></u-empty>
		</view>
		<template v-if="current==0">
			<view v-if="dataList.length>0"
				style="height: calc(100vh - 50px);width: calc(100vw);overflow: hidden;padding: 25rpx;background-color: #F7F7F7;">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lowerTwo"
					:style="{ height: '100%' }">
					<view class="userList" v-for="(item,index) in dataList">
						<view class="user_Top">
							<view class="user_Header">
								<img style="width:100%;height:100%;" :src="item.Photo" alt="">
							</view>
							<view>
								<text class="userName">{{item.Name}}</text>
								<text class="userLevel">{{item.MemberGradeName}}</text>
							</view>
						</view>
						<view class="user_ScoreBwt">
							<view>
								<text class="user_ComBg">交易额</text>
								<text class="user_Number">￥0.00</text>
							</view>
							<view>
								<text class="user_ComBg">积分</text>
								<text class="user_Number">{{item.Integral}}</text>
							</view>
						</view>
						<view class="user_ScoreBwt">
							<view>
								<text class="user_ComBg">订单数</text>
								<text class="user_Number">{{item.OrderNum}}</text>
							</view>
							<view>
								<text class="user_ComBg">余额</text>
								<text class="user_Number">{{item.Balance}}</text>
							</view>
						</view>
						<view v-if="item.Remark" style="display: flex;margin-top:20rpx;">
							<view style="flex-shrink: 0;">备注：</view>
							<view>{{item.Remark}}</view>
						</view>
						<view style="display: flex;justify-content:flex-end;margin-top: 20rpx;">
							<u-button size="mini" class="ucustomStyle" shape="circle" @click="getItemInfo(item)">修改信息
							</u-button>
							<u-button size="mini" class="ucustomStyle" shape="circle" @click="kouchuBtn(item,2)">扣除
							</u-button>
							<u-button size="mini" shape="circle" @click="kouchuBtn(item,1)">充值</u-button>
						</view>
					</view>
					<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
						:margin-bottom="20" bg-color="#f3f4f6" />
				</scroll-view>
			</view>
		</template>
		<template v-if="current==1">
			<view v-if="dataList.length>0"
				style="height: calc(100vh - 50px);width: calc(100vw);overflow: hidden;padding: 25rpx;background-color: #F7F7F7;">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
					:style="{ height: '100%' }">
					<view class="userList" v-for="(item,index) in dataList">
						<view class="user_Top">
							<view class="user_DisHeader" style="flex-shrink: 0;">
								<img style="width:100%;height:100%;" :src="item.Photo" alt="">
							</view>
							<view>
								<view>
									<text class="userName">{{item.Name}}</text>
								</view>
								<view style="margin:12rpx 0;">
									<text class="user_ComBg" style="font-size:24rpx;">累计金额</text>
									<text class="user_Number" style="font-size:24rpx;">￥{{item.TotalCommission}}</text>
								</view>
								<view>
									<text class="user_ComBg" style="font-size:24rpx;">可体现金额</text>
									<text class="user_Number"
										style="font-size:24rpx;">￥{{item.CommissionWithdrawal}}</text>
								</view>
							</view>
						</view>
					</view>
					<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
						:margin-bottom="20" bg-color="#f3f4f6" />
				</scroll-view>
			</view>
		</template>
		<u-action-sheet :list="listTwo" v-model="showInfoModel"></u-action-sheet>
		<u-modal v-model="showRemarkBox" :show-cancel-button="true" title="修改备注" contentSlot @confirm="Save">
			<textarea style="height: 120px;" class="inputRemark" v-model="addMsg.Remark" />
		</u-modal>
		<!-- 扣除积分 -->
		<u-modal v-model="showKouchu" :show-title="false" :show-cancel-button="true" contentSlot @confirm="SaveScore">
			<!-- 扣除 -->
			<template v-if="ScoreMsg.Type==2">
				<u-tabs :list="listThree" :is-scroll="false" :current="currentScore" @change="changeScore"
					:active-color="mainColor" bg-color="#FFF" height="80" :show-bar="false"></u-tabs>
				<view style="margin-top:20rpx;">
					<input v-if="currentScore==0" class="uni-input userManInput" v-model="ScoreMsg.Integral"
						placeholder="请填写扣除积分" />
					<input v-if="currentScore==1" class="uni-input userManInput" v-model="ScoreMsg.Balance"
						placeholder="请填写扣除金额" />
					<input class="uni-input userManInput" v-model="ScoreMsg.Description" placeholder="请输入备注信息" />
				</view>
			</template>
			<!-- 充值 -->
			<template v-if="ScoreMsg.Type==1">
				<u-tabs :list="listFour" :is-scroll="false" :current="currentScore" @change="changeScore"
					:active-color="mainColor" bg-color="#FFF" height="80" :show-bar="false"></u-tabs>
				<view style="margin-top:20rpx;">
					<input v-if="currentScore==0" class="uni-input userManInput" v-model="ScoreMsg.Integral"
						placeholder="请填写充值积分" />
					<input v-if="currentScore==1" class="uni-input userManInput" v-model="ScoreMsg.Balance"
						placeholder="请填写充值金额" />
					<input class="uni-input userManInput" v-model="ScoreMsg.Description" placeholder="请输入备注信息" />
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				pageTitle: "用户管理",
				current: 0,
				contentHeight: 0,
				mainColor: "",
				page_count: 1,
				dataList: [],
				u: {},
				msg: {
					pageIndex: 1,
					pageSize: 15,
					Name: "",
					Source: 0,
					MemberGrade: 0,
					Id: "",
					Moblie: "",
					StartTime: "",
					EndTime: ""
				},
				//分销商msg
				dsMsg: {
					pageIndex: 1,
					pageSize: 15,
					UserId: '',
					AuditStatus: 0,
					GradeId: -1,
					Name: '',
					Source: 0,
					NickName: '',
					Mobile: ''
				},
				list: [{
					name: '全部用户'
				}, {
					name: '分销商'
				}, {
					name: '核销员'
				}],
				listTwo: [{
					text: '修改备注'
				}, {
					text: '修改会员等级'
				}],
				listThree: [{
					name: '扣积分'
				}, {
					name: '扣金额'
				}],
				listFour: [{
					name: '充积分'
				}, {
					name: '充金额'
				}],
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				showInfoModel: false,
				addMsg: {
					Id: '',
					SuperiorId: '',
					MemberGrade: '',
					ContactWay: '',
					Remark: '',
					AliasName: '',
					PostId: 0, //职位
				},
				showRemarkBox: false,
				showKouchu: false,
				currentScore: 0,
				ScoreMsg: {
					MallBaseId: 0,
					Type: 1,
					UserId: 0,
					Integral: '',
					Image: "",
					Description: "",
					Balance: ''
				},
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad: function(option) {
			//this.current = option.status || -1;	
			this.init();
		},
		methods: {
			change(index) {
				this.current = index;
				this.dataList = [];
				if (index == 0) {
					this.msg.pageIndex = 1;
					this.init();
				}
				//分销商
				if (index == 1) {
					this.getDistriData();
				}
			},
			init(type) {
				if (type == 1) {
					this.dataList = [];
				}
				uni.showLoading({
					title: '加载中'
				});
				this.requestAdmin(
					"/api/user/GetMemberUserPageList",
					this.msg,
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.dataList = this.dataList.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
						}
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
			//加载分销商
			lowerTwo(e) {
				if (this.dsMsg.pageIndex < this.page_count) {
					this.dsMsg.pageIndex++;
					this.status = "loading";
					this.getDistriData();
				} else {
					this.status = "nomore";
				}
			},
			//获取分销商
			getDistriData(type) {
				if (type == 1) {
					this.dataList = [];
				}
				uni.showLoading({
					title: '加载中'
				});
				this.requestAdmin(
					"/api/user/GetDistributorInfoPageList",
					this.dsMsg,
					(res) => {
						uni.hideLoading();
						if (res.resultCode == 1) {
							this.dataList = this.dataList.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
						}
					}
				);
			},
			//点击修改获取信息
			getItemInfo(obj) {
				this.addMsg.Id = obj.Id;
				this.addMsg.Remark = obj.Remark;
				this.showRemarkBox = true;
			},
			//保存修改信息
			Save() {
				this.requestAdmin("/api/user/SetMemberUserInfoForHT", this.addMsg, res => {
					if (res.resultCode == 1) {
						this.init(1);
						this.showRemarkBox = false;
					} else {
						uni.showToast({
							title: res.data.message
						});
					}
				})
			},
			//点击扣除按钮
			kouchuBtn(item, type) {
				this.currentScore = 0;
				this.ScoreMsg.Balance='';
				this.ScoreMsg.Integral='';
				this.ScoreMsg.Description='';
				this.ScoreMsg.Type = type;
				this.ScoreMsg.UserId = item.Id;
				this.ScoreMsg.MallBaseId = uni.getStorageSync('mall_UserInfo').MallBaseId
				this.showKouchu = true;
			},
			//change
			changeScore(index) {
				this.currentScore = index;
			},
			//保存积分扣除充值
			SaveScore() {
				let cmd=''
				if (this.currentScore == 0) {
					cmd = "/api/user/SetMemberIntegralInfo";
				} else {
					cmd = "/api/user/SetMemberBalanceInfo";
				}
				this.requestAdmin(cmd,this.ScoreMsg,(res) => {
						if (res.resultCode === 1) {
							this.init();
							this.showKouchu = false;
							uni.showToast({
								title: '保存成功',
								icon: 'none',
							})
						} else {
							uni.showToast({
								title: res.data.message
							});
						}
					},
					null
				);
			}
		}
	};
</script>
<style>
	.userManage {
		width: 100%;
		height: 100%;
		background: #f3f4f6;
	}

	.userManage .userList {
		width: 100%;
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 25rpx;
	}

	.user_Top {
		display: flex;
	}

	.orderList .listBox {
		background: #fff;
		border-radius: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
		width: 100%;
		margin-top: 30rpx;
	}

	.orderList .listBox .listBox_t {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		margin-bottom: 20px;
		color: #000;
	}

	.orderList .listBox .listBox_c {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.orderList .listBox .box_bottom {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-bottom: 20px;
	}

	.orderList .handle {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		margin-top: 10rpx;
	}

	.orderList .handle_item {
		padding: 0 24rpx;
		border: 1px solid #c8c9cc;
		margin-left: 20rpx;
		height: 50rpx;
		border-radius: 25rpx;
		line-height: 50rpx;
	}

	.listBox_c .goodboxmore {
		margin-bottom: 20px;
		display: flex;
		width: 100%;
		align-items: center;
	}

	.listBox_c .goodboxmore .good-list {
		display: flex;
		flex: 1;
		overflow-x: auto;
	}

	.listBox_c .goodboxmore .good-list .item {
		width: 70px;
		height: 70px;
		border-radius: 5px;
		margin-right: 10px;
	}

	.listBox_c .goodboxmore .infos {
		margin-left: 15px;
	}

	.listBox_c .goodboxmore .infos .text {
		text-align: center;
		font-size: 12px;
		margin-top: 5px;
	}

	.listBox_c .left {
		flex: 1;
		color: #232323;
		font-size: 16px;
		flex: 1;
		font-family: "oswald";
	}

	.listBox_c .small {
		font-size: 13px;
	}

	.listBox_c .topic_cont_text {
		font-size: 30rpx;
		max-height: 90rpx;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;
		/** 显示的行数 **/
	}

	.Um_Search {
		width: 100%;
		padding: 30rpx 40rpx;
		background-color: #EFEFF4;
	}

	.userManage .u-content {
		background-color: #fff !important;
	}

	.userName {
		font-size: 30rpx;
		color: #000;
	}

	.userLevel {
		font-size: 26rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.user_Header {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.user_Header img {
		border-radius: 10rpx;
	}

	.user_ScoreBwt {
		display: flex;
		margin-top: 20rpx;
	}

	.user_ComBg {
		background-color: #EFEFF4;
		color: #999999;
		margin-right: 20rpx;
		padding: 3rpx 8rpx;
	}

	.user_Number {
		color: #999999;
	}

	.user_ScoreBwt>view {
		width: 50%;
	}

	.ucustomStyle {
		margin-right: 20rpx;
	}

	.user_DisHeader {
		width: 130rpx;
		height: 130rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.inputRemark {
		border: 1px solid #d1d1d1;
		margin: 40rpx 0 40rpx 28rpx;
		padding:20rpx;
		width:500rpx;
	}

	.userManInput {
		height: 30px;
		border: 1px solid #F2F3F6;
		width: 90%;
		margin: auto;
		margin-bottom: 20rpx;
	}
</style>
