<template>
	<view class="contact_choose_container">
		<custom-nav-bar title="联系人" />

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

		<view class="tab_container">
			<template v-if="activeTab === 0">
				<setting-item @click="tabChange(tabs[0].idx)" :title="tabs[0].title" :border="false" />

				<view class="tab_pane"></view>
			</template>

			<template v-else>
				<view class="tab_pane" v-show="activeTab === 1">
					<choose-index-list @updateCheck="updateCheckedUser" :indexList="getChooseData.indexList"
						:itemArr="getChooseData.dataList" :checkedIDList="checkedUserIDList"
						:disabledIDList="disabledUserIDList" :showCheck="true" />
				</view>
			</template>
		</view>
		<choose-index-footer :comfirmLoading="comfirmLoading" @removeItem="updateCheckedUserOrGroup" @confirm="confirm"
			:choosedData="getCheckedInfo" />
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	import {ContactChooseTypes} from "@/constant";
	import {formatChooseData,toastWithCallback} from "@/util/common";
	import IMSDK from "openim-uniapp-polyfill";
	import CustomNavBar from "@/components/CustomNavBar/index.vue";
	import UserItem from "@/components/UserItem/index.vue";
	import ChooseIndexList from "@/components/ChooseIndexList/index.vue";
	import ChooseIndexFooter from "@/components/ChooseIndexFooter/index.vue";
	import SettingItem from "@/components/SettingItem/index.vue";

	export default {
		components: {
			CustomNavBar,
			UserItem,
			ChooseIndexList,
			ChooseIndexFooter,
			SettingItem,
		},
		data() {
			return {
				keyword: "",
				type: ContactChooseTypes.Card,
				activeTab: 0,
				groupID: "",
				checkedUserIDList: [],
				disabledUserIDList: [],
				comfirmLoading: false,
				tabs: [
					{
						idx: 1,
						title: "我的好友",
					}, 
				],
			};
		},
		computed: {
			...mapGetters([
				"storeFriendList",
				"storeCurrentConversation",
				"storeCurrentUserID",
				"storeConversationList",
			]),
			getChooseData() {
				if (this.keyword) {
					return {
						indexList: ["#"],
						dataList: [
							this.storeFriendList.filter(
								(friend) =>
								friend.nickname.includes(this.keyword) ||
								friend.remark.includes(this.keyword)
							),
						],
					};
				}
				return formatChooseData(this.storeFriendList);
			},
			getCheckedInfo() {
				const tmpUserIDList = [...this.checkedUserIDList];
				const checkedFriends = this.storeFriendList.filter((friend) => {
					const idx = tmpUserIDList.findIndex(
						(userID) => userID === friend.userID
					);
					if (idx > -1) {
						tmpUserIDList.splice(idx, 1);
					}
					return idx > -1;
				});
				return [...checkedFriends];
			},
		},
		onLoad(options) {
			const {groupID,type,checkedUserIDList,} = options;
			console.log(this.storeFriendList);
			this.type = type;
			this.groupID = groupID;
			this.checkedUserIDList = checkedUserIDList ?
				JSON.parse(checkedUserIDList) :
				[];
			if (this.type === ContactChooseTypes.Invite) {
				this.checkDisabledUser();
			}
		},
		methods: {
			checkDisabledUser() {
				const friendIDList = this.storeFriendList.map((friend) => friend.userID);
				IMSDK.asyncApi("getUsersInGroup", IMSDK.uuid(), {
					groupID: this.groupID,
					userIDList: friendIDList,
				}).then(({
					data
				}) => {
					this.disabledUserIDList = data;
				});
			},
			tabChange(idx) {
				this.keyword = "";
				this.activeTab = idx;
			},
			updateCheckedUserOrGroup(item) {
				if (item.userID) {
					this.updateCheckedUser(item);
				}
			},
			updateCheckedUser({
				userID
			}) {
				if (this.checkedUserIDList.includes(userID)) {
					const idx = this.checkedUserIDList.findIndex((item) => item === userID);
					const tmpArr = [...this.checkedUserIDList];
					tmpArr.splice(idx, 1);
					this.checkedUserIDList = [...tmpArr];
				} else {
					this.checkedUserIDList = [...this.checkedUserIDList, userID];
				}
			},
			confirm() {
				if (this.activeTab) {
					this.activeTab = 0;
					return;
				}
				this.comfirmLoading = true;
				if (this.type === ContactChooseTypes.GetList) {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.getCheckedUsers(this.getCheckedInfo);
					this.comfirmLoading = false;

					uni.navigateBack({
						delta: 1,
					});
					return;
				}

				if (this.type === ContactChooseTypes.Invite) {
					IMSDK.asyncApi(IMSDK.IMMethods.InviteUserToGroup, IMSDK.uuid(), {
							groupID: this.groupID,
							reason: "",
							userIDList: this.getCheckedInfo.map((user) => user.userID),
						})
						.then(() => {
							toastWithCallback("操作成功", () => uni.navigateBack());
							this.comfirmLoading = false;
						})
						.catch(() => toastWithCallback("操作失败"));
					return;
				}

				this.comfirmLoading = false;
			},
		},
		onBackPress() {
			if (this.activeTab) {
				this.activeTab = 0;
				return true;
			}
			return false;
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep.u-popup {
		flex: none;
	}

	.contact_choose_container {
		height: 100vh;
		display: flex;
		flex-direction: column;

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

		.tab_container {
			@include colBox(false);
			flex: 1;
			overflow: hidden;

			.setting_item {
				padding: 32rpx 36rpx;
			}

			.title {
				height: 60rpx;
				display: flex;
				justify-content: start;
				align-items: center;
				// padding: 16rpx 8rpx;
				background: #f8f9fa;
				color: #8e9ab0;
				font-size: 24rpx;
			}

			.tabs_bar {
				@include vCenterBox();
				justify-content: space-evenly;

				.tab_item {
					@include colBox(false);
					align-items: center;

					image {
						width: 50px;
						height: 50px;
					}
				}
			}

			.tab_pane {
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;

				.member_list {
					flex: 1;
					height: 80% !important;

					::v-deepuni-scroll-view {
						max-height: 100% !important;
					}
				}

				.user_list {
					height: 100% !important;
				}

				.member_anchor {
					background-color: #f8f8f8 !important;
					border: none !important;
				}
			}
		}
	}
</style>