<template>
	<view>
		<view class="body">
			<view class="body_content">
				<view class="back"></view>
				<uni-nav-bar fixed statusBar background-color="transparent" :border="false" color="#ffffff"
					 right-icon="trash" @clickRight="setUp" :showMenuButtonWidth="true">
					<!-- 左侧插槽 -->
				 <template v-slot:left>
					<view class="custom_left">
						<view class="left_content">
							<image class="left_return" @click="back" src="/static/images/chat_return.png"
								mode="widthFix">
							</image>
							<view class="left_module">
								<image class="left_avatar" :src="state.avatar" mode="widthFix"></image>
								<view class="left_count" @click="tocohesion">
									<view class="left_dight faj">
										<image src="/static/images/intimacy_logo.png" mode="widthFix"></image>
										<text class="faj">{{ state.intimacy_level }}</text>
									</view>
								</view>
							</view>
							<view class="left_title">{{ state.nickname }}</view>
						</view>
					</view>
				</template>
				</uni-nav-bar>
				<MessageList @closeAllModal="closeAllModal" />
				<input-bar ref="inputRef" />
			</view>
			<!-- <view class="btn">
				<view class="textbox fa">
					<image class="textbox_voice" src="/static/images/chat_voiceA.png" mode="widthFix"></image>
					<view class="textbox_content fa f1">
						<input class="f1" placeholder="发消息，Ta 会给你回复" placeholder-class="textbox_input" />
						<image @click="sendGift" class="textbox_add" src="/static/images/chat_gift.png" mode="widthFix">
						</image>
					</view>
					<image class="textbox_keyboard" src="/static/images/chat_keyboard.png" mode="widthFix"></image>
				</view>
				<view class="btn_body fa sb">
					<view class="btn_content">
						<view class="btn_module">
							<image class="btn_image" src="/static/images/chat_a1.png" mode="widthFix"></image>
							<image class="btn_lock" src="/static/images/chat_lock.png" mode="widthFix"></image>
						</view>
						<view class="btn_title">照片</view>
					</view>
					<view class="btn_content">
						<view class="btn_module">
							<image class="btn_image" src="/static/images/chat_a5.png" mode="widthFix"></image>
							<image class="btn_lock" src="/static/images/chat_lock.png" mode="widthFix"></image>
						</view>
						<view class="btn_title">视频</view>
					</view>
					<view class="btn_content">
						<view class="btn_module">
							<image class="btn_image" src="/static/images/chat_a3.png" mode="widthFix"></image>
							<image class="btn_lock" src="/static/images/chat_lock.png" mode="widthFix"></image>
						</view>
						<view class="btn_title">语音</view>
					</view>
					<view class="btn_content">
						<view class="btn_module">
							<image class="btn_image" src="/static/images/chat_a4.png" mode="widthFix"></image>
							<image class="btn_lock" src="/static/images/chat_lock.png" mode="widthFix"></image>
						</view>
						<view class="btn_title">文件</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onUnmounted
} from 'vue';
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	FriendDelete
} from '@/utils/api.js';
// import notHave from '@/components/not-have.vue';
// import topSafety from '@/components/top-safety.vue';
import MessageList from '@/components/emChat/components/messageList';
import InputBar from '@/components/emChat/components/inputBar';
import { useConversationStore } from '@/stores/conversation';
const inputRef = ref(null);
const closeAllModal = () => inputRef.value?.closeAllModal();
const state = reactive({
	form: {
		friend_id: ''
	},
	intimacy_level: 0,
	avatar: '',
	nickname: '',
	friendData: {}
});

onLoad((options) => {
	state.friendData = JSON.parse(decodeURIComponent(options.item))
	state.form.friend_id = state.friendData.id
	state.intimacy_level = state.friendData.intimacy_level
	state.avatar = state.friendData.avatar
	state.nickname = state.friendData.nickname
})

const friendDelete = () => {
	FriendDelete(state.form).then(res => {
		if (res.code == 1) {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				position: 'top'
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 500);
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none',
				position: 'top'
			})
		}
	})
};

const back = () => {
	uni.redirectTo({
		url: '/pages/friends/index'
	});
};

const tocohesion = () => {
	uni.navigateTo({
		url: '/pages/friends/cohesion?friendData=' + encodeURIComponent(JSON.stringify(state.friendData))
	});
};

const setUp = () => {
	uni.showModal({
		title: '删除聊天',
		content: '确定要删除该好友吗？此操作不可恢复。',
		confirmText: '确定删除',
		cancelText: '取消',
		confirmColor: '#ff4444',
		success: (res) => {
			if (res.confirm) {
				console.log('用户确认删除');
				console.log(state.form.friend_id);
				friendDelete()
			} else if (res.cancel) {
				console.log('用户取消删除');
			}
		}
	});
};
const conversationStore = useConversationStore();
onUnmounted(() => {
	conversationStore.setChattingUserId('');
});
</script>

<style>
page {
	height: 100%;
	background: #F6F8FA;
}

.uni-navbar__header-btns-left{
	width: 100% !important;
}
/* .uni-navbar__header-btns-right.data-v-26544265 {
	padding-right: 200rpx !important;
} */
</style>

<style scoped>
.body {
	position: relative;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.back {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 436rpx;
	background: linear-gradient(180deg, #EAD6FF 0%, rgba(255, 255, 255, 0) 100%);
}

.custom_left {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	z-index: 10;
}

.left_content {
	position: relative;
	display: flex;
	align-items: center;
}

.left_return {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}

.left_module {
	position: relative;
	display: flex;
	align-items: center;
}

.left_avatar {
	width: 68rpx;
	height: 68rpx;
	display: block;
	border-radius: 100rpx;
}

.left_count {
	position: absolute;
	right: -20rpx;
	bottom: 0;
}

.left_count image {
	position: relative;
}

.left_dight {
	position: relative;
	width: 30rpx;
	height: 30rpx;
}

.left_dight image {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.left_dight text {
	position: relative;
	font-weight: 400;
	font-size: 20rpx;
	color: #FFFFFF;
	line-height: 50rpx;
}

.left_title {
	margin: 0 0 0 26rpx;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	line-height: 50rpx;
}

.body_content {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.list {
	flex: 1;
	position: relative;
	z-index: 2;
	padding: 20rpx 0;
	overflow-y: auto;
}

.message-list {
	padding: 20rpx;
}

.message-item {
	display: flex;
	margin-bottom: 30rpx;
}

.message-item.left {
	justify-content: flex-start;
}

.message-item.right {
	justify-content: flex-end;
}

.message-item .avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 100rpx;
	flex-shrink: 0;
}

.message-item.left .avatar {
	margin-right: 20rpx;
}

.message-item.right .avatar {
	margin-left: 20rpx;
}

.message-content {
	max-width: 70%;
}

.message-bubble {
	padding: 20rpx;
	border-radius: 10rpx;
	position: relative;
}

.message-item.left .message-bubble {
	background: #FFFFFF;
	color: #000000;
}

.message-item.right .message-bubble {
	background: #FFFFFF;
	color: #000000;
}

.message-text {
	font-size: 28rpx;
	line-height: 40rpx;
	word-break: break-all;
}

.grade {
	position: relative;
	margin: 35rpx 0 0 0;
}

.grade_content {
	position: relative;
	padding: 12rpx 0;
	width: 410rpx;
	background: linear-gradient(135deg, #BB93EB 0%, #CEA5FF 100%);
	border-radius: 16rpx;
}

.grade_name {
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	line-height: 50rpx;
}

.grade_iamgea {
	position: absolute;
	right: -10rpx;
	top: 10rpx;
	width: 25rpx;
	height: 25rpx;
}

.grade_iamgeb {
	position: absolute;
	left: 0;
	top: -10rpx;
	width: 25rpx;
	height: 25rpx;
}

.grade_iamgec {
	position: absolute;
	right: 0;
	top: -20rpx;
	width: 33rpx;
	height: 33rpx;
}

.clear {
	position: relative;
	margin: 35rpx 0 0 0;
}

.clear_title {
	padding: 12rpx 0;
	width: 410rpx;
	background: #EBEBEB;
	border-radius: 16rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #9E9E9E;
	line-height: 50rpx;
}

.btn {
	position: relative;
	background: #FFFFFF;
}

.textbox {
	position: relative;
	padding: 18rpx 30rpx 48rpx 30rpx;
	z-index: 2;
}

.textbox_voice {
	margin: 0 30rpx 0 0;
	width: 60rpx;
	height: 60rpx;
	display: block;
}

.textbox_content {
	position: relative;
	padding: 5rpx 25rpx;
	border-radius: 64rpx;
	background: #F6F6F6;
}

.textbox_content input {
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
	line-height: 36rpx;
}

.textbox_input {
	color: #C4C4C4;
}

.textbox_add {
	width: 74rpx;
	height: 74rpx;
	display: block;
}

.textbox_keyboard {
	margin: 0 0 0 30rpx;
	width: 60rpx;
	height: 60rpx;
	display: block;
}

.btn_body {
	position: relative;
	padding: 48rpx 50rpx 56rpx 50rpx;
	border-top: 1px solid #f0f0f0;
}

.btn_content {
	position: relative;
}

.btn_module {
	position: relative;
}

.btn_image {
	width: 88rpx;
	height: 88rpx;
	display: block;
}

.btn_lock {
	position: absolute;
	right: 0;
	top: 0;
	width: 32rpx;
	height: 24rpx;
}

.btn_title {
	margin: 5rpx 0 0 0;
	font-weight: 400;
	font-size: 28rpx;
	color: #222222;
	line-height: 50rpx;
	text-align: center;
}
/* .uni-navbar__header-btns-right {
	padding-right: var(--right-padding, 0);
} */
</style>