<template>
	<view class="page">
		<u-navbar title="合伙人管理" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36' height='50'></u-navbar>
        <view class="box">
        	<view class="nav">
        		<view class="top">
        			<u-search placeholder="搜索" input-align="center" v-model="keyword" @custom="searchs"></u-search>
        		</view>
        	</view>
			<view class="list" v-for="(item,index) in wateringList" :key="index" @click="btnxq(index)">
				<view class="top">
					<view class="lt" style="display: flex;align-items: center;">
					    <image style="margin-right: 10rpx;width: 32rpx;
						height: 32rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uspdprPKiYdcIdwhtdPM" mode=""></image> 
						<view v-if="item.userName" class="" style="font-weight: 500;font-size: 24rpx;color: #3D3D3D;">{{item.userName}}-合伙人</view>
						<view v-else class="" style="font-weight: 500;font-size: 24rpx;color: red;" @click.stop="qrFun(item.employId)">点击扫码绑定</view>
					</view> 
					<view class="rt" >
						<text style="width: 9rpx;height: 9rpx;border-radius: 50%;margin-right: 5rpx;display: inline-block;background-color: #575B66;"></text>
						<text style="width: 9rpx;height: 9rpx;border-radius: 50%;margin-right: 5rpx;display: inline-block;background-color: #575B66;"></text>
						<text style="width: 9rpx;height: 9rpx;border-radius: 50%;margin-right: 5rpx;display: inline-block;background-color: #575B66;"></text>
					</view>
					<view class="bianji" style="display: none;" :id="tabindex == index ? 'active' : ''">
						<view class="" @click="btnedit(item.employId)">编辑合伙人</view>
						<view class="" style="border: 0;color: #FF1C1C;" @click="btnshanchu(item.employId)">删除合伙人</view>
					</view>
				</view>
				<view class="" style="width: 680rpx;height: 1px;background: #F0F0F0;margin-left: -30rpx;margin-top: 14rpx;"></view>
				<view class="list_val">
					<view class="list_shop">
						<view class="" style="font-size: 24rpx;color: #808080;">绑定店铺</view>
						<view class="" style="font-weight: 600;font-size: 28rpx;color: #3D3D3D;margin-top:18rpx;">{{item.storeName}}</view>
					</view>
					<view class="list_shebei">
						<view class="" style="font-size: 24rpx;color: #808080;">月收入</view>
						<view class="" style="font-weight: 600;font-size: 28rpx;color: #3D3D3D;margin-top:18rpx;">￥{{item.monthIncome == undefined ? '--' : item.monthIncome}}</view>
					</view>
					<view class="list_shebei">
						<view class="" style="font-size: 24rpx;color: #808080;">设备数</view>
						<view class="" style="font-weight: 600;font-size: 28rpx;color: #3D3D3D;margin-top:18rpx;">{{item.deviceCount == undefined ? '--' : item.deviceCount}}台</view>
					</view>
				</view>
				<view class="" style="width: 680rpx;height: 1px;background: #F0F0F0;margin-left: -30rpx;margin-top: 14rpx;"></view>
				<view class="" style="font-size: 24rpx;color: #3D3D3D;margin-top: 10rpx;width: 100%;display: flex;justify-content: space-between;">
					<text>{{item.createTime}}</text>  <text>分成比例：{{item.point}}%</text>
				</view>
			</view>
			<view class="" style="width: 448rpx;height: 448rpx;margin: auto;margin-top: 100rpx;text-align: center;"
				v-if="showflag">
				<view class="" style="font-size: 30rpx;color: #ccc;margin-top: 30rpx;">暂无更多合伙人...</view>
			</view>
        </view>
		
		<view class="imgewm" v-if="imgflag">
			<canvas canvas-id="qrcode" style="height: 100%;margin: 0 auto;" />
			<view class="" style="width: 100%;text-align: center;font-size: 30rpx;">
				请扫描二维码进行绑定
			</view>
		</view>
		<view class="imgewmflag" v-if="imgflag"></view>
		
		<view class="xinjian" @click="btnadd">
			新建合伙人
		</view>
		<view class="xinjians" v-if="imgflag" @click="imgflag = false">
			关闭二维码
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: " #8883F0"
                }, 
				pagenum: 1,
				wateringList: [],
				pagesize: 10, // 一页多少数据
				isLoading: false, // 是否正在加载数据  
				noMoreData: false, // 是否没有更多数据  
				total: 0,
				keyword:'',
				showflag: false,
				tabindex:-1,
				imgflag:false,
				storeId:''
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
		},
		onShow() {
			this.pagenum = 1
			this.wateringList = []
			this.tabindex = -1
			this.getlist()
		},
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},
		
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			}
		},
		methods: {
			//**生成二维码**//
			qrFun: function(employId) {
				this.imgflag = true
				uQRCode.make({
					canvasId: 'qrcode',
					text: 'https://kg.chuangtewl.com/h?i=' + employId,
					size: 300,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
				})
			},
			// 点击删除合伙人
			btnshanchu(employId){
				let employids = employId
				let that = this
				uni.showModal({
				    title: '温馨提示',
				    content: '您确定要删除此合伙人吗？',
				    showCancel: true,
				    success: function(res) {
				        if (res.confirm) { 
				            that.$u.delete(`/mch/storeStaff/${employids}`).then(res => {
				            	if (res.code == 200) {
									that.pagenum = 1
									that.wateringList = []
									that.tabindex = -1
									that.getlist()
				                    uni.showToast({
				                    	title: '删除成功',
				                    	icon: 'success',
				                    	duration: 2000
				                    })
				            	}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
				            })
				        } else if (res.cancel) {
				            
				        }
				    }
				})
			},
			// 点击跳转编辑合伙人
			btnedit(employId){
				uni.navigateTo({
					url:'/page_fenbao/hehuoren/addhehuo?employId=' + employId + '&storeId=' + this.storeId
				})
			},
			
           btnxq(index){
			   if(this.tabindex == index){
				   this.tabindex = -1
			   }else{
				   this.tabindex = index
			   }
		   },
		   btnadd(){
			  uni.navigateTo({
			  	url:'/page_fenbao/hehuoren/addhehuo?storeId='+ this.storeId
			  })  
		   },
		   getlist() {
		   	this.$u.get("/mch/storeStaff/list?pageNum=" + this.pagenum + '&pageSize=' + this.pagesize + '&keyword=' + this.keyword + '&storeId=' + this.storeId).then(res => {
		   		if (res.code == 200) {
		               this.total = res.total
					   if (this.total > 0) {
					   	this.showflag = false
					   } else {
					   	this.showflag = true
					   }
		               if (res.rows.length > 0) {
		               	// 有数据，追加到列表  
		               	this.wateringList = this.wateringList.concat(res.rows)
		               	this.pagenum++
		               } else {
		               	// 没有更多数据  
		               	this.noMoreData = true
		               }
		               this.isLoading = false
		   		}
		   	})
		   },
		   searchs(){
			this.pagenum = 1
		   	this.wateringList = []
		   	this.getlist()
		   },
		   onReachBottom() {
		   	let sum = this.total / this.pagesize
		   	if (this.pagenum-1 < sum) {
		   		this.getlist(); // 上拉加载更多  
		   	} else {
		   		uni.showToast({
		   			title: '没有更多代理人员了',
		   			icon: 'none',
		   			duration: 1000
		   		})
		   	}
		   },
		   
		}
	}
</script>

<style lang="scss">
	#active{
		display: block !important;
	}
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 22rpx;
	}
	page {
			background: #F4F5F7;
	}
	.imgewmflag {
		width: 750rpx;
		height: 100vh;
		background: #fff;
		// opacity: .8;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.imgewm {
		width: 700rpx;
		height:700rpx;
		margin: auto;
		margin-top: 104rpx;
		z-index: 2;
		position: fixed;
		top: 20%;
		left: 50%;
		transform: translateX(-50%);
	}
    .xinjian{
		width: 680rpx;
		height: 90rpx;
		background: #8883F0;
		border-radius: 49rpx 49rpx 49rpx 49rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		border-radius: 50rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 56rpx;
	}
	.xinjians{
		width: 680rpx;
		height: 90rpx;
		background: #8883F0;
		border-radius: 49rpx 49rpx 49rpx 49rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90rpx;
		border-radius: 50rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 56rpx;
		z-index: 2;
	}
	.page {
		width: 750rpx;
		.box{
			width: 750rpx;
			height:100%;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-bottom: 200rpx;
			margin-top: 170rpx;
			.list{
				width: 680rpx;
				height: 310rpx;
				margin-top: 30rpx !important;
				margin: auto;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				padding: 20rpx 30rpx;
				box-sizing: border-box;
				.top{
					display: flex;
					justify-content: space-between;
					position: relative;
					.bianji{
						position: absolute;
						top: 50rpx;
						right: 0;
						width: 194rpx;
						height: 132rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0,0,0,0.15);
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						text-align: center;
						// display: none;
						view{
							border-bottom: 1px solid #ccc;
							height: 66rpx;
							line-height: 66rpx;
						}
					}
				}
				.list_val{
					display: flex;
					justify-content: space-between;
					padding: 32rpx 50rpx;
					box-sizing: border-box;
					text-align: center;
				}
			}
			.nav {
				margin-bottom: 30rpx;
				.top {
					width: 750rpx;
					height: 136rpx;
					background: #FFFFFF;
					padding: 32rpx 36rpx;
					box-sizing: border-box;
			        position: fixed;
					top: 200rpx;
					/deep/ .u-content {
						border: 1px solid #ccc;
						border-radius: 50rpx 0 0 50rpx !important;
					}
			
					/deep/ .u-action {
						border-radius: 0 50rpx 50rpx 0 !important;
						width: 112rpx;
						height: 65rpx;
						line-height: 65rpx;
						border: 2rpx solid #ccc;
						margin-left: 0;
						color: #3D3D3D;
						background-color: #f2f2f2;
					}
				}
			
				.date {
					padding-left: 80rpx;
					padding-right: 80rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					width: 750rpx;
					height: 70rpx;
					background: #FFFFFF;
					margin-bottom: 36rpx;
			
					text {
						padding: 6rpx 18rpx;
						box-sizing: border-box;
						background: #eee;
						height: 46rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						font-size: 24rpx;
						color: #808080;
					}
				}
			}
		}
	}
</style>