<template>
	<view class="container">
		<view class="main-info-container">
			<!-- 导航栏 placeholder -->
			<NavBar bgColor="transparent">
				<view class="nav-bar flex-align-center h100">
					<view class="left flex-align-center">
						<image src="/static/image/finance-management/search/search-left.png"></image>
					</view>
					<view class="nav-bar-search flex-align-center flex-1">
						<image class="search-icon" src="/static/image/bill/bill-list/search-black.png" mode=""></image>
						<input type="text" class="search-input flex-1" placeholder="小而美的基金" />
						<view class="line h100"></view>
						<view class="search-button">搜索</view>
					</view>
					<view class="right flex-align-center">
						<image src="/static/image/finance-management/search/search-right.png"></image>
					</view>
				</view>
			</NavBar>

			<view class="total-money-box flex-align-center flex-justify-between">
				<view class="revenue-box flex-1">
					<view class="total-money flex-align-center">
						<view class="total-money-title flex-align-center">
							<text>总资产(元)</text>
							<image class="eye-icon" src="/static/image/finance-management/eye.png"></image>
							<view class="flex-align-center" style="color: #A39797;font-size: 22rpx;">
								<image class="safe-icon" src="/static/image/finance-management/safe.png"></image>
								<text>免费升级保障</text>
							</view>
						</view>
						<view class="total-money-title flex-align-center">
							<text>昨日收益</text>
						</view>
					</view>
					<view class="total-money flex-align-center" style="margin-top: 10px;">
						<view class="total-money-value flex-align-center">
							<text>{{ financeInfo.totalMoney }}</text>
						</view>
						<view class="total-money-value flex-align-center">
							<text>{{ financeInfo.yesterdayIncome }}</text>
						</view>
					</view>
				</view>
				<view class="family-protection">
					<view class="total-money-title flex-align-center">
						<text>家庭保障</text>
					</view>
					<view class=" flex-align-end" style="margin-top: 10px;">
						<text class="value">{{ financeInfo.familyProtection }}</text>
						<text class="text">份</text>
					</view>
				</view>
			</view>

			<view class="arrow-box">
				<image class="arrow-icon" src="/static/image/finance-management/arrow-down.png"></image>
			</view>

			<view class="card-box flex-column">

				<view class="wealth-card-box flex">
					<!-- 占位图片设置为透明 -->
					<image class="wealth-card-opacity0" src="/static/image/finance-management/v1/bg.png"
						mode="widthFix" />
					<!-- 背景图片高度自适应 -->
					<image class="wealth-card" src="/static/image/finance-management/v1/bg.png" mode="widthFix" />

					<view class="card-info">
						<image class="logo" src="/static/image/finance-management/v1/logo.png" mode="scaleToFill" />
						<view class="name-box flex-align-center">
							<image class="card-holder-icon" src="/static/image/finance-management/v1/card-holder.png"
								mode="scaleToFill" />
							<view class="card-holder-name sacramento-font">{{ financeInfo.cardHolderName }}</view>
						</view>

					</view>
					<view class="enjoy-benefits flex-align-center">
						<text class="benefits-text">{{ financeInfo.benefitsText }}</text>
						<image class="arrow-icon" src="/static/image/finance-management/v1/arrow.png"></image>
					</view>

				</view>

				<view class="content-box"></view>
			</view>
		</view>

		<view class="content">
		</view>
	</view>
</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue'
import { ref, toRefs, reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

onLoad(() => {
	// 理财页面埋点
	// proxy.$apiUserEvent('all', {
	// 	type: 'click',
	// 	key: 'fortune',
	// 	value: "理财"
	// })
})

const data = reactive({
	financeInfo: {
		totalMoney: 100000000,
		yesterdayIncome: 22222,
		familyProtection: 1,
		benefitsText: '尊享礼遇18000元/年',
		cardHolderName: 'LiXing',
		vipLevel: 1,
	}
})

let { financeInfo } = toRefs(data)

</script>

<style>
@import "@/common/main.css";
</style>
<style lang="less" scoped>
.container {
	height: 100vh;
	background-color: #f5f5f5;
	overflow: hidden;
}

.main-info-container {
	background: linear-gradient(191deg, #0B1028 5.48%, #0B1028 30.26%, #18336C 60.18%, #18336C 100%);


	.nav-bar {
		padding: 20rpx;

		.left {
			image {
				height: 48rpx;
				width: 48rpx;
			}
		}

		.right {
			image {
				height: 36rpx;
				width: 36rpx;
			}
		}

		.nav-bar-search {
			background-color: #ffffff;
			border-radius: 300rpx;
			height: 56rpx;
			padding: 4px 0;
			margin: 0 26rpx 0 14rpx;

			.search-icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 4px;
				margin-right: 6px;
			}

			.search-input {
				font-size: 14px;
			}

			::v-deep .input-placeholder {
				color: #767676;
			}

			.line {
				width: 1px;
				background-color: #D8D8D8;
			}

			.search-button {
				font-size: 14px;
				padding: 0 12px;
				color: #8B634E;
				font-weight: 500;
			}
		}

	}

	.total-money-box {
		padding-top: 10rpx;
		padding-bottom: 6rpx;

		.revenue-box {
			padding: 0 24rpx;

			.total-money {
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
			}


			.total-money-value {
				color: #F1CFAB;
			}

		}

		.total-money-title {
			color: #A39797;

			.eye-icon {
				width: 44rpx;
				height: 44rpx;
				margin: 0 32rpx 0 20rpx;
			}

			.safe-icon {
				width: 24rpx;
				height: 24rpx;
				margin-right: 4rpx;
			}
		}

		.total-money-value {
			font-size: 50rpx;
			font-weight: 500;
			line-height: 64rpx;
		}

		.family-protection {
			display: flex;
			flex-direction: column;
			height: 100%;
			padding: 0 28rpx;
			border-left: 1rpx solid #172139;
			align-items: center;
			font-size: 24rpx;

			.value {
				color: #F1CFAB;
				font-size: 56rpx;
				font-weight: 500;
				line-height: 64rpx;
			}

			.text {
				color: #F1CFAB;
				font-size: 24rpx;
				margin-left: 8rpx;

			}
		}
	}

	.arrow-box {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 4rpx;

		.arrow-icon {
			width: 28rpx;
			height: 28rpx;
		}
	}

	.card-box {
		display: flex;
		flex-direction: column;

		.wealth-card-box {
			position: relative;

			.card-info {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				position: absolute;
				width: 100%;
				top: 12%;
				padding: 0 5%;

				.logo {
					width: 188rpx;
					height: 40rpx;
				}

				.name-box {
					display: flex;
					align-items: center;
				}

				.card-holder-icon {
					width: 68rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				.card-holder-name {
					color: #F1CFAB;
					font-size: 30rpx;
				}
			}

			.enjoy-benefits {
				position: absolute;
				bottom: 25%;
				right: 4%;

				.benefits-text {
					color: #F1CFAB;
					font-size: 24rpx;
				}

				.arrow-icon {
					width: 28rpx;
					height: 28rpx;
					margin-left: 6rpx;
				}
			}


		}

		.wealth-card-opacity0 {
			width: 100%;
			opacity: 0;
		}

		.wealth-card {
			position: absolute;
			width: 100%;
		}

		.content-box {
			margin-top: -1px;
			background-color: #ffffff;
			padding: 20rpx;
		}


	}
}

.content {
	padding: 20rpx;
}
</style>
