<template>
	<view class="page fc">
		<uni-nav-bar fixed statusBar left-icon="left" background-color="transparent" :border="false" @clickLeft="back"
			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="list">
					<image class="list_back"
						src="https://nvlovers.oss-cn-qingdao.aliyuncs.com/uploads/20251226/2bfd31d1dda5e6cef31ed4793197c3dd.png"
						mode="widthFix"></image>
					<view class="list_all">
						<view class="list_content">
							<view class="list_today">今日亲密度</view>
							<view class="list_head">
								<view class="list_dight">
									{{ getBobbiesList.bond_today ? getBobbiesList.bond_today : 0 }}<text>/{{
										getBobbiesList.bond_today_all ? getBobbiesList.bond_today_all : 0 }}</text>
								</view>
								<view class="list_progress fa">
									<view class="list_progress_item"
										:style="{ width: calculateTotalProgressWidth() + '%' }">
									</view>
								</view>
								<!--用用户接口获取 next_level_intimacy//总亲密度,intimacy当前的,intimacy_percent百分比,还有等级level -->
							</view>
						</view>
						<view class="list_module">
							<view class="list_detail" v-for="(item, index) in getBondList" :key="index">
								<image class="list_backA" src="/static/images/ties_backA.png" mode="widthFix"></image>
								<view class="list_body">
									<view class="list_chat fa">
										<view class="list_contribute">{{ item.name ? item.name : '' }}</view>
										<view class="list_number fa">
											<text>{{ item.intimacy_day ? item.intimacy_day : 0 }}</text>/{{ item.upper ?
												item.upper : 100 }}牵绊
										</view>
									</view>
									<view class="list_text h2">{{ item.title ? item.title : '' }}</view>
									<view class="list_bottom fa">
										<view class="list_left">
											<view class="list_item">
												<view class="list_line"
													:style="{ width: calculateProgressWidth(item.intimacy_day, item.upper) + 'rpx' }">
												</view>
												<image
													:style="{ 'margin-left': calculateProgressWidth(item.intimacy_day, item.upper) + 'rpx' }"
													src="/static/images/intimacy_logo.png" mode="widthFix"></image>
												<view class="list_double faj">
													<!-- <text>3倍</text> -->
												</view>
												<!-- intimacy_percentd百分比 -->
											</view>
											<view class="list_wheel fa sb" v-if="index == 0">
												<text>0轮</text>
												<text>{{ item.upper }}轮</text>
											</view>
											<view class="list_wheel fa sb" v-if="index == 1">
												<text>0分钟</text>
												<text>{{ item.upper }}分钟</text>
											</view>
											<view class="list_wheel fa sb" v-if="index == 2 || index == 3">
												<text>0次</text>
												<text>{{ item.upper }}次</text>
											</view>
										</view>
										<view class="list_right faj" v-if="item.type == 1" @click="toChat(item.id)">去聊天
										</view>
										<view class="list_right faj" v-if="item.type == 2" @click="toChat(item.id)">去语音
										</view>
										<view class="list_right faj" v-if="item.type == 3" @click="toChat(item.id)">去赠送
										</view>
										<view class="list_right faj" v-if="item.type == 4" @click="toChat(item.id)">去互动
										</view>
										<!-- 根据get_bond的type来判断显示不同的 -->
									</view>
								</view>
							</view>
							<!-- <view class="list_detail">
								<image class="list_backA" src="/static/images/ties_backA.png" mode="widthFix"></image>
								<view class="list_body">
									<view class="list_chat fa">
										<view class="list_contribute">语音通话</view>
										<view class="list_number fa"><text>0/</text>200牵绊</view>
									</view>
									<view class="list_text h2">每语音通话1分钟，可获得5亲密度</view>
									<view class="list_bottom fa">
										<view class="list_left">
											<view class="list_item">
												<view class="list_line"></view>
												<image src="/static/images/intimacy_logo.png" mode="widthFix"></image>
												<view class="list_double faj">
													<text>3倍</text>
												</view>
											</view>
											<view class="list_wheel fa sb">
												<text>0分钟</text>
												<text>50分钟</text>
												<text>10分钟</text>
											</view>
										</view>
										<view class="list_right faj">去语音</view>
									</view>
								</view>
							</view>
							<view class="list_detail">
								<image class="list_backA" src="/static/images/ties_backA.png" mode="widthFix"></image>
								<view class="list_body">
									<view class="list_chat fa">
										<view class="list_contribute">赠送礼物</view>
										<view class="list_number fa"><text>0/</text>200牵绊</view>
									</view>
									<view class="list_text h2">赠送别人礼物，手有余香</view>
									<view class="list_bottom fa">
										<view class="list_left">
											<view class="list_item">
												<view class="list_line"></view>
												<image src="/static/images/intimacy_logo.png" mode="widthFix"></image>
												<view class="list_double faj">
													<text>3倍</text>
												</view>
											</view>
											<view class="list_wheel fa sb">
												<text>0次</text>
												<text>1次</text>
												<text>2次</text>
											</view>
										</view>
										<view class="list_right faj" @click="togift">去赠送</view>
									</view>
								</view>
							</view>
							<view class="list_detail">
								<image class="list_backA" src="/static/images/ties_backA.png" mode="widthFix"></image>
								<view class="list_body">
									<view class="list_chat fa">
										<view class="list_contribute">互动贡献</view>
										<view class="list_number fa"><text>0/</text>200牵绊</view>
									</view>
									<view class="list_text h2">和别人互动，手有余香</view>
									<view class="list_bottom fa">
										<view class="list_left">
											<view class="list_item">
												<view class="list_line"></view>
												<image src="/static/images/intimacy_logo.png" mode="widthFix"></image>
												<view class="list_double faj">
													<text>3倍</text>
												</view>
											</view>
											<view class="list_wheel fa sb">
												<text>0次</text>
												<text>1次</text>
												<text>2次</text>
											</view>
										</view>
										<view class="list_right faj">去互动</view>
									</view>
								</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import {
	GetBond,
	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 {
			getBondList: [],
			getBobbiesList: {},
			getMenuInfoList: '',
		}
	},
	onLoad() {
		this.getBond()
		this.getUserBasic()
	},
	methods: {
		getBond() {
			GetBond(this.form).then(res => {
				if (res.code == 1) {
					this.getBondList = res.data
					console.log(this.getBondList)
				} 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'
					})
				}
			})
		},
		calculateTotalProgressWidth() {
			if (this.getBobbiesList.bond_today_all === 0) {
				return 0;
			}
			// 计算总进度百分比，最大为100%
			const progress = (this.getBobbiesList.bond_today / this.getBobbiesList.bond_today_all) * 100;
			const result = Math.min(progress, 100);

			console.log('总进度宽度:', result);
			return result;
		},
		calculateProgressWidth(intimacy, upper) {
			// console.log('计算进度宽度 - 当前值:', intimacy, '最大值:', upper)
			if (intimacy == null || upper == null || upper === 0) {
				return 0;
			}
			// 根据比例计算实际宽度，确保不超过最大宽度450rpx
			const actualWidth = (intimacy / upper) * 450;
			const result = Math.min(actualWidth, 450);

			// console.log('最终结果:', result);

			return result;
		},
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
		togift() {
			uni.navigateTo({
				url: '/pages/index/gift'
			});
		},
		toChat(id) {
			console.log(id)
			if (id >= 1 && id <= 4) {
				if (this.getBobbiesList.level >= id) {
					uni.navigateTo({
						url: '/pages/chat/index'
					});
				} else {
					uni.showToast({
						title: '等级不足',
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
	}
}
</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;
}

.list {
	position: relative;
}

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

.list_all {
	position: relative;
	padding: 54rpx 40rpx;
}

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

.list_today {
	font-weight: 500;
	font-size: 36rpx;
	color: #FF51B3;
	line-height: 50rpx;
}

.list_head {
	position: relative;
	margin: 24rpx 0 0 0;
}

.list_dight {
	margin: 0 0 0 74rpx;
	font-weight: 700;
	font-size: 56rpx;
	color: #FF51B3;
	line-height: 50rpx;
}

.list_dight text {
	font-size: 36rpx;
	color: #FFBCE2;
}

.list_progress {
	position: relative;
	margin: 18rpx 0 0 0;
	width: 100%;
	height: 8rpx;
	background: #FFDDF0;
	clip-path: polygon(1% 0%, 100% 0%, 99% 100%, 0% 100%);
}

.list_progress_item {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(90deg, #8D48FE 0%, #EC2E99 100%);
	clip-path: polygon(1% 0%, 100% 0%, 99% 100%, 0% 100%);
}

.list_module {
	position: relative;
	margin: 34rpx 0 0 0;
}

.list_detail {
	position: relative;
	margin: 0 0 50rpx 0;
}

.list_backA {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: block;
}

.list_body {
	position: relative;
	padding: 18rpx 36rpx;
}

.list_chat {
	position: relative;
}

.list_contribute {
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
}

.list_number {
	position: relative;
	margin: 0 0 0 120rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #909090;
	line-height: 50rpx;
}

.list_number text {
	color: #FF51B3;
}

.list_text {
	margin: 25rpx 0 0 0;
	height: 100rpx;
	font-weight: 500;
	font-size: 28rpx;
	color: #8C8C8C;
	line-height: 50rpx;
}

.list_bottom {
	position: relative;
	margin: 90rpx 0 0 0;
}

.list_left {
	position: relative;
}

.list_item {
	position: relative;
	width: 450rpx;
	height: 6rpx;
	background: #FFE7F5;
	border-radius: 8rpx;
}

.list_line {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto 0;
	width: 230rpx;
	height: 6rpx;
	background: #FF51B3;
	border-radius: 8rpx;
}

.list_item image {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 44rpx;
	height: 44rpx;
}

.list_double {
	position: absolute;
	left: 0;
	right: 0;
	top: -60rpx;
	margin: 0 auto;
}

.list_double text {
	padding: 0 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #FFFFFF;
	line-height: 34rpx;
	background: #F25BB0;
	border-radius: 6rpx;
}

.list_double text::after {
	content: '';
	position: absolute;
	bottom: -4rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 12rpx;
	height: 12rpx;
	background: #F25BB0;
	border-radius: 0 0 4rpx 0;
	transform: translateX(-50%) rotate(45deg);
}

.list_wheel {
	position: relative;
	margin: 15rpx 0 0 0;
}

.list_wheel text {
	font-weight: 500;
	font-size: 30rpx;
	color: #333333;
	line-height: 50rpx;
}

.list_right {
	position: relative;
	margin: -62rpx 0 0 50rpx;
	padding: 4rpx 22rpx;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	line-height: 50rpx;
	background: #F661B5;
	border-radius: 12rpx;
	flex-shrink: 0;
}


</style>