<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="page">{
	"layout": "tabbar",
	"style": {
		"navigationStyle": "custom"
	}
}</route>
<template>
	<view>
		<view>
			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent;" :height="navbarHeight">
				<template #left>
					<view class="h-48rpx flex items-center" @click="storeRecharge.back">
						<wd-img width="48rpx" height="48rpx" :src="`${OSS}icon/icon_arrow_left.png`" class="mt-6rpx"></wd-img>
						<view class="text-[#303133] text-36rpx ml-24rpx leading-48rpx">充值</view>
					</view>
				</template>
			</wd-navbar>
		</view>

        <view class="mt-34rpx mx-70rpx flex items-center">
            <view class="font-400 text-30rpx text-[#303133] leading-42rpx">转入方式</view>
            <view class="flex-1 ml-72rpx flex items-center">
                <wd-img width="52rpx" height="52rpx" :src="`${OSS}icon/icon_weichat.png`"></wd-img>
                <view class="ml-18rpx text-[#303133] text-32rpx leading-44rpx fon-bold">微信</view>
            </view>
        </view>

        <view class="bg-white mt-26rpx rounded-16rpx px-38rpx py-28rpx mx-32rpx">
            <view class="text-28rpx font-400 text-[#303133] leading-40rpx">转入金额</view>
            <view class="mt-44rpx flex items-center">
                <view class="text-[#303133] text-36rpx font-400 leading-50rpx">￥</view>
                <wd-input v-model="rechargeMoney" inputmode="decimal" size="large" placeholder="请输入金额" required no-border placeholderStyle="font-size: 48rpx; color: #c9c9c9;"></wd-input>
            </view>
        </view>

        <view class="text-28rpx font-400 text-[#303133] leading-40rpx mx-70rpx mt-38rpx">推广方式</view>

        <view class="bg-white mt-28rpx rounded-16rpx px-38rpx mx-32rpx h-150rpx flex items-center">
            <view class="text-[#303133] text-30rpx font-bold leading-42rpx">门店推广</view>
            <view class="flex-1 bg-[#F8F9FA] text-[#9CA3AF] rounded-8rpx ml-28rpx h-80rpx leading-80rpx rounded-8rpx pl-28rpx">上海浦东新区茶室店铺</view>
        </view>

        <view @click="storeRecharge.handleRecharge" class="fixed left-0 right-0 bottom-0 z-50 mx-60rpx flex items-center justify-center bg-[#4C9F44] rounded-8rpx text-[#fff] text-30rpx font-bold" :style="{ height: '90rpx', bottom: 'calc(env(safe-area-inset-bottom) + 26rpx)', opacity: canRecharge ? 1 : 0.5 }">
            确定转入
        </view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { getNavBarHeight } from '@/utils/index'

	let navbarHeight = ref<number>(0)
	let OSS = inject('OSS')
    let rechargeMoney = ref<string>('')
    let canRecharge = ref<boolean>(false)

	onLoad(() => {
		navbarHeight.value = getNavBarHeight()
	})

    const storeRecharge = {
        back: () => {       
            uni.navigateBack({
                delta: 1,
            })
        },

        handleRecharge: () => {
            if (rechargeMoney.value) {
                // 这里可以添加充值逻辑
                uni.showToast({
                    title: '充值成功',
                    icon: 'success'
                })
                storeRecharge.back()
            } else {
                uni.showToast({
                    title: '请输入充值金额',
                    icon: 'none'
                })
            }
        }
    }  
</script>

<style lang="scss">
	page {
		background-color: #F6F7F8;
	}
</style>
