<template>
	<view class="page fc">
		<uni-nav-bar fixed statusBar left-icon="left" right-icon="help" background-color="transparent" :border="false"
			:style="{ '--right-padding': getMenuInfoList + 'px' }" @clickLeft="back" @clickRight="help"
			title="亲密度"></uni-nav-bar>
		<view class="back"></view>
		<scroll-view scroll-y="true" class="scroll-view f1" show-scrollbar>
			<image class="logo"
				src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/22d88b56e12259070e204f98c81f6adf.png"
				mode="widthFix"></image>
			<view class="body">
				<view class="user faj">
					<image class="user_avatar" :src="myavatar ? myavatar : '/static/images/avatar.png'"
						mode="aspectFill"></image>
					<view class="user_title">亲密度等级{{ friendData.intimacy_level ? friendData.intimacy_level :
						'0' }}级
					</view>
					<image class="user_avatar"
						:src="friendData.avatar ? friendData.avatar : '/static/images/avatar.png'"
						mode="aspectFill"></image>
					<view class="user_content faj">
						<image
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/67a9cb232b0d8405963078900eca32ab.png"
							mode="widthFix"></image>
						<view class="user_number faj">
							{{ friendData.intimacy_level ? friendData.intimacy_level : '0' }}</view>
					</view>
				</view>
				<view class="list">
					<image class="list_back"
						src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/506198f54b1b616aa950275e5523888c.png"></image>
					<view class="list_content">
						<view class="list_head fa">
							<view class="list_grade faj">
								{{ friendData.intimacy_level ? friendData.intimacy_level : '0' }}</view>
							<view class="list_progress">
								<view class="list_plan fa"><text>{{ friendData.intimacy ? friendData.intimacy : '0'
								}}</text>/{{ nextLevelIntimacy }}</view>
								<view class="list_line">
									<text :style="{ width: calculateProgressWidth() + 'rpx' }"></text>
								</view>
							</view>
							<!-- intimacy_level等级
							intimacy总亲密度
							在列表中根据去下一等级的根据等级从列表获取 -->
						</view>
						<view class="list_module fa">
							<view class="list_item fa">
								<view class="list_heart faj">
									<image
										:src="friendData.intimacy_level >= 0 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
										mode="widthFix"></image>
									<view class="list_dight faj">0</view>
								</view>
								<view class="list_ellipsis"></view>
							</view>
							<view class="list_item fa">
								<view class="list_heart faj">
									<image
										:src="friendData.intimacy_level >= 1 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
										mode="widthFix"></image>
									<view class="list_dight faj">1</view>
								</view>
								<view class="list_ellipsis"></view>
							</view>
							<view class="list_item fa">
								<view class="list_heart faj">
									<image
										:src="friendData.intimacy_level >= 2 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
										mode="widthFix"></image>
									<view class="list_dight faj">2</view>
								</view>
								<view class="list_ellipsis"></view>
							</view>
							<view class="list_item fa">
								<view class="list_heart faj">
									<image
										:src="friendData.intimacy_level >= 3 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
										mode="widthFix"></image>
									<view class="list_dight faj">3</view>
								</view>
								<view class="list_ellipsis"></view>
							</view>
							<view class="list_item fa">
								<view class="list_heart faj">
									<image
										:src="friendData.intimacy_level >= 4 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
										mode="widthFix"></image>
									<view class="list_dight faj">4</view>
								</view>
								<view class="list_ellipsis"></view>
							</view>
							<view class="list_item fa">
								<view class="list_heart faj">
									<image
										:src="friendData.intimacy_level >= 5 ? '/static/images/intimacy_logo.png' : '/static/images/intimacy_logoA.png'"
										mode="widthFix"></image>
									<view class="list_dight faj">5</view>
								</view>
								<!-- <view class="list_ellipsis"></view> -->
							</view>
						</view>
						<view class="list_detail">
							<view class="list_all" v-for="(item, index) in intimacyConfigListsInfo" :key="index"
								v-show="item.level <= friendData.intimacy_level" @click="goback()">
								<view class="list_table fa sb">
									<view class="list_greade fa f1">
										<view class="list_picture">
											<view class="list_ellipsiss"></view>
											<view class="list_rating faj">Lv.{{ item.level ? item.level : '' }}</view>
											<image :src="item.image ? item.image : '/static/images/intimacy_b1.png'"
												mode="widthFix"></image>
										</view>
										<view class="list_text f1 fa">
											<view class="list_text_content f1">
												<view class="list_title h1">{{ item.name ? item.name : '' }}</view>
												<view class="list_name h1">{{ item.title ? item.title : '' }}</view>
											</view>
											<view class="list_btn faj" v-if="index == 0">去聊天</view>
											<view class="list_btn faj" v-if="index == 1">去语音</view>
											<view class="list_btn faj" v-if="index >1">去体验</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import {
	IntimacyConfigLists,
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
import { userInfo } from 'node:os';
export default {
	components: {
		notHave,
		topSafety,
	},
	data() {
		return {
			intimacyConfigListsInfo: [],
			friendData: {},
			myavatar: '',
			nextLevelIntimacy: 999,
			getMenuInfoList: ''
		}
	},
	onLoad(options) {
		this.friendData = JSON.parse(decodeURIComponent(options.friendData))
		const userinfo = uni.getStorageSync('userinfo');
		if (userinfo) {
			this.myavatar = userinfo.avatar;
		}
		this.intimacyConfigLists()
	},
	onShow() {
        // #ifdef MP-WEIXIN
		this.getMenuInfo()
		// #endif
	},
	methods: {
		goback() {
			uni.navigateBack({
				delta: 1,
			});
		},
		intimacyConfigLists() {
			IntimacyConfigLists().then(res => {
				if (res.code == 1) {
					this.intimacyConfigListsInfo = res.data
					for (let i = 0; i < this.intimacyConfigListsInfo.length; i++) {
						if (this.intimacyConfigListsInfo[i].level == this.friendData.intimacy_level + 1) {
							this.nextLevelIntimacy = this.intimacyConfigListsInfo[i].intimacy
						}
					}
					console.log(this.nextLevelIntimacy)
					console.log('测试数据:', this.friendData.intimacy);
					console.log('测试数据:', this.nextLevelIntimacy);
					console.log('测试计算宽度:', this.calculateProgressWidth());
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		calculateProgressWidth() {
			if (this.friendData.intimacy == null || this.nextLevelIntimacy == null) {
				return 0;
			}
			// 根据比例计算实际宽度，确保不超过最大宽度500rpx
			const actualWidth = (this.friendData.intimacy / this.nextLevelIntimacy) * 500;
			const result = Math.min(actualWidth, 500);

			// 打印计算过程和结果
			console.log('当前亲密度:', this.friendData.intimacy); // 应该打印 50
			console.log('下一等级所需亲密度:', this.nextLevelIntimacy); // 应该打印 200
			console.log('计算比例:', this.friendData.intimacy / this.nextLevelIntimacy); // 应该打印 0.25
			console.log('计算宽度:', actualWidth); // 应该打印 125
			console.log('最终结果:', result); // 应该打印 125

			return result;
		},
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		help() {
			uni.navigateTo({
				url: '/pages/friends/dayCohesion?id=' + this.friendData.friend.id
			});
		},
		todiary() {
			uni.navigateTo({
				url: '/pages/chat/diary'
			});
		},
		getMenuInfo() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const systemInfo = uni.getSystemInfoSync();

			console.log('胶囊信息:', menuButtonInfo);

			// 胶囊宽度
			const capsuleWidth = menuButtonInfo.width;

			// 胶囊距离右侧的距离 = 屏幕宽度 - 胶囊右边界的x坐标
			const distanceFromRight = systemInfo.windowWidth - menuButtonInfo.right;

			console.log('胶囊宽度:', capsuleWidth);
			console.log('胶囊距离右侧的距离:', distanceFromRight);

			this.getMenuInfoList = capsuleWidth + distanceFromRight;

			return {
				width: capsuleWidth,
				distanceFromRight: distanceFromRight,
				menuButtonInfo: menuButtonInfo
			};
		},
	}
}
</script>
<style>
page {
	background: #F6F8FA;
}
</style>
<style>
.page {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.scroll-view {
	overflow: hidden;
}

.body {
	position: relative;
}

.back {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 1624rpx;
	background: linear-gradient(180deg, #FFE3E9 0%, #FAF0F8 100%);
}

.logo {
	position: absolute;
	left: 0;
	right: 0;
	top: -40rpx;
	margin: 0 auto;
	width: 635rpx;
	display: block;
}

.body {
	position: relative;
	margin: 40rpx 0 0 0;
}

.user {
	position: relative;
	margin: 200rpx 0 0 0;
}

.user_avatar {
	width: 120rpx;
	height: 120rpx;
	display: block;
	border-radius: 100rpx;
}

.user_title {
	margin: 0 30rpx;
	padding: 0 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: linear-gradient(180deg, #F55C7F 0%, #FE4EC0 100%);
	border-radius: 210rpx;
}

.user_content {
	position: absolute;
	left: 0;
	right: 0;
	top: -180rpx;
	margin: 0 auto;
}

.user_content image {
	position: relative;
	width: 175rpx;
	height: 160rpx;
	display: block;
}

.user_number {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	font-size: 55rpx;
	color: #FFFFFF;
	line-height: 50rpx;
}

.list {
	position: relative;
	margin: 52rpx 0 0 0;
}

.list_back {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
}

.list_content {
	position: relative;
	padding: 50rpx 40rpx;
}

.list_head {
	position: relative;
	padding: 0 0 0 30rpx;
}

.list_grade {
	position: relative;
	padding: 18rpx 25rpx;
	font-weight: 700;
	font-size: 60rpx;
	color: #F366B7;
	line-height: 50rpx;
	background: linear-gradient(155deg, rgba(245, 217, 255, 0.24) 0%, rgba(255, 144, 207, 0.5) 100%, rgba(255, 144, 207, 0.5) 100%);
	border: 2rpx solid #FFFFFF;
	border-radius: 100rpx;
}

.list_progress {
	position: relative;
	margin: 0 0 0 26rpx;
}

.list_plan {
	position: relative;
	margin: 0 0 0 38rpx;
	font-weight: 700;
	font-size: 28rpx;
	color: #F7588F;
	line-height: 50rpx;
}

.list_plan text {
	font-size: 36rpx;
}

.list_line {
	position: relative;
	margin: 12rpx 0 0 0;
	width: 500rpx;
	height: 4rpx;
	background: #FFD9F1;
}

.list_line text {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 80rpx;
	height: 4rpx;
	background: #F7588F;
}

.list_module {
	position: relative;
	margin: 62rpx 0 0 20rpx;
}

.list_item {
	position: relative;
}

.list_heart {
	position: relative;
	width: 56rpx;
	height: 56rpx;
}

.list_heart image {
	width: 100%;
	height: 100%;
}

.list_dight {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 30rpx;
}

.list_ellipsis {
	position: relative;
	width: 55rpx;
	height: 20rpx;
	background-image: radial-gradient(circle, #ccc 3rpx, transparent 3rpx);
	background-size: 21% 100%;
	background-repeat: repeat-x;
}

.list_detail {
	position: relative;
}

.list_all {
	position: relative;
	margin: 20rpx 0 0 0;
}

.list_ellipsiss {
	position: absolute;
	left: 0;
	right: 0;
	top: -160rpx;
	width: 20rpx;
	height: 70rpx;
	background-image: radial-gradient(circle, #F661B5 2rpx, transparent 2rpx);
	background-size: 100% 15%;
	background-repeat: repeat-y;
	margin: 0 auto;
}

.list_rating {
	position: absolute;
	left: 0;
	right: 0;
	top: -70rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #FF6DC5;
	line-height: 50rpx;
	margin: 0 auto;
}

.list_table {
	position: relative;
	margin: 18rpx 0 0 0;
}

.list_greade {
	position: relative;
	margin: 164rpx 0 0 0;
}

.list_picture {
	position: relative;
}

.list_picture image {
	width: 96rpx;
	height: 96rpx;
	display: block;
	flex-shrink: 0;
	border-radius: 100rpx;
}

.list_text {
	position: relative;
	margin: 0 0 0 18rpx;
	overflow: hidden;
}

.list_text_content {
	position: relative;
	overflow: hidden;
}

.list_title {
	width: 350rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_name {
	width: 350rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #909090;
	line-height: 50rpx;
}

.list_btn {
	padding: 4rpx 35rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: #F661B5;
	border-radius: 12rpx;
}

.uni-navbar__header-btns {
	padding-right: var(--right-padding, 0);
}

.uni-navbar__header-btns-right.data-v-26544265 {
	width: 60rpx !important;
}
</style>