<template>
	<view class="">
		<view class="topt">
			<view class="search_con">
				<view class="search_inp">
					<view class="flex">
						<image src="../../static/img/sear.png" mode="widthFix" style="width: 40rpx;margin-right: 10rpx;"></image>
						<input type="text" v-model="param.search_name" placeholder="输入昵称、姓名、手机号" style="width: 370rpx;" />
					</view>
					<view class="search" @click="getEnroll">查询</view>
				</view>
			</view>
		</view>
		<view v-if="show">
			<view  class="bottomOut" >
				<!-- v-for="(item,index) in itemList" :key="index" -->
				<view class="collapse" >
					<view @click="changeContent(item,index)">
						<view class="coll-header">
							<view style="display: flex;align-items: center;">
								<view class="image-radius">
									<!-- <image :src="item.headimgurl" mode="widthFix" style="width: 72rpx;"></image> -->
								</view>
								<view class="head-txt">{{ getName(item.nickname) }}</view>
							</view>
							<view class="coll-right">
								<view class="space">
									<!-- {{item.level | level}} -->
								</view>
								<image :src="item.open?imageList[0]:imageList[1]" mode="widthFix" style="width: 24rpx;"></image>
							</view>
						</view>
						<!-- 展开 -->
						<view class="box">
							<view class="box-cont" v-show="item.open==true">
								<view class="flex">
									<text>真实姓名<text style="color:#FB231F">*</text></text>
									<text>{{item.realname}}</text>
								</view>
								<view class="flex">
									<text>联系方式<text style="color:#FB231F">*</text></text>
									<text>{{item.mobile}}</text>
								</view>
								<view class="flex">
									<text>代理级别<text style="color:#FB231F">*</text></text>
									<text>{{item.level | level}}</text>
								</view>
								<view class="flex">
									<text>邀请人<text style="color:#FB231F">*</text></text>
									<!-- <text>{{item.recom_user && item.recom_user.nickname}}</text> -->
								</view>
								<view class="flex">
									<text>上级代理<text style="color:#FB231F">*</text></text>
									<!-- <text>{{item.agent_user && item.agent_user.nickname}}</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="showTotal" class="showTotal">
					没有更多了呦~
				</view>
			</view>
		</view>
		<view v-else>
			<view class="not-message">
				<image src="../../static/img/notmessage.png" mode="widthFix" style="width: 250rpx;"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>
<script>
	// import { _API_SearchUserDetail,_API_GetNewUserDetail,_API_StoreNoOpen } from '@/apis/team.js'
	export default {
		data(){
			return{
				show:true,
				param:{
					page_index:1,
					page_size:15,
					search_name: ""
				},
				item: {
					nickname:  '春暖花开',
					mobile: 13523102256,
					level:2,
					open: true
				},
				numType: '',
				genre:'',
				title:'',
				num:'',
				myLevel: '',
				total:"",//总页数
				disabled:false,
				showTotal:false,
				imageList:[
					 require('../../static/img/bottom.png'),
					 require('../../static/img/right-t.png'),
				],
				itemList: []
			}
		},
		onLoad:function(option){
			uni.setNavigationBarTitle({
			　　title: option.num
			})
		},
		methods: {
			changeContent(item,index) {
			    //  this.itemList.forEach(i => {
			    //     if (i.open !== this.itemList[index].open) {
			    //         i.open = false;
			    //     }
			    // })
			    item.open = !item.open
			},
			getName(name) {
				if (name) {
					return name.length > 10 ? name.slice(0, 10) + '...' : name;
				}
				return '';
			},
			getEnroll() {
				this.param.page_index = 1
				if (this.numType == 0) {
					_API_SearchUserDetail(this.param).then(res => {
						if (res.code == 200) {
							if(res.data.list.length>0){
								for(let i=0;i<res.data.list.length;i++){
									res.data.list[i].open=false
								}
								this.total = Math.ceil(res.data.total / this.param.page_size);
								this.itemList= res.data.list
								this.show=true
								this.num = res.data.total
							}else{
								this.show=false
							}
						} else {
							uni.showToast({
								title: res.msg || '获取失败',
								icon:'none'
							})
						}
					})
				} else {
					_API_StoreNoOpen(this.param).then(res => {
						if (res.code == 200) {
							if(res.data.list.length>0){
								for(let i=0;i<res.data.list.length;i++){
									res.data.list[i].open=false
								}
								this.total = Math.ceil(res.data.total / this.param.page_size);
								this.itemList= res.data.list
								this.show=true
								this.num = res.data.total
							}else{
								this.show=false
							}
						} else {
							uni.showToast({
								title: res.msg || '获取失败',
								icon:'none'
							})
						}
					})
				}
			},
			request() { // 网络请求方法
				uni.showLoading({ mask: true })
				if (this.numType == 0) {
					console.log(this.param)
					_API_SearchUserDetail(this.param).then(res => {
						if (res.code == 200) {
							if(res.data.list.length>0){
								for(let i=0;i<res.data.list.length;i++){
									res.data.list[i].open=false
								}
								this.total = Math.ceil(res.data.total / this.param.page_size);
								this.itemList= this.itemList.concat(res.data.list)
								this.show=true
								this.num = res.data.total
							}else{
								this.show=false
							}
						} else {
							uni.showToast({
								title: res.msg || '获取失败',
								icon:'none'
							})
						}
					})
				} else {
					_API_StoreNoOpen(this.param).then(res => {
						if (res.code == 200) {
							if(res.data.list.length>0){
								for(let i=0;i<res.data.list.length;i++){
									res.data.list[i].open=false
								}
								this.total = Math.ceil(res.data.total / this.param.page_size);
								this.itemList= this.itemList.concat(res.data.list)
								this.show=true
								this.num = res.data.total
							}else{
								this.show=false
							}
						} else {
							uni.showToast({
								title: res.msg || '获取失败',
								icon:'none'
							})
						}
					})
				}
			},
		},
		filters:{
			level(v){
				if(v == 1){
					return "销售主管"
				}else if(v == 2){
					return "销售经理"
				}else if(v == 3){
					return "代理公司"
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.red {
		font-size: 28rpx;
		font-weight: bold;
		color: #FB231F;
	}
	.green {
		font-size: 28rpx;
		font-weight: bold;
		color: #75D140;
	}
	.topt {
		width: 100%;
		padding: 30rpx 24rpx 0 24rpx;
		box-sizing: border-box;
		background-color: #fff;
		.search_con {
			width: 700rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.search_inp {
			height: 80rpx;
			width: 100%;
			padding: 0 0 0 30rpx;
			border-radius: 44rpx;
			background: #F9F9FB;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.flex {
				display: flex;
			}
		}
		.search {
			width: 132rpx;
			height: 64rpx;
			line-height: 64rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			text-align: center;
			background: linear-gradient(92deg, #FF232C 0%, #FF571B 100%);
			border-radius: 32rpx;
		}
	}
	.bottomOut {
		height: 1334rpx;
		flex: 1;
		overflow: hidden;
		.top {
			background-color: #fff;
			line-height: 104rpx;
			display: flex;
			align-items: center;
			border-top: 1px solid #EEEEEE;
			padding: 0 36rpx;
			border-bottom: 30rpx solid #F9F9FB;
			.left {
				color: 333;
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 30rpx;
			}
			.right {
				padding: 0 38rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				border-radius: 28rpx;
				background: #FB231F;
				color:#fff;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.collapse {
	    padding: 0 36rpx;
		background-color: #fff;
	}
	.coll-header {
		height: 140rpx;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
		.image-radius{
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			overflow: hidden;
		}
		.head-txt {
		    margin-left: 20rpx;
		    font-size: 28rpx;
		    font-weight: bold;
			color: #333;
		}
		.coll-right{
			display: flex;
			align-items: center;
			.space{
				width: 172rpx;
				color: #FB231F;
				font-size: 28rpx;
				line-height: 56rpx;
				text-align: center;
				background-color: #FFF4F3;
				border-radius: 28rpx;
				margin-right: 20rpx;
			}
		}
	}
	.box {
	    overflow: hidden;
	    transition: all 0.3;
	    border-bottom: 1px solid #EEEEEE;
	}
	.box-circle {
	    width:36rpx;
	    height: 36rpx;
	    border-radius: 50%;
	    background-color: #18BBB4;
	    margin-left: 4rpx;
	    margin-right: 19rpx;
	}
	.box-cont {
	    // display: flex;
	    // justify-content: space-between;
	    color: #333;
		font-size: 28rpx;
		.flex{
			display: flex;
			justify-content:space-between;
			align-items: center;
			margin-bottom: 30rpx;
		}
	}
	.last {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-bottom: 30rpx;
		// text-align: center;
		// font-size: 32rpx;
		// color: #4185F5;
		// margin-bottom: 30rpx;
		&_box {
			height: 50rpx;
			padding: 0 5rpx;
			border-radius: 8rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 26rpx;
		}
		&_blue {
			border: 2rpx solid #4185F5;
			color: #4185F5;
			margin-left: 30rpx;
		}
		&_black {
			border: 2rpx solid #333;
			color: #333;
			margin-left: 30rpx;
		}
	}
	.not-message{
		position: relative;
		top: 400rpx;
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		// line-height: 1334rpx;
		text{
			font-size: 30rpx;
			color: #808080;
			margin-top: 50rpx;
		}
	}
	.showTotal{
		line-height: 100rpx;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}
</style>
