<template>
	<view class="safe-page" style="padding-bottom: 230rpx!important;">
		<view class="bg-fff u-p-l-30 u-p-r-30 ">
			<view class="myTabs u-m-t-20">
				<my-tabs :list="pageData.tabsList" :textKey="'label'" @change="tabsChange"></my-tabs>
			</view>

		</view>
		<!-- 用户列表 -->
		<template v-if="true">
			<view class="input-wrapper u-p-l-30 u-p-r-30 u-p-b-30 bg-fff">
				<view class="input-main ">
					<uni-easyinput class='jeepay-search' :inputBorder="false" :placeholder="pageData.search.placeholder"
						v-model="pageData.query.key" @confirm="searchFunc">
						<template #prefixIcon>
							<image src="@/static/iconImg/icon-search.svg" class="input-icon" />
						</template>
					</uni-easyinput>
					<button type="text" @click="searchFunc()">搜索</button>
				</view>
			</view>
			
			<view class="u-p-30">
				<view class="data-statistics">
					<view class="u-font-32">数据统计</view>
					<view class="u-m-t-40  u-flex u-row-between">
						<view class=" ">
							<view>会员数</view>
							<view class="u-m-t-10 u-font-36 font-bold">{{pageData.allShopInfo.userTotal||0}}</view>
						</view>
						<view class="line-l-r u-p-l-30 u-p-r-30">
							<view>会员余额</view>
							<view class="u-m-t-10 u-font-36 font-bold">{{pageData.allShopInfo.balanceTotal||0}}</view>
						</view>
						<view class="">
							<view>充值金额</view>
							<view class="u-m-t-10 u-font-36 font-bold">{{pageData.allShopInfo.chageTotal||0}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="goods-list u-p-l-30 u-p-r-30">
				<view class="u-m-b-32" v-for="(item,index) in pageData.userList" :key="index">
					<my-user @moreOperate="moreOperateClick" :index="index" :data="item" :showDetail="pageData.showGoodsDetail"></my-user>
				</view>
			</view>
			<view class="fixed_b">
				<my-button showShadow @tap="toAddUser" shape="circle">新建用户</my-button>
			</view>
		</template>

		<my-action-sheet @itemClick="actionSheetClick" ref="moreOperate" :list="moreOperateList"></my-action-sheet>
		
	</view>
	<!-- 增减余额 -->
	<up-popup :show="datas.show" :round="18" mode="center" @close="close">
		<view class="zhezhaopop">
			<view class="">
				<span></span>
				<span>增减余额</span>
				<up-icon @tap="close" name="close-circle-fill"></up-icon>
			</view>
			<view style="display: flex;align-items: center;padding: 24rpx;">
				<image v-if="datas.activeUser?datas.activeUser.headImg:''" :src="datas.activeUser.headImg"
					style="width: 52rpx;height: 52rpx;;background-color: #eee;"></image>
				<view style="width: 52rpx;height: 52rpx;;background-color: #eee;" v-else>
				</view>
				<view style="margin-left: 12rpx;">
					<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
						{{datas.activeUser?datas.activeUser.nickName:''}}
					</view>
					<view style="font-weight: 400;font-size: 24rpx;color: #999999;">
						当前余额:{{datas.activeUser?datas.activeUser.amount:''}}
					</view>
				</view>
			</view>
			<view class="zhezhaopopthree">
				<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
					增减
				</view>
				<view class="u-m-t-16">
					<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'type')">
						<label class="radio u-m-r-60">
							<radio value="1" :checked="datas.form.type == '1'" class="scale7" />
							<text>增加</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="0" :checked="datas.form.type == '0'" class="scale7" />
							<text>扣除</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="zhezhaopopthree" v-if="datas.form.type == '1'">
				<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
					类型
				</view>
				<view class="u-m-t-16">
					<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'bizEnum')">
						<label class="radio u-m-r-60">
							<radio value="adminIn" :checked="datas.form.bizEnum == 'adminIn'" class="scale7" />
							<text>充值</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="adminRefund" :checked="datas.form.bizEnum == 'adminRefund'" class="scale7" />
							<text>消费退款</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="zhezhaopopthree" v-else>
				<view style="font-weight: 400;font-size: 28rpx;color: #333333;">
					类型
				</view>
				<view class="u-m-t-16">
					<radio-group class="u-flex u-flex-wrap" @change="sizeChange($event,'bizEnum')">
						<label class="radio u-m-r-60">
							<radio value="adminOut" :checked="datas.form.bizEnum == 'adminOut'" class="scale7" />
							<text>消费</text>
						</label>
						<label class="radio u-m-r-60">
							<radio value="adminInOut" :checked="datas.form.bizEnum == 'adminInOut'" class="scale7" />
							<text>充值退款</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="zhezhaopopfour">
				<view style="font-weight: 400;font-size: 28rpx;color: #333333;">

				</view>
				<view class="">
					<input type="digit" v-model="datas.form.money" @change="datas.form.money = $utils.isMoney(datas.form.money)" placeholder="请输入金额" />
					<view class="">
						元
					</view>
				</view>
			</view>
			<up-button text="确认" @tap="callTabletakeNumberEvent" type="primary" class="buttomStyle"
				shape="circle"></up-button>
		</view>
	</up-popup>
	<!-- 引入弹窗 -->
	    <GiveCouponPopup ref="giveCouponPopup" @success="refresh" />
</template>

<script setup>
	import { reactive, ref } from 'vue';
	import go from '@/commons/utils/go.js';
	import myUser from './components/user.vue'
	import GiveCouponPopup from './components/give-coupon.vue'
	const giveCouponPopup = ref(null)
	// 打开赠送弹窗
	function openGive(e) {
	  // 传入用户信息（和你 Web 端 open(data) 一样）
	  giveCouponPopup.value.open(e)
	}
	
	import { shopUserSummary, shopUserList,shopUserMoney } from '@/http/api/shopUser.js'
	
	import { onShow } from '@dcloudio/uni-app';

	import { onReachBottom } from '@dcloudio/uni-app';
	import { hasPermission } from '@/commons/utils/hasPermission.js';
	const moreOperate = ref(null)
	const moreOperateList = ['增减余额', '修改信息','赠送券' ]

	let datas = reactive({
		
		show: false,
		form: {
			type: '1',
			bizEnum: 'adminIn',
			money: ''
		},
		activeUser: null
	})
	
	const pageData = reactive({
		tabsList: [
			{label: '会员用户', value: 1},
			{label: '普通用户', value: 0},
		],
		search: {
			placeholder: '搜索昵称、手机号码'
		},
		query: {
			page: 1,
			size: 10,
			key: '',
			isVip: 1,
		},
		showGoodsDetail: false,
		userList: [],
		allShopInfo: {
			balanceTotal: 0,
			chageTotal: 0,
			userTotal: 0
		}
	})
	
	onShow(() => {
		getUser()
		getAllShopInfo()
	})
	
	onReachBottom(() => {
		++pageData.query.page
		getUser()
	});
	
	function refresh(){
		pageData.query.page=1
		getUser()
	}
	
	/**
	 * 获取用户数据统计
	 */
	async function getAllShopInfo() {
		const res = await shopUserSummary({isVip: pageData.query.isVip})
		pageData.allShopInfo = res
	}
	
	/**
	 * 获取用户列表
	 */
	async function getUser() {
		const res = await shopUserList(pageData.query)
		if ( res ) {
			if (res.pageNumber <= 1) {
				pageData.userList = res.records
			} else {
				pageData.userList.push(...res.records)
				
			}
		}
	
	}
	
	/**
	 * tabs切换
	 * @param {Object} i
	 */
	function tabsChange(i) {
		pageData.userList = [];
		pageData.query.page = 1;
		pageData.query.isVip = pageData.tabsList[i].value;
		getUser()
		getAllShopInfo()
	}
	/**
	 * 搜索
	 */
	function searchFunc() {
		pageData.query.page = 1;
		getUser()
		getAllShopInfo()
	}
	
	/**
	 * 新建用户
	 */
	function toAddUser() {
		go.to('PAGES_USER_ADD')
	}
	
	/**
	 * 增减余额监听
	 * @param {Object} e
	 * @param {Object} name
	 */
	function sizeChange(e, name) {
		datas.form[name] = e.detail.value
		if (name == 'type') {
			if (datas.form.type == '1') {
				datas.form.bizEnum = 'adminIn'
			} else {
				datas.form.bizEnum = 'adminOut'
			}
		}
	}
	
	/**
	 * 更多操作
	 * @param {Object} d
	 */
	function moreOperateClick(d) {
		datas.activeUser = pageData.userList[d]
		moreOperate.value.open()
	}
	
	/**
	 * 判断是否可以修改余额、修改信息
	 * @param {Object} i
	 */
	function actionSheetClick(i) {
		if (i == 0) {
			hasPermission('允许修改会员余额').then(ele => {
				if (ele) {
					datas.show = true
				}
			})
		} else if (i == 1) {
			hasPermission('允许管理会员信息').then(ele => {
				if (ele) {
					go.to('PAGES_USER_ADD', datas.activeUser)
				}
			})
		}
		else if (i == 2) {
			openGive(datas.activeUser)
		}
	}
	
	/**
	 * 修改余额关闭
	 */
	let close = () => {
		datas.show = false;
		datas.form = {
			type: '1',
			bizEnum: 'adminIn',
			money: ''
		}
	}
	
	/**
	 * 修改余额确定
	 */
	let callTabletakeNumberEvent = async () => {
		if( datas.form.money == ''){
			uni.showToast({
				title: '请输入增减金额',
				icon: 'none'
			})
			return;
		}
		let res = await shopUserMoney({
			id: datas.activeUser.id,
			...datas.form
		})
		close()
		getUser()
		getAllShopInfo()
	}

	
</script>
<style scoped>
	page {
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.after-r,
	.after-l {
		position: relative;
	}

	.line-l-r {
		position: relative;

		&::after,
		&:before {
			position: absolute;
			content: '';
			top: 0;
			bottom: 0;
			width: 2px;
			border-radius: 2px;
			background-color: rgba(255, 255, 255, .3);
		}

		&::after {
			right: 0;
		}

		&::before {
			left: 0;
		}
	}

	.after-r::after {
		position: absolute;
		content: '';
		right: -40rpx;
		top: 0;
		bottom: 0;
		width: 2px;
		border-radius: 2px;
		background-color: rgba(255, 255, 255, .3);
	}

	.data-statistics {
		background-color: $my-main-color;
		padding: 30rpx 30rpx 60rpx 40rpx;
		color: #fff;
		border-radius: 16rpx;
	}

	.user-statistics {
		padding: 30rpx 0 60rpx 0;

		.after-r::after {
			right: 0;
		}

		.u-flex-1 {}
	}

	.stock-btns {
		padding: 0 100rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.safe-page {
		background: #F9F9F9;
	}

	.icon-guige {
		width: 42rpx;
		height: 42rpx;
	}

	.bg-fff {
		background-color: #fff;
	}

	.myTabs {
		margin: 0 auto;
		height: 64rpx;
	}

	.input-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 26rpx;
		background-color: $J-bg-ff;

		.input-main {
			flex: 1;
			display: flex;
			align-items: center;
			height: 64rpx;

			image {
				padding: 22rpx;
				width: 26rpx;
				height: 26rpx;
			}

			input {
				flex: 1;
				font-size: 27rpx;
			}

			::v-deep uni-button {
				font-size: 28rpx;
				color: $my-main-color;
				background: rgba(255, 255, 255, 1);
			}

			::v-deep.uni-easyinput {
				.uni-easyinput__content {
					background-color: $J-bg-f5 !important;
					border-radius: $J-b-r12;

					.uni-easyinput__content-input {
						padding-left: 0 !important;

						.uni-input-input {
							border-radius: $J-b-r12 !important;
							overflow: hidden !important;
						}
					}

					.uni-input-placeholder {
						font-size: 27rpx;
					}

					.uni-icons {
						color: rgba(230, 230, 230, 1) !important;
					}
				}
			}
		}
	}

	.zhezhaopop {
		padding: 34rpx 32rpx;
		width: 594rpx;
		background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;

		>view:first-child {

			display: flex;
			align-items: center;
			justify-content: space-between;

			>span:nth-child(2) {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}

		>view:nth-child(2) {
			margin: 48rpx auto;
			width: 492rpx;
			height: 124rpx;
			background: #FAFAFA;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}

		.zhezhaopopthree {
			>view:nth-child(2) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 24rpx;

				>view {
					width: 186rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #E5E5E5;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}

				.selectvalue {
					color: #318AFE;
					border: 2rpx solid #318AFE;
				}
			}
		}

		.zhezhaopopfour {
			margin-top: 32rpx;
			margin-bottom: 48rpx;

			>view:nth-child(2) {
				margin-top: 24rpx;
				display: flex;
				align-items: center;

				>input {
					width: 372rpx;
					height: 84rpx;
					background: #FFFFFF;
					border-radius: 8rpx 0rpx 0rpx 8rpx;
					border: 2rpx solid #E5E5E5;
					padding-left: 24rpx;
				}

				>view {
					width: 124rpx;
					height: 86rpx;
					line-height: 84rpx;
					text-align: center;
					background: #F7F7FA;
					border-radius: 0rpx 8rpx 8rpx 0rpx;
					border: 2rpx solid #E5E5E5;
					color: #999999;
				}
			}
		}

		.buttomStyle {
			margin-top: 48rpx;
			width: 506rpx;
			height: 80rpx;
			/*#ifdef MP*/
			padding-top: 48rpx;
			/*#endif*/
		}
	}

	.input-icon {
		position: relative;
		z-index: 10;
	}

	.search-button {
		position: absolute;
		right: 0;
		background-color: transparent !important;
		color: transparent !important;
	}

	.states1 {
		margin-top: 78rpx;

		.item {
			font-size: 24rpx;
			color: #666;
			margin-right: 70rpx;
			background: #F4F4F4;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.item.active {
			background: #E6F0FF;
			color: $my-main-color;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}

	.fixed_b {
		left: 90rpx;
		right: 90rpx;
		position: fixed;
		bottom: calc(70rpx + env(safe-area-inset-bottom));
	}
</style>