<template>
	<u-navbar @click="click" placeholder class="chating_header" bgColor="transparent">
		<view @click="routeBack" class="u-nav-slot" slot="left">
			<image class="back_icon" style="width: 12px; height: 20px;" src="/static/images/common_left_arrow.png"></image>
		</view>
		<view class="u-nav-slot" slot="center">
			<view class="chating_info" :class="{ chating_info_single: isSingle }">
				<view class="conversation_info">
					<view class="title">{{ storeCurrentConversation.showName }}</view>
					<view v-if="!isSingle && !isNotify" class="sub_title">{{ groupMemberCount }}
					</view>
				</view>
			</view>

		</view>
		<view class="u-nav-slot" slot="right">
			<view class="right_action">
				<u-icon @click="goSetting" class="action_item" name="more-dot-fill" size="23" color="#0C1C33">
				</u-icon>
			</view>
		</view>
	</u-navbar>
</template>

<script>
	import {mapGetters} from "vuex";
	import {SessionType} from "openim-uniapp-polyfill";
	import MyAvatar from "@/components/MyAvatar/index.vue";

	export default {
		name: "ChatingHeader",
		components: {
			MyAvatar,
		},
		props: {

		},
		data() {
			return {
				showMoreMember: false,
				joinLock: false,
			};
		},
		computed: {
			...mapGetters([
				"storeCurrentConversation",
				"storeCurrentGroup",
				"storeCurrentMemberInGroup",
				"storeSelfInfo",
			]),
			isSingle() {
				return (
					this.storeCurrentConversation.conversationType === SessionType.Single
				);
			},
			isNotify() {
				return (
					this.storeCurrentConversation.conversationType ===
					SessionType.Notification
				);
			},
			groupMemberCount() {
				return `(${this.storeCurrentGroup?.memberCount ?? 0})`;
			},
			canGoSetting() {
				if (this.isSingle) {
					return true;
				}
				return (
					this.storeCurrentMemberInGroup.groupID ===
					this.storeCurrentConversation.groupID
				);
			},
		},
		methods: {
			click(e) {
				this.$emit("click", e);
			},
			routeBack() {
				uni.switchTab({
					url: "/pages/conversation/conversationList/index",
				});
			},
			goSetting() {
				const url = this.isSingle ?
					"/pages/conversation/singleSettings/index" :
					"/pages/conversation/groupSettings/index";
				uni.navigateTo({
					url,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.chating_header {
		border: 2rpx solid #e1e1e1;

		::v-deep .u-navbar__content__left {
			padding: 0;
		}

		.back_icon {
			padding: 24rpx;
			margin-left: 20rpx;
		}

		.chating_info {
			@include vCenterBox();
			flex-direction: column;

			.conversation_info {
				flex-direction: row;
				justify-content: center;
				@include vCenterBox();
				
				.title {
					@include nomalEllipsis();
					max-width: 280rpx;
					font-weight: 500;
				}

				.sub_title {
					margin-left: 8rpx;
				}
			}

			.online_state {
				@include vCenterBox();
				flex-direction: row;
				margin-top: 6rpx;
				// position: absolute;
				// top: 2px;
				// left: 50%;
				// transform: translateX(-50%);
				font-size: 20rpx;
				color: #999;

				.dot {
					background-color: #10cc64;
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}

				.online_str {
					@include nomalEllipsis();
					max-width: 280rpx;
				}
			}
		}

		::v-deep .u-navbar__content__right {
			padding: 0;
		}

		.right_action {
			@include vCenterBox();
			flex-direction: row;
			margin-right: 24rpx;

			.action_item {
				padding: 12rpx;
			}

			.u-icon {
				margin-left: 12rpx;
			}
		}
	}
	
	.group_announcement_tab {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 80%;
		position: absolute;
		left: 6%;
		// bottom: -44px;
		margin-top: 40rpx;
		padding: 14rpx 32rpx;
		background-color: #f0f6ff;
		border-radius: 12rpx;

		.announcement_header {
			@include vCenterBox();
			width: 100%;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 16rpx;

			&_left {
				@include vCenterBox();
			}
		}

		.announcement_content {
			@include ellipsisWithLine(2);
			margin: 0 12rpx;
			font-size: 24rpx;
			color: #617183;
		}

		image {
			width: 16px;
			height: 16px;
			min-width: 16px;
		}
	}
	
	.group_calling_tab {
		position: absolute;
		left: 0;
		width: 80%;
		margin-top: 12px;
		margin-left: 5%;
		padding: 24rpx;
		background-color: #f4f9ff;
		border-radius: 8rpx;
		color: #5496eb;
		font-size: 24rpx;

		.base_row {
			display: flex;
			align-items: center;

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

			text {
				margin-left: 16rpx;
			}

			.arrow {
				width: 9px;
				height: 6px;
				position: absolute;
				right: 24rpx;
			}
		}

		.member_row {
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			padding: 24rpx 28rpx;
			margin-top: 24rpx;
			background-color: #fff;
			border-bottom: 1px solid rgba(151, 151, 151, 0.16);
			border-top-left-radius: 8rpx;
			border-top-right-radius: 8rpx;

			.u-avatar {
				margin-bottom: 16rpx;

				&:not(:nth-child(6n)) {
					margin-right: calc(6% / 2);
				}
			}
		}

		.action_row {
			display: flex;
			justify-content: center;
			padding: 24rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom-left-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
		}
	}
</style>