<template>
	<view class="content">
		<view class="customer-list">
			<view class="customer-item"  v-for="(item,index) in dataList"  >
				<view class="name-box">
					<view class="name">昵称:{{item.nickName}}</view>
					<view class="btns">
						<view class="btn"  @click="delItem(index)" >删除</view>
					</view>
				</view>
				<view class="desc-box">
					<view class="label">微信号:</view>
					<view class="value">{{item.id}}</view>
				</view>
				 
			</view>
		</view>
		<view class="bottom-btns">
			<view class="btn1" @click="getWxUsers()">获取客户</view>
			<view class="btn2" @click="addWxUsers()">导入客户</view>
		</view>
		 
	</view>
</template>

<script>
	
	import {addCompanyWxUser} from '@/api/companyWxUser.js'
	export default {
		data() {
			return {
				flag:true,
				dataList: []
			}
		},
		onLoad() {
			var that=this;
			uni.$on('getWeixinList', (items) => {
				console.log(JSON.parse(items.data))
				that.dataList=JSON.parse(items.data);
				that.flag=true;
				uni.showToast({
					icon:'none',
					title: "获取微信任务已完成，共获取"+that.dataList.length+"个",
				});	
				 
			})
		},
		onShow() {
		},
		methods: {
			delItem(index){
				this.dataList.splice(index,1);
			},
			importUsers(){
				var that=this;
				var index=0;
				that.dataList.forEach(item => {
					//更新用户昵称
					index++;
					var data={nickName:item.nickName,weixinId:item.id};
					addCompanyWxUser(data).then(res => {
						if(index>=that.dataList.length){
							that.dataList=[];
							uni.showToast({
								icon:'none',
								title: "导入成功",
							});	
						}
						else{
							uni.showToast({
								icon:'none',
								title: "导入"+item.nickName,
							});	
						}
					});
					
				});
				
			},
			addWxUsers(){
				if(!this.flag){
					uni.showToast({
						icon:'none',
						title: "正在同步获取微信用户...",
					});
					return;
				}
				if(this.dataList.length==0){
					uni.showToast({
						icon:'none',
						title: "没有可导入的数据",
					});
					return;
				}
				var that=this;
				uni.showModal({
					title:"提示",
					content:"确认导入用户列表吗?",
					showCancel:true,
					cancelText:'取消',
					confirmText:'确定',
					success:res=>{
						if(res.confirm){
							that.importUsers();
													
						}else{
						}
					}
				})
			},
			getWxUsers(){
				if(!this.flag){
					return;
				}
				var that=this;
				uni.showModal({
					title:"提示",
					content:"确认开始获取微信用户?",
					showCancel:true,
					cancelText:'取消',
					confirmText:'确定',
					success:res=>{
						if(res.confirm){
							that.flag=false;
							var userId=uni.getStorageSync('companyUserId') ;
							var data={cmd:"getWeixinList", data:{},userId:"p-"+userId};
							uni.$emit('sendMsg',data); 
							uni.showToast({
							 	icon:'none',
							 	title: "开始获取微信用户...",
							});
						}else{
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		
		height: 100%;
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.content{
		height: 100%;
		padding: 0rpx;
		position: relative;
		.bottom-btns{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			.btn1{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50px;
				flex:1;
				background-color: red;
				color: #fff;
				font-size: 28rpx;
			}
			.btn2{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50px;
				flex:1;
				background-color: green;
				color: #fff;
				font-size: 28rpx;
			}
		}
		.customer-list{
			display: flex;
			flex-direction: column;
			padding: 15rpx 15rpx 100rpx;
			.customer-item{
				padding: 15rpx;
				border-radius: 15rpx;
				background-color: #fff;
				margin-bottom: 15rpx;
				width: 100%;
				.name-box{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.name{
						flex: 1;
						font-size: 38rpx;
						color:#111;
					}
					.btns{
						.btn{
							margin-left: 10rpx;
							color: #a8a8a8;
							font-size: 28rpx;
							 
						}
					}
				}
				.desc-box{
					margin-top: 15rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.label{
						font-size: 28rpx;
						color: #a8a8a8;
					}
					.value{
						font-size: 28rpx;
						color: #a8a8a8;
					}
					
					
				}
			}
		}
		
	}
	 
</style>
