<template>
	<view @click="pageClick" class="group_members_container">
		<group-member-list-header 
			ref="navHeaderRef" 
			:checkVisible.sync="showCheck" 
			:isTransfer="isTransfer"
			:isSetAdmin="isSetAdmin"
			:isNomal="!isOwner && !isAdmin" 
			:groupID="groupID" 
			@removeMember="showMemberCheck" 
			/>

		<view class="search_bar_wrap">
			<u-search class="search_bar" shape="square" placeholder="搜索" :showAction="false"
				v-model="keyword" />
		</view>

		<u-list class="member_list" @scrolltolower="loadMore" lowerThreshold="100" height="1">
			<u-list-item v-for="member in filterGroupMemberList" :key="member.userID">
				<user-item 
					@itemClick="userClick" 
					@updateCheck="updateCheck" 
					@longtapEvent="longtap"
					:checked="isChecked(member.userID)"
					:checkVisible="showCheck" 
					:disabled="!canCheck(member) && showCheck" :item="member" 
					/>
			</u-list-item>
			<view v-show="loadState.loading" class="member_loading">
				<u-loading-icon></u-loading-icon>
			</view>
		</u-list>

		<choose-index-footer 
			v-if="showCheck" 
			:comfirmLoading="comfirmLoading" 
			@removeItem="updateCheck"
			@confirm="confirm" 
			:choosedData="getChoosedData" 
			:isRemove="isRemove" 
			:maxLength="groupMemberLength" />

		<u-modal 
			:show="showConfirmModal" 
			asyncClose 
			showCancelButton 
			@confirm="modalConfirm"
			@cancel="() => (showConfirmModal = false)" :content="isRemove? '确定移除已选群成员？': `确定要把群主转移给${choosedTransferMember.nickname}吗？`
      " />
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	let moreActionArea;
	import {mapActions,mapGetters} from "vuex";
	import {GroupMemberListTypes} from "@/constant";
	import IMSDK, {GroupMemberRole} from "openim-uniapp-polyfill";
	import UserItem from "@/components/UserItem/index.vue";
	import GroupMemberListHeader from "./components/GroupMemberListHeader.vue";
	import ChooseIndexFooter from "@/components/ChooseIndexFooter/index.vue";
	import util from "@/util/index.js"
	export default {
		components: {
			GroupMemberListHeader,
			ChooseIndexFooter,
			UserItem,
		},
		data() {
			return {
				showCheck: false,
				groupID: "",
				keyword: "",
				showConfirmModal: false,
				comfirmLoading: false,
				groupMemberList: [],
				filterGroupMemberList:[],
				choosedMemberIDList: [],
				choosedTransferMember: {},
				type: GroupMemberListTypes.Preview,
				isRightKick: true,
				loadState: {
					hasMore: true,
					loading: false,
				},
				adminUserIdList:[]
			};
		},
		computed: {
			...mapGetters([
				'storeCurrentUserID',
				'storeCurrentGroup',
				"storeCurrentMemberInGroup"
			]),
			getChoosedData() {
				const tmpList = [...this.choosedMemberIDList];
				return this.groupMemberList.filter(
					(member) => {
						const idx = tmpList.findIndex((item) => item === member.userID);
						if (idx > -1) {
							tmpList.splice(idx, 1);
						}
						return idx > -1;
					},
				);
			},
			isRemove() {
				return this.type === GroupMemberListTypes.Kickout;
			},
			isTransfer() {
				return this.type === GroupMemberListTypes.Transfer;
			},
			isSetAdmin() {
				return this.type === GroupMemberListTypes.setAdmin;
			},
			isChecked() {
				return (userID) => this.choosedMemberIDList.includes(userID);
			},
			isOwner() {
				return (
					this.storeCurrentMemberInGroup.roleLevel ===
					GroupMemberRole.Owner
				);
			},
			isAdmin() {
				return (
					this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin
				);
			},
			canCheck() {
				return ({
					roleLevel,
					userID
				}) => {
					if (this.type === GroupMemberListTypes.Kickout) {
						return (
							(this.isOwner || (this.isAdmin && roleLevel !== GroupMemberRole.Owner)) &&
							userID !== this.$store.storeCurrentUserID
						);
					}

					return userID !== this.$store.storeCurrentUserID;
				};
			},
			groupMemberLength() {
				return this.storeCurrentGroup?.memberCount ?? 0;
			},
			
		},
		watch:{
			keyword(v){
				this.filterGroupMemberList = this.getFilterGroupMemberList();
			},
			groupMemberList(v){
				this.filterGroupMemberList = this.getFilterGroupMemberList();
			},
		},
		onLoad(options) {
			const {
				groupID,
				type
			} = options;
			this.loadMemberList(groupID);
			this.type = type;
			this.groupID = groupID;
			this.isRightKick = (type == GroupMemberListTypes.setAdmin|| type === GroupMemberListTypes.Kickout);
			if (this.isRightKick) {
				this.showCheck = true;
			}
			if(type == GroupMemberListTypes.setAdmin){
				IMSDK.asyncApi('getGroupMemberOwnerAndAdmin', IMSDK.uuid(), this.groupID).then(({data}) => {
					let arr = [];
					data.forEach((item)=>{
						if(item.roleLevel == GroupMemberRole.Admin){
							arr.push(item.userID);
						}
					});
					this.adminUserIdList = arr;
					this.choosedMemberIDList = arr;
					console.log(arr);
					// 调用成功
				})
				.catch(({ errCode, errMsg }) => {
					console.log(errCode, errMsg );
					// 调用失败
				})
			}

		},
		methods: {
			getFilterGroupMemberList(){
				if(this.keyword){
					return this.groupMemberList.filter((item)=>{
						const kw = this.keyword.toLowerCase();
						if(item.nickname && item.nickname.toLowerCase().includes(kw)){
							return true;
						}
						if(item.showName && item.showName.toLowerCase().includes(kw)){
							return true;
						}
						if(item.remark && item.remark.toLowerCase().includes(kw)){
							return true;
						}
						if(item.groupName && item.groupName.toLowerCase().includes(kw)){
							return true;
						}
						return false;
					});
				}
				return this.groupMemberList;
			},
			async pageClick(e) {
				if (!moreActionArea) {
					moreActionArea = await this.getEl(".more_container");
				}
				if (!moreActionArea) return;
				if (
					e.target.y < moreActionArea.top ||
					e.target.y > moreActionArea.bottom ||
					e.target.x < moreActionArea.left
				) {
					this.$refs.navHeaderRef.checkMenu();
				}
			},
			async confirm() {
				if(this.isSetAdmin){
					uni.showLoading({mask:true})
					const remveUserIds = this.adminUserIdList.filter(userID=>{
						return !this.choosedMemberIDList.includes(userID);
					});
					const addUserIds = this.choosedMemberIDList.filter(userID=>{
						return !this.adminUserIdList.includes(userID);
					});
					remveUserIds.forEach(async (userID)=>{
						await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupMemberInfo,IMSDK.uuid(),{
							roleLevel:GroupMemberRole.Normal,
							groupID:this.groupID,
							userID:userID
						});
					})
					addUserIds.forEach(async (userID)=>{
						await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupMemberInfo,IMSDK.uuid(),{
							roleLevel:GroupMemberRole.Admin,
							groupID:this.groupID,
							userID:userID
						});
					})
					uni.hideLoading();
					this.groupMemberList = [];
					this.loadMemberList(this.groupID);
					uni.navigateBack();
				}else{
					this.showConfirmModal = true;
				}
			},
			modalConfirm() {
				let func = () => {};
				if (this.type === GroupMemberListTypes.Kickout) {
					func = IMSDK.asyncApi(IMSDK.IMMethods.KickGroupMember, IMSDK.uuid(), {
						groupID: this.getChoosedData[0].groupID,
						reason: "",
						userIDList: this.getChoosedData.map((member) => member.userID),
					});
				} else {
					func = IMSDK.asyncApi(
						IMSDK.IMMethods.TransferGroupOwner,
						IMSDK.uuid(), {
							groupID: this.choosedTransferMember.groupID,
							newOwnerUserID: this.choosedTransferMember.userID,
						},
					);
				}
				func
					.then(() => this.showToast("操作成功", () => uni.navigateBack()))
					.catch(() => this.showToast("操作失败"))
					.finally(() => (this.showConfirmModal = false));
			},
			updateChoosedData(userID) {
				if (this.choosedMemberIDList.includes(userID)) {
					const idx = this.choosedMemberIDList.findIndex(
						(item) => item === userID,
					);
					const tmpArr = [...this.choosedMemberIDList];
					tmpArr.splice(idx, 1);
					this.choosedMemberIDList = tmpArr;
				} else {
					this.choosedMemberIDList = [...this.choosedMemberIDList, userID];
				}
			},
			userClick(member) {
				if (this.type === GroupMemberListTypes.Transfer) {
					if (member.userID === this.storeCurrentUserID) return;
					this.choosedTransferMember = member;
					this.showConfirmModal = true;
				} else {
					if(member.userID == this.storeCurrentUserID){
						return ;
					}
					if(this.storeCurrentMemberInGroup.roleLevel < 60 && this.storeCurrentGroup.lookMemberInfo!=0){
						return ;
					}
					const s = util.aesencode(member);
					uni.$u.route("/pages/common/userCard/index", {
						sourceID: member.userID,
						memberInfo: s,
					});
				}
			},
			updateCheck(member) {
				this.updateChoosedData(member.userID);
			},
			showMemberCheck() {
				this.type = GroupMemberListTypes.Kickout;
				this.showCheck = true;
			},
			loadMore() {
				const stateKey = "loadState";
				const methodKey = "loadMemberList";
				if (this[stateKey].hasMore && !this[stateKey].loading) {
					this[methodKey]();
				}
			},
			loadMemberList(groupID) {
				this.loadState.loading = true;
				IMSDK.asyncApi(IMSDK.IMMethods.GetGroupMemberList, IMSDK.uuid(), {
						groupID: groupID ?? this.groupID,
						filter: 0,
						offset: this.groupMemberList.length,
						count: 500,
					})
					.then(({
						data
					}) => {
						this.groupMemberList = [...this.groupMemberList, ...data];
						this.filterGroupMemberList = this.getFilterGroupMemberList();
						this.loadState.hasMore = data.length === 500;
					})
					.finally(() => (this.loadState.loading = false));
			},
			longtap(member){
				const _this = this;
				if(this.isRightKick){
					return ;
				}
				if(!this.isOwner&&!this.isAdmin){
					return ;
				}
				if(this.storeCurrentMemberInGroup.roleLevel <= member.roleLevel ){
					return ;
				}
				let itemList = [];
				if(this.isOwner){
					itemList.push(member.roleLevel == GroupMemberRole.Admin ? '取消管理员' : '设为管理员');
				}
				if(this.isOwner || this.isAdmin){
					itemList.push(member.muteEndTime > 0 ? '取消禁言':'设置禁言');
					itemList.push('踢出群聊');
				}
				uni.showActionSheet({
					itemList:itemList,
					async success({tapIndex}) {
						const label = itemList[tapIndex];
						if(['设为管理员','取消管理员'].includes(label)){
							let roleId = label=='设为管理员' ? GroupMemberRole.Admin : GroupMemberRole.Normal;
							
							await IMSDK.asyncApi(IMSDK.IMMethods.SetGroupMemberInfo,IMSDK.uuid(),{
								roleLevel:roleId,
								groupID:_this.groupID,
								userID:member.userID
							});
							_this.groupMemberList = _this.groupMemberList.map((item)=>{
								if(item.userID == member.userID){
									item.roleLevel = roleId
								}
								return item;
							});
							return ;
						}
						if(['取消禁言','设置禁言'].includes(label)){
							if(label == '取消禁言'){
								_this.setMute(member.userID,0)  
								return ;
							}
							uni.showActionSheet({
								itemList:['2小时','8小时','1天','3天','7天','15天','30天','1年'],
								success(res){
									const secs = [3600*2,3600*8,3600*24,3600*72,3600*24*7,3600*24*15,3600*24*30,3600*24*365];
									_this.setMute(member.userID,secs[res.tapIndex])  
								}
							});
							return ;
						}
						if(label=="踢出群聊"){
							await IMSDK.asyncApi(IMSDK.IMMethods.KickGroupMember,IMSDK.uuid(),{
								groupID:_this.groupID,
								reason:"",
								userIDList:[member.userID]
							});
							_this.groupMemberList = _this.groupMemberList.filter((item)=>{
								return item.userID != member.userID;
							});
							return ;
						}
					}
				})
			},
			async setMute(userID,mutedSeconds){
				const _this = this;
				await IMSDK.asyncApi(IMSDK.IMMethods.ChangeGroupMemberMute,IMSDK.uuid(),{
					mutedSeconds:mutedSeconds,
					groupID:_this.groupID,
					userID:userID
				});
				this.groupMemberList = this.groupMemberList.map((item)=>{
					if(item.userID == userID){
						item.muteEndTime = mutedSeconds===0 ? 0 : (new Date().getTime())+mutedSeconds*1000
					}
					return item;
				});
			},
			showToast(message, complete = null) {
				this.$refs.uToast.show({
					message,
					complete,
				});
			},
			getEl(el) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select(el)
						.boundingClientRect((data) => {
							// 存在data，且存在宽和高，视为渲染完毕
							resolve(data);
						})
						.exec();
				});
			},
		},
		onBackPress(options) {
			if (this.showCheck && this.isRightKick) {
				this.showCheck = false;
				this.type = GroupMemberListTypes.Preview;
				return true;
			}
			return false;
		},
	};
</script>

<style lang="scss" scoped>
	.group_members_container {
		@include colBox(false);
		height: 100vh;
		overflow: hidden;

		.search_bar_wrap {
			height: 34px;
			padding: 12px 22px;
		}

		.at_all_btn {
			font-weight: 500;
			padding: 24rpx 44rpx;
		}

		::v-deep.u-popup {
			flex: none;
		}

		.member_list {
			flex: 1;
		}
	}
</style>