<template>
	<view class="user">
		<view class="search">
		 <!-- <view class="box">
			  <image src="/static/news/icon-search.png"></image>
			  <input type="search" placeholder="商品名称/编码" />
		  </view> -->
		  <u-search placeholder="输入用户昵称/姓名/手机号" @search="searchhandle" shape="round" :show-action="false" height="60" bg-color="#ffffff" v-model="keyword"></u-search>
		</view>
		<view class="user-bd">
			<view class="li" v-for="i in list" :key="i.user_id" @click="goVipDetails(i)">
				<view class="a">
					<view class="l">
						<image :src="i.avatar_url?i.avatar_url:$picUrl+'/static/news/avater.png'"></image>
					</view>
					<view class="r">
						<view class="m">
							<view class="n">{{i.nick_name}}</view>
							<view class="btn">{{i.user_type_text}}</view>
							
						</view>
						<view class="n">
							<view>
								<text>{{i.mobile}}</text>
								<image @click.stop="copyText(i.mobile)" :src="$picUrl+'/static/news/icon-copy.png'" style="margin-top:-4rpx;"></image>
							</view>
							<image :src="$picUrl+'/static/news/tel.png'" @click.stop="makeCall(i.mobile)"></image>
						</view>
					</view>
				<!-- 	<view class="m">
						<view class="n">{{nick_name}}</view>
						<view class="n">真实姓名：张三</view>
						<view class="n">{{mobile}}<image :src="$picUrl+'/static/news/icon-copy.png'"></image></view>
					</view>
					<view class="r">
						<view class="btn">会员</view>
						<image :src="$picUrl+'/static/news/tel.png'"></image>
					</view> -->
				</view>
				<view class="b">
					<view class="l">余额(元）<text>¥{{i.balance?i.balance:0.00}}</text></view>
					<view class="l">积分(分）<text>{{i.points?i.points:0}}</text></view>
				</view>
			</view>
		<!-- 	<view class="li" v-for="i in 2" :key="i">
				<view class="a">
					<view class="l">
						<image :src="$picUrl+'/static/news/avater.png'"></image>
					</view>
					<view class="m">
						<view class="n">昵称</view>
						<view class="n">真实姓名：张三</view>
						<view class="n">18089800909<image :src="$picUrl+'/static/news/avater.png'"></image></view>
					</view>
					<view class="r">
						<view class="btn btn-on">游客</view>
						<image :src="$picUrl+'/static/news/tel.png'"></image>
					</view>
				</view>
				<view class="b">
					<view class="l">余额(元）<text>¥0.00</text></view>
					<view class="l">积分(分）<text>0.00</text></view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import * as Vip from '@/api/user/vip'
	export default {
		data() {
			return {
				keyword:'',
				page:1,
				total:0,
				list:[],
				title:'会员管理'
			};
		},
		methods: {
			searchhandle(){
				this.list=[]
				this.page = 1;
				this.getList()
				
			},
			async getList(){
				let res = await Vip.getVipList({page:this.page,search:this.keyword,user_type:this.title=='会员管理'?"10,20":'30'})
				console.log(res,"===")
				this.list.push(...res.data.list.data);
				this.total = res.data.list.total;
			},
			copyText(text) {
			  uni.setClipboardData({
				data: text,
				success: () => {
				  uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 2000
				  });
				},
				fail: () => {
				  uni.showToast({
					title: '复制失败',
					icon: 'none'
				  });
				}
			  });
			},
			makeCall(phoneNumber) {
				uni.getSetting({
					 success(res) {
					   if (!res.authSetting['scope.phoneCall']) {
						 // 没有权限，需要请求用户授权
						 uni.authorize({
						   scope: 'scope.phoneCall',
						   success() {
							 // 用户已授权，可以拨打电话
							 uni.makePhoneCall({
							   phoneNumber: phoneNumber // 电话号码
							 });
						   },
						   fail() {
							 // 用户拒绝授权，可以引导用户开启
							 uni.showModal({
							   title: '提示',
							   content: '需要电话权限',
							   success: function(modalRes) {
								 if (modalRes.confirm) {
								   uni.openSetting();
								 }
							   }
							 });
						   }
						 });
					   } else {
						 // 已经有权限，直接拨打电话
						 uni.makePhoneCall({
						   phoneNumber: phoneNumber // 电话号码
						 });
					   }
					 }
				});
			},
			goVipDetails(item){
				let details = JSON.stringify(item)
				uni.navigateTo({
					url:"/pages/news/user/index?item="+details+"&title="+this.title
				})
			}
		},
		onLoad(option) {
			this.title = option.title
			uni.setNavigationBarTitle({
			  title: this.title
			});
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getList()
			}
		},
	}
</script>

<style lang="scss" scoped>
.user{
	padding: 0 0 130rpx;
	overflow: hidden;
	.search{
		width: 750rpx;
		padding: 34rpx 34rpx 0 34rpx;
		box-sizing: border-box;
		// .box{
		// 	padding: 15rpx 25rpx;
		// 	box-sizing: border-box;
		// 	display: flex;
		// 	align-items: center;
		// 	background: #F3F3F3;
		// 	border-radius: 60rpx;
		// 	image{
		// 		width: 28rpx;
		// 		height: 28rpx;
		// 		margin-right: 22rpx;
		// 	}
		// 	input{
		// 		flex: 1;
		// 		font-size: 28rpx;
		// 		line-height: 30rpx;
		// 	}
		// }
	}
	&-bd{
		padding: 0 34rpx;
		overflow: hidden;
		.li{
			padding:0  12rpx;
			background-color: #FFFFFF;
			overflow: hidden;
			border-radius: 8rpx;
			margin-top: 18rpx;
			// &:first-child{
			// 	margin-top: 0;
			// }
			.a{
				display: flex;
				// align-items: flex-start;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 0 30rpx;
				border-bottom: 1px solid #F2F2F2;
				.l{
					width: 114rpx;
					height: 114rpx;
					margin-right: 25rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.r{
					flex: 1;
					// width: 98rpx;
					// overflow: hidden;
					.m{
						// flex: 1;
						// max-width: 400rpx;
						// margin-right: 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.btn{
							// width: 98rpx;
							padding:0 10rpx;
							height: 56rpx;
							line-height: 56rpx;
							background: #FFFFFF;
							border-radius: 3px 3px 3px 3px;
							border: 1px solid #FFA928;
							text-align: center;
						
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #FFA928;
						
							&-on{
								border-color:#FFA928;
								color: #FFA928;
							}
						}
					}
					.n{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top:20rpx;
						text{
							font-size: 28rpx;
							color: #454545;
						}
						image{
							width: 30rpx;
							height: 30rpx;
							margin-left: 10rpx;
							vertical-align: middle;
						}
					}
					
					
					// image{
					// 	display: block;
					// 	width: 30rpx;
					// 	height: 30rpx;
					// 	float: right;
					// 	margin-top: 20rpx;
					// 	margin-right: 20rpx;
					// }
				}
				// .m{
				// 	flex: 1;
				// 	max-width: 400rpx;
				// 	margin-right: 20rpx;
				// 	.n{
				// 		font-size: 28rpx;
				// 		font-weight: 400;
				// 		color: #545454;
				// 		height: 50rpx;
				// 		image{
				// 			width: 30rpx;
				// 			height: 30rpx;
				// 			margin-left: 10rpx;
				// 			vertical-align: middle;
				// 			margin-top: -1px;
				// 		}
				// 	}
				// }
				
			}
			.b{
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				.l{
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #B1B1B1;
					text{
						font-size: 28rpx;
						font-weight: 400;
						color: #454545;
						display: block;
						margin-top: 12rpx;
					}
				}
			}
		}
	}
}
</style>
