<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">亲密度等级{{ getBobbiesList.level ? getBobbiesList.level : 0 }}级</view>
					<image class="user_avatar"
						:src="loverBasicList.image_url ? loverBasicList.image_url : '/static/images/avatar.png'"
						mode="aspectFill"></image>
					<view class="user_content faj">
						<image
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/961f20f64150521c08d00889e45d44bd.png"
							mode="widthFix"></image>
						<view class="user_number faj">{{ getBobbiesList.level ? getBobbiesList.level : 0 }}</view>
					</view>
				</view>
				<view class="module fa">
					<view class="module_contentA faj">
						<image
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/9c05cdd001973d7ccba80067a1942a9a.png">
						</image>
						<view class="module_module faj fc">
							<view class="module_number">10</view>
							<view class="module_title">日记</view>
						</view>
					</view>
					<view class="module_contentB faj">
						<image
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/59ac97bf010703b8ecdcf57deb52b468.png">
						</image>
						<view class="module_module faj fc">
							<view class="module_number">10</view>
							<view class="module_title">聊天</view>
						</view>
					</view>
					<view class="module_contentC faj">
						<image
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/59ac97bf010703b8ecdcf57deb52b468.png">
						</image>
						<view class="module_module faj fc">
							<view class="module_number">20</view>
							<view class="module_title">礼物</view>
						</view>
					</view>
					<view class="module_contentD faj">
						<image
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/24d05a683e41e5492d4afeb0338dfa1f.png">
						</image>
						<view class="module_module faj fc">
							<view class="module_number">10</view>
							<view class="module_title">语音通话</view>
						</view>
					</view>
					<view class="module_contentE faj">
						<image
							src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/59ac97bf010703b8ecdcf57deb52b468.png">
						</image>
						<view class="module_module faj fc">
							<view class="module_number">5</view>
							<view class="module_title">照片</view>
						</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">{{ getBobbiesList.level ? getBobbiesList.level : 0 }}</view>
							<view class="list_progress">
								<view class="list_plan fa"><text>{{ getBobbiesList.intimacy ? getBobbiesList.intimacy :
									0 }}</text>/{{ getBobbiesList.next_level_intimacy ?
											getBobbiesList.next_level_intimacy : 0 }}</view>
								<!-- <view class="list_line" :style="{ width: getBobbiesList.next_level_intimacy + 'px' }">
									<text
										:style="{ width: (getBobbiesList.next_level_intimacy * getBobbiesList.intimacy_percent) + 'px' }"></text>
								</view> -->
								<view class="list_line">
									<text :style="{ width: calculateProgressWidth() + 'rpx' }"></text>
								</view>
								<!--用用户接口获取 next_level_intimacy//总亲密度,intimacy当前的,intimacy_percent百分比,还有等级level -->
							</view>
						</view>
						<view class="list_module fa">
							<view class="list_item fa">
								<view class="list_heart faj">
									<image
										:src="getBobbiesList.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="getBobbiesList.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="getBobbiesList.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="getBobbiesList.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="getBobbiesList.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="getBobbiesList.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>
							<!-- 根据等级level来点亮 -->
						</view>
						<view class="list_detail">
							<view class="list_all" v-for="(item, index) in getLevelListInfo" :key="index">
								<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" @click="toChat(item.buttton)">
												去聊天</view>
											<view class="list_btn faj" v-if="index == 1" @click="toChat(item.buttton)">
												去语音</view>
											<view class="list_btn faj" v-if="index == 2" @click="toChat(item.buttton)">
												去体验</view>
											<view class="list_btn faj" v-if="index == 3" @click="toChat(item.buttton)">
												去体验</view>
											<view class="list_btn faj" v-if="index == 4" @click="toChat(item.buttton)">
												去体验</view>
											<view class="list_btn faj" v-if="index == 5" @click="todiary(item.buttton)">
												去体验</view>
											<!--getLevelListInfo接口 根据buttton是否为true判断是否可以点击 -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import {
	GetLevelList,
	GetUserBasic
} from '@/utils/api.js'
import notHave from '@/components/not-have.vue';
import topSafety from '@/components/top-safety.vue';
export default {
	components: {
		notHave,
		topSafety,
	},
	data() {
		return {
			getLevelListInfo: [],
			myavatar: '',
			getBobbiesList: {},
			loverBasicList: uni.getStorageSync('loverBasicList'),
			getMenuInfoList: '',
		}
	},
	onLoad() {
		this.getLevelList()
		this.getUserBasic()
		const userinfo = uni.getStorageSync('userinfo');
		if (userinfo) {
			this.myavatar = userinfo.avatar;
		}
	},
	onShow() {
        // #ifdef MP-WEIXIN
		this.getMenuInfo()
		// #endif
	},
	methods: {
		getLevelList() {
			GetLevelList().then(res => {
				if (res.code == 1) {
					this.getLevelListInfo = res.data
					console.log(this.getLevelListInfo)
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		getUserBasic() {
			GetUserBasic({}).then(res => {
				if (res.code == 1) {
					this.getBobbiesList = res.data
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						position: 'top'
					})
				}
			})
		},
		calculateProgressWidth() {
			if (this.getBobbiesList.intimacy == null || this.getBobbiesList.next_level_intimacy == null) {
				return 0;
			}
			// 根据比例计算实际宽度，确保不超过最大宽度500rpx
			const actualWidth = (this.getBobbiesList.intimacy / this.getBobbiesList.next_level_intimacy) * 500;
			const result = Math.min(actualWidth, 500);

			// 打印计算过程和结果
			console.log('最终结果:', result); // 应该打印 125

			return result;
		},
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		help() {
			uni.navigateTo({
				url: '/pages/index/ties'
			});
		},
		todiary(buttton) {
			console.log(buttton)
			if (buttton) {
				uni.navigateTo({
					url: '/pages/chat/diary'
				});
			} else {
				uni.showToast({
					title: '等级不足',
					icon: 'none',
					position: 'top'
				})
			}
		},
		toChat(buttton) {
			if (buttton) {
				uni.navigateTo({
					url: '/pages/chat/index'
				});
			} else {
				uni.showToast({
					title: '等级不足',
					icon: 'none',
					position: 'top'
				})
			}
		},
		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: 150rpx 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: -110rpx;
	margin: 0 auto;
}

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

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

.module {
	position: relative;
	padding: 0 20rpx;
}

.module_contentA {
	position: relative;
	margin: 74rpx 0 0 0;
	width: 156rpx;
	height: 156rpx;
}

.module_contentA image {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

.module_contentB {
	position: relative;
	width: 132rpx;
	height: 132rpx;
}

.module_contentB image {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

.module_contentC {
	position: relative;
	margin: 102rpx 0 0 0;
	width: 132rpx;
	height: 132rpx;
}

.module_contentC image {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

.module_contentD {
	position: relative;
	width: 186rpx;
	height: 186rpx;
}

.module_contentD image {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

.module_contentE {
	position: relative;
	margin: 112rpx 0 0 0;
	width: 132rpx;
	height: 132rpx;
}

.module_contentE image {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
}

.module_module {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.module_number {
	font-weight: 700;
	font-size: 40rpx;
	color: #F17CC7;
	line-height: 30rpx;
}

.module_title {
	margin: 10rpx 0 0 0;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFA0DD;
	line-height: 30rpx;
}

.list {
	position: relative;
	margin: 10rpx 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 {
	font-weight: 500;
	font-size: 30rpx;
	color: #222222;
	line-height: 50rpx;
	width: 350rpx;
}

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

.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>