<template>
	<view class="pages-box">
		<uv-navbar autoBack  title="经营明细" placeholder bgColor="#fff" />
		<view class="setting-box">
			<view class="set-item">
				<text :class="['iconfont item-icon' , activeSet === 0 ? 'active-setting' : '']">&#xe633;</text>
				<view class="item-content">
					<view class="content-top">
						<text class="content-name">D+1打款</text>
						<text class="content-time">到账时间 7：00~8：00</text>
					</view>
					<text class="content-hint">前一个自然人收款金额，次日自动到账</text>
				</view>
			</view>
			<view class="set-item">
				<text :class="['iconfont item-icon' , activeSet === 1 ? 'active-setting' : '']">&#xe633;</text>
				<view class="item-content">
					<view class="content-top">
						<text class="content-name">D+1打款</text>
						<text class="content-time">到账时间 7：00~8：00</text>
					</view>
					<view class="select-content">
						<text class="select-left">打款时间</text>
						<text class="iconfont select-icon">&#xe671;</text>
					</view>
				</view>
			</view>
			<view class="set-item">
				<text :class="['iconfont item-icon' , activeSet === 2 ? 'active-setting' : '']">&#xe633;</text>
				<view class="item-content">
					<view class="content-top">
						<text class="content-name">实时到账</text>
					</view>
					<text class="content-hint">订单完成一逼，实时结算转账一笔。</text>
					<text class="content-hint">最低打款金额 10 元</text>
				</view>
			</view>
		</view>
		<view class="hint-content">
			<view class="headline-top">
				<HeadlineDecorate />
				<text class="headline-text">温馨提示</text>
				<HeadlineDecorate reversal />
			</view>
			<view class="text-box">
				<template v-for="(item,index) in hintContent">
					<view class="hint-item">
						{{index+1}}.{{item}}
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	const activeSet = ref(0);
	const hintContent = [
		'每笔结算需扣除手续费和银行转账手续费0.5元/笔',
		'最低结算金额不低于10元',
		'结算时间每天只能修改一次',
		'申请实时打款，17:00之后选择实时打款的选择，第二天执行，17:00之前选择实时打款的选项，当前可执行'
	]
</script>

<style lang="scss" scoped>
	$pad_lr: 30rpx;


	.pages-box {
		.setting-box {
			padding: $pad_lr;
			box-sizing: border-box;
		}

		.set-item {
			padding: 35rpx 24rpx 30rpx;
			box-sizing: border-box;
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			&:nth-child(n+2) {
				margin-top: 20rpx;
			}

			.item-icon {
				font-size: 44rpx;
				color: #CCCCCC;
			}

			.active-setting {
				color: #EB5153;
			}

			.item-content {
				transform: translateY(-5rpx);
				flex: 1;
				padding-left: 22rpx;

				.content-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 45rpx;
					color: #1a1a1a;

					.content-name {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
					}

					.content-time {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
					}
				}

				.content-hint {
					display: inline-block;
					padding-top: 15rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}

				.select-content {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 10rpx;

					.select-left {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						color: #1a1a1a;
						line-height: 36rpx;
					}

					.select-icon {
						font-size: 32rpx;
						color: #000000;
					}
				}

				// <view class="select-content">
				// 	<text class="select-left">打款时间</text>
				// 	<text class="iconfont select-icon">&#xe671;</text>
				// </view>
			}
		}


		.hint-content {
			width: 100%;
			min-height: 354rpx;
			background: linear-gradient(180deg, #fbe6e9, #ffffff 13%);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding: 33rpx 37rpx;
			box-sizing: border-box;

			.headline-top {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.headline-text {
					font-size: 36rpx;
					// font-family: .PingFang SC, .PingFang SC-Semibold;
					font-weight: 600;
					text-align: center;
					color: #1a1a1a;
					line-height: 50rpx;
					height: 50rpx;
					padding: 0 15rpx;
				}
			}

			.hint-item {
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #1a1a1a;
				line-height: 37rpx;
				padding-top: 10rpx;

				&:first-child {
					padding-top: 20rpx;
				}
			}
		}
	}
</style>