<template>
	<view style="background: #F5F7FA;">
		
		<view class="search-user flex-y-center ">
			<view class="search-content flex-y-center">
				<icon type="search" size="18" />
				<input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch" class="flex-grow-1"
					type="text" placeholder-style="font-size:26rpx" placeholder="请输入用户关键词" />
				<view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
					<icon type="clear" size="18" />
				</view>
			</view>
			<view class="search-btn" @click="search">
				搜索
			</view>
		</view>

		<view class="box-pack-between headerScreen flex-y-center ">
			<view class="flex-y-center flex-grow-1 ft26 header-text">
				<view class="flex-grow-1 flex-center" data-text="1" :class="act_index==1?'act':''"
					@click="onTopBtnTap(1)">
					{{type_text}}
					<view class="d3"></view>
				</view>
				<view class="flex-grow-1 flex-center" data-text="2" :class="act_index==2?'act':''"
					@click="onTopBtnTap(2)">
					{{level_text}}
					<view class="d3"></view>
				</view>
			</view>
		</view>

		<view class="header-hg200"></view>

		<uni-popup-top ref="popup" type="top" :top="top" :maskClass="maskClass">
			<view class="showpay">
				
				<block v-if='act_index==1'>
					
					<view class="box-li" :class="state==''?'active':''" @click="pay(0,'全部')" data-type=''
						data-text='全部'>全部
					</view>
					<view class="box-li" :class="state==1?'active':''" @click="pay(1,'微信')" data-type='1'
						data-text='微信'>微信
					</view>
					<view class="box-li" :class="state==2?'active':''" @click="pay(2,'支付宝')" data-type='2'
						data-text='支付宝'>支付宝
					</view>
				</block>

				<block v-if='act_index==2'>

					<view class="box-li" :class="state==''?'active':''" @click="Onlevel(0,'等级')" data-text='全部'>全部
					</view>

					<view class="box-li" :class="state==''?'active':''" @click="Onlevel(55,'普通会员')">普通会员
					</view>

					<view class="box-li" v-for="(item,index) of level_list" :key='index'
						:class="item.level==level_index?'active':''" @click="Onlevel(item.level,item.name)">
						{{item.name}}
					</view>


				</block>

			</view>
		</uni-popup-top>

		<no-none v-if='list.length<=0'></no-none>

		<block v-else>
			<view class="list" v-for="(item,index) of list" :key='index' @click="enit(index)">
				<view class="item">
					<view class="box-pack-between item-top flex-y-center">
						
						<view class="title-left flex-y-center flex-grow-1">
							<image :src="item.type==2?'../static/images/ali.png':'../static/images/wx.png'"></image>
							{{item.nickname?item.nickname:item.level_name}} {{item.mobile?'-':''}} {{item.mobile||''}}
						</view>
		
						<view class="del" @click.stop="del(item.id,index)">删除</view>
					</view>
					
					<view class="flex-y-center box-pack-between item-bottom">
						<view class="flex-grow-1 flex-y-center">
							<view class="pay_type">
								<view class="box-pack-between ">
									<view class="pay_type_num">
										<text>级别： </text>
										<text style="color: #FFBB33;">{{item.level_name}}</text>
									</view>
									<view style="color: #FFBB33;padding-right: 20rpx;">
										￥{{item.balance}}
									</view>
								</view>

								<view class="box-pack-between">
									<view class="time">积分：{{item.integral}} </view>
									<view class="flex-y-center ft22">
									</view>
								</view>

								<view class="box-pack-between">
									<view class="time">加入时间：{{item.create_time}} </view>
									<view class="flex-y-center ft22">
										<!-- <text class="iconfont icongengduo ft22"></text> -->
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>
<script>
	import uniPopupTop from '@/components/zx-uni-popup/uni-popup-top.vue'
	export default {
		components: {
			uniPopupTop
		},
		data() {
			return {
				list: [],
				level_list: [],
				page: 1,
				$test: this.$test.$test,
				floorstatus: false,
				act_index: 1,
				keywords: "",
				type: 0,
				type_text: '平台',
				level_text: '等级',
				level_type: 0,
				seTval: '',
				top: "200rpx",
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': "100rpx",
					'left': 0,
					'right': 0,
					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
				},
			}
		},

		onLoad(e) {

		},

		onShow(e) {
			this.page = 1;
			this.list = [];
			this.http();
			this.level_index();
		},

		onReachBottom(e) {
			this.http();
		},

		methods: {
			enit(index) {
				let {
					mobile,
					user_level,
					id
				} = this.list[index];
				uni.navigateTo({
					url: `./user-enit?mobile=${mobile}&level_name=${user_level}&id=${id}`
				})
			},
			// 下单方式
			pay(e, text) {
				this.type = e;
				this.type_text = text;
				this.page = 1;
				this.list = [];
				this.http();
				this.$refs.popup.close();
			},

			Onlevel(e, text) {
				this.level_type = e;
				this.level_text = text;
				this.page = 1;
				this.list = [];
				this.http();
				this.$refs.popup.close();
			},

			getSearch(e) {
				if (!e.detail.value) {
					this.page = 1;
					this.list = [];
					this.keywords = "";
					this.http();
				}
				this.keywords = e.detail.value;
			},

			onDel() {
				this.seTval = '';
				this.page = 1;
				this.list = [];
				this.keywords = "";
				this.http();
			},

			confirm(e) {
				this.page = 1;
				this.list = [];
				this.keywords = e.detail.value;
				this.http();
			},

			search(e) {
				this.page = 1;
				this.list = [];
				this.http();
			},

			onTopBtnTap(e) {
				this.act_index = e;
				this.$refs.popup.open();
			},

			del(id, index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.request({
								url: 'Smdcshop/user_delete',
								data: {
									id: id,
								},
							}).then(res => {
								console.log(res, "res")
								if (res.code === 200 || res.code === "200") {
									uni.showToast({
										title: "删除成功",
										icon: "none",
									})
									this.list.splice(index, 1);
								}
							}).catch((res) => {
								uni.showToast({
									title: res.message,
									icon: "none",
								})
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},

			http() {
				this.request({
					url: "Smdcshop/user_list",
					data: {
						admin_id: uni.getStorageSync("admin_id"),
						page: this.page,
						limit: 15,
						serch: this.keywords,
						level_name: this.level_type,
						type: this.type,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.list = this.list.concat(res.data);
						this.page = this.page + 1;
					}
				});
			},

			level_index() {
				this.request({
					url: "Smdcshop/level_index",
					data: {
						admin_id: uni.getStorageSync("admin_id"),
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.level_list = res.data
					}
				});
			},

		}
	}
</script>

<style>
	@import url("/static/css/public.css") 
	page {
		background: rgb(245, 247, 250);
	}

	.headerScreen {
		height: 100rpx;
		position: fixed;
		top: 100rpx;
		width: 100%;
		z-index: 999;
		background: #fff;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.header-hg200 {
		height: 210rpx;
	}

	.header-text {
		text-align: center;
	}

	.d3 {
		width: 0;
		height: 0;
		border-width: 12rpx;
		border-style: solid;
		border-color: #000 transparent transparent transparent;
		margin-top: 14rpx;
		margin-left: 6rpx;
	}

	.showpay {
		width: 100%;
		z-index: 10;
		background: #FFFFFF;
	}

	.search-user {
		z-index: 999;
		position: fixed;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		margin-left: 15rpx;
	}

	.search-user .search-content {
		width: 83%;
		height: 70rpx;
		background: #F1F1F1;
		border-radius: 100rpx;
		padding: 0 20rpx;

	}

	.search-user .search-content icon {
		margin-right: 10rpx;
	}

	.search-user .search-btn {
		margin-left: 20rpx;
		font-size: 28rpx;
	}
	
	.box-li {
		background-color: #fff;
		text-align: center;
		border-bottom: 1rpx solid #f1f1f1;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
	}

	.list {
		width: 670rpx;
		border-radius: 10rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 auto;
		margin-bottom: 40rpx;
	}

	.item {
		padding: 0rpx 0rpx 0rpx 24rpx;

	}

	.item-top {
		/* height: 80rpx; */
		border-bottom: 1rpx solid #F1F1F1;
		padding: 20rpx 0;
	}

	.item-bottom {
		padding: 25rpx 0;
	}

	.food {
		width: 100%;
		height: 70rpx;
		opacity: 1;
		border-radius: 0px 0px 10rpx 10rpx;
		padding: 0 30rpx;
	}

	.title-left {
		font-size: 30rpx;
		font-weight: 500;
		color: #000000;
		flex: 1;
	}

	.title-left image {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
		border-radius: 100px;
		min-width: 50rpx;
	}

	.title-right {
		font-size: 28rpx;
		color: #3387FF;
	}

	.title-orderNO {
		border-bottom: 1rpx solid #F1F1F1;
		padding-bottom: 29rpx;
	}

	.wxtype {
		width: 36rpx;
		height: 36rpx;
	}

	.pay_type {
		font-size: 28rpx;
		font-weight: 400;
		color: #909090;
		width: 100%;
	}

	.pay_type_num {
		margin-bottom: 10rpx;
	}

	.price {
		font-size: 32rpx;
		font-weight: 500;

	}

	.round {
		width: 12rpx;
		height: 12rpx;

		border-radius: 50%;
		margin: 0 10rpx 29rpx 0;
	}

	.pdr-24rpx {
		padding: 0 24rpx;
		/* padding-left: 10rpx; */
	}

	.time {
		padding-top: 10rpx;
	}

	.del {
		height: 44rpx;
		line-height: 44rpx;
		padding: 0 20rpx;
		font-size: 24rpx;
		background-color: #FF5722;
		margin-right: 40rpx;
		color: #fff;
		border-radius: 4rpx;
	}
</style>
