<template>
	<view>
		<view id="app-top">
			<uni-nav-bar statusBar backgroundColor="transparent" fixed title="移除管理员" left-icon="left"
				@clickLeft="utils.navigateBack()">
				<view slot="right" @tap="tapSubmit">
					<view class="sub-btn">完成{{inAr()}}</view>
				</view>
			</uni-nav-bar>
			<view class="search fx-r fx-bc">
				<image src="/static/img/tb-seach.png"></image>
				<input @input="tapKeyWord" class="fx-g1" type="text" placeholder="搜索联系人" />
			</view>
		</view>


		<scroll-view class="search-view" :style="'height: calc(100vh - ' + barheight + 'px);'" scroll-y
			:scroll-into-view="toView" scroll-with-animation='true' show-scrollbar="false">
			<view class="lists">
				<view v-for="(item,index) in letter">
					<view class="letter" :id="'letter_' + item.letter">{{item.letter}}</view>
					<view class="item fx-r fx-bc" @tap="tapSelect(index,index2)" v-for="(item2,index2) in item.data">
						<view v-if="item2.isDisable">
							<image class="select" src="/static/chat/radio_buttons_0.png" mode="widthFix"></image>
						</view>
						<view v-else>
							<image class="select" v-if="!item2.select" src="/static/chat/check.png" mode="widthFix">
							</image>
							<image class="select" v-else src="/static/chat/check-btn.png" mode="widthFix"></image>
						</view>
						<image style="border-radius: 50%;"
							:src="item2.avatar == '' ? '/static/chat/user-avatar.png' : item2.avatar" mode="aspectFill">
						</image>
						<view class="info fx-h fx-ac">
							<rich-text class="title" :nodes="getRanValue(item2.remark || item2.nickname)"></rich-text>
						</view>
					</view>
				</view>

				<view class="foot-value">{{count}}个朋友</view>
			</view>


		</scroll-view>

		<view class="SideMenu">
			<view @tap="tapOpenLetter(item.letter)" v-for="(item, index) in letter"> {{item.letter}} </view>
		</view>

		<view class="choice" v-if="isChoice">{{choice}}</view>

	</view>
</template>
<style lang="scss">
	.sub-btn {
		color: #fff;
		background: $ic-appcolor;
		padding: 8px;
		border-radius: 4px;
	}

	.search {
		background: #fff;
		border-radius: 6px;
		margin: 0px 10px;
		padding: 10px;
	}

	.search image {
		width: 30px;
		height: 30px;
	}

	.search input {
		font-size: 14px;
	}

	.search-view {
		height: calc(100% - 50px)
	}

	.search-view .lists {
		margin-top: 10px;
	}

	.search-view .lists .item {
		background: #fff;
		padding: 0 10px;
		position: relative;
	}

	.search-view .lists .item:active {
		background: #f1f1f1;
	}

	.search-view .lists .item image {
		width: 40px;
		height: 40px;
	}

	.search-view .lists .item .info {
		width: calc(100% - 100px);
		margin-left: 10px;
		font-size: 14px;
		color: #787878;
		border-bottom: 1px solid #f1f1f1;
		height: 60px;
	}

	.search-view .lists .item .flg {
		background: #ff5857;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		font-size: 10px;
		text-align: center;
		line-height: 20px;
		color: #fff;
	}

	.search-view .lists .item .select {
		width: 20px;
		height: 20px;
		margin-right: 8px;
	}

	.search-view .lists .item:last-child .info {
		border-bottom: 0;
	}

	.search-view .letter {
		padding: 10px;
	}

	.SideMenu {
		position: fixed;
		top: 50%;
		right: 0;
		padding: 20rpx 0rpx;
		width: 45rpx;
		transform: translate(0, -50%);
		z-index: 1;
	}

	.SideMenu view {
		height: 30rpx;
		display: block;
		padding: 4rpx 0;
		wdith: 45rpx;
		color: #000;
		text-align: center;
		font-size: 22rpx;
	}

	.foot-value {
		height: 60px;
		line-height: 60px;
		font-size: 14px;
		text-align: center;
		color: #787878;
	}
</style>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	var LetterList = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
		'U', 'V', 'W', 'X', 'Y', 'Z', '#'
	];
	export default {
		computed: mapState(['user', 'sysData']),
		data() {
			return {
				dataAr: [],
				letter: [],
				noData: [],
				count: 0,
				keyword: "",
				isChoice: false,
				choice: "",
				toView: "",
				barheight: 0,
				groupId: 0
			}
		},
		onLoad(options) {
			this.checkUserLogin({
				page: this,
				isLogin: true,
				fn: this.initView
			});
			this.$nextTick(() => {
				uni.createSelectorQuery().select("#app-top").boundingClientRect(res => {
					this.barheight = res.height;
				}).exec();
			});
			this.groupId = options.groupId;

		},
		onShow() {},
		methods: {
			...mapMutations(['checkUserLogin', 'setSys']),
			/**
			 * 
			 */
			initView: function() {
				uni.showLoading({
					title: "加载中..."
				});
				this
					.request
					.post("chatGroupAdminuser", {
						groupId: this.groupId
					})
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.dataAr = res.data;
							this.letterView();
						} else {
							this.utils.showModal(res.msg);
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showModal({
							title: '系统提示',
							content: '加载失败，返回在尝试',
							showCancel: false
						});
					});
			},
			/**
			 * 检索关键词
			 */
			tapKeyWord: function(ev) {
				this.keyword = ev.detail.value;
				this.letterView();
			},
			//字母
			letterView: function() {
				var tAr = {};
				for (var i in LetterList) {
					var letter = LetterList[i];
					for (var j in this.dataAr) {
						var jAr = this.dataAr[j];
						if (jAr.letter == letter && (jAr.nickname.indexOf(this.keyword) >= 0 || jAr.remark.indexOf(this
								.keyword) >= 0)) {
							if (tAr[letter] != null) {
								tAr[letter].data.push(jAr);
							} else {
								tAr[letter] = {
									'letter': letter,
									'data': [jAr]
								};
							}
						}
					}
				}
				var count = 0;
				var nAr = [];
				for (var j in tAr) {
					nAr.push(tAr[j]);
					count += tAr[j].data.length;
				}
				this.letter = nAr;
				this.count = count;
			},
			tapSelect: function(index, index2) {
				if (this.letter[index].data[index2].isDisable) return;
				var bool = this.letter[index].data[index2].select;
				this.$set(this.letter[index].data[index2], 'select', !bool);
			},
			inAr: function() {
				var count = 0;
				for (var i in this.letter) {
					for (var j in this.letter[i].data) {
						if (this.letter[i].data[j].select) {
							count += 1;
						}
					}
				}
				return count > 0 ? ("(" + count + ")") : "";
			},
			/**
			 * 遍历字符串
			 */
			getRanValue: function(str) {
				let value = str;
				if (value.indexOf(this.keyword) !== -1) {
					let reg = new RegExp(this.keyword, 'gi')
					return value.replace(reg, `<font style="color:#2fbec0">${this.keyword}</font>`)
				} else {
					return value
				}
			},
			/**
			 * 打开字母
			 */
			tapOpenLetter: function(item) {
				this.isChoice = true;
				this.choice = item;
				setTimeout(() => {
					this.isChoice = false;
				}, 500);
				this.toView = "letter_" + item;
			},
			/**
			 * 打开
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				let url = ev.currentTarget.dataset.url;
				this.utils.navigateTo(url);
			},

			/**
			 * 提交创建
			 */
			tapSubmit: function() {
				var idsAr = [];
				for (var i in this.letter) {
					for (var j in this.letter[i].data) {
						if (this.letter[i].data[j].select) {
							idsAr.push(this.letter[i].data[j].uid);
						}
					}
				}
				if (idsAr.length < 0) {
					return this.utils.Tip("请选择添加的人");
				}
				uni.showLoading({
					title: "提交中.."
				});
				this
					.request
					.post("chatGroupAdminJdd", {
						groupId: this.groupId,
						usercodes: idsAr.join(",")
					})
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.$emit('groupAdmin', '');
							this.utils.Tip("操作成功");
							setTimeout(() => {
								uni.navigateBack();
							}, 200);
						} else {
							uni.showModal({
								title: '系统提示',
								content: res.msg,
								showCancel: false
							});
						}
					})
					.catch(err => {
						console.log(err);
						uni.hideLoading();
						uni.showModal({
							title: '系统提示',
							content: '加载失败，返回在尝试',
							showCancel: false
						});
					});


			}


		}
	}
</script>

<style>
	.app {
		width: 750rpx;
		minheight: 100%;
	}

	/* #ifdef H5 */
	.app {
		height: calc(100vh - 95px);
	}

	/* #endif */
	.app-run .text {
		font-size: 24px;
		font-weight: bold;
		color: #737373;
	}

	.choice {
		width: 110rpx;
		height: 110rpx;
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: rgba(0, 0, 0, 0.3);
		color: #fff;
		border-radius: 20rpx;
		text-align: center;
		line-height: 110rpx;
		font-size: 45rpx;
		z-index: 2;
	}
</style>