<template>
	<view style="padding-bottom: 30rpx;">
		<view class="search-box ddflex">
			<view class="search-input ddflex fflex">
				<image class="search-input-icon" src="../../static/pages/images/search.png"></image>
				<input class="fflex" v-model="searchValue" confirm-type="search" @confirm="searchFn"  placeholder="请输入用户昵称或姓名"/>
				<view class="search-btn" @click="searchFn">搜索</view>
			</view>
		</view>
		<view style="height: 135rpx;"></view>
		<view>
			<view class="user-item ddflex" v-for="item,index in groupList">
				<view class="ddflex">
					<image class="user-header" :src="item.avatar?item.avatar:'../../static/images/userimg.png'"></image>
					<view class="fflex">
						<view class="user-nickName">{{item.nickName}}</view>
						<view class="user-phone">{{item.realName?item.realName:''}}<text v-if="item.mobile">({{item.mobile}})</text></view>
					</view>
				</view>
				<view class="option-btn" v-if="item.status==1" @click="jinyong(2,item,index)">禁用</view>
				<view class="option-btn" v-else-if="item.status==2" @click="jinyong(1,item,index)">已禁用</view>
				<view class="option-btn" v-else-if="item.status==3">黑名单</view>
			</view>
		</view>

	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				
				groupList: [],
				page: 1,
				limit: 10,
				searchValue:'',
				isQuerying:false,//正在查询数据
			}
		},
		onLoad(options) {
			this.getDataList()
		},
		onShow() {
			
		},
		onReachBottom() {
			this.getDataList(true)
		},
		methods: {
			getDataList(isPage) {
				if(this.isQuerying) return
				else this.isQuerying = true
				if (!isPage) {
					this.page = 1
				}
				let queryParams = {
					page: this.page,
					limit: this.limit,
				}
				if(this.searchValue){
					queryParams.name=this.searchValue
				}
				req.getRequest(
					'/admin/v2/user/page',
					queryParams,
					data => {
						if (data != null && data.list.length > 0) {
							if (!isPage) {
								this.groupList = data.list
							} else {
								this.groupList = this.groupList.concat(data.list)
							}
							this.page++
						} else {
							if (!isPage)
								this.groupList = data.list
							else {}
						}
						uni.hideLoading()
						this.isQuerying = false
					}
				)
			},
			jinyong(type,item,index){
				uni.showModal({
					title:'提示',
					content:type==1?'确定解除该用户禁用？':'确定禁用该用户？',
					success: (res) => {
						if(res.confirm){
							let dataP = {
								id:item.id,
								type:type
							}
							req.getRequest('/admin/v2/user/disable',dataP,res=>{
								if(type==1){
									this.groupList[index].status=1
									req.msg('已解除禁用')
								}else{
									this.groupList[index].status=2
									req.msg('已禁用')
								}
							})
						}
					}
				})
			},
			searchFn(){
				this.getDataList()
			},
		},
		mounted() {
			
		},
		onPageScroll: function(e) {
		}
	}
</script>

<style>
	@import "./myUser.css";
</style>