<template>
  <view class="wallet_page">
    <view
      class="login_header_back_btn"
      :style="`padding-top:${capsuleRect.top}px;height:${capsuleRect.height}px;line-height:${capsuleRect.height}px;`"
    >
      <view
        class="btn_back"
        :style="`height:${capsuleRect.height}px;width:${capsuleRect.height}px;`"
        @click="handleBack"
      >
        <uni-icons type="left" size="20"></uni-icons>
      </view>
    </view>
    <hs-custom-title title="我的钱包" />
    <view class="wallet_header">
      <view class="title"> 我的余额(元) </view>
      <view class="balance"> 0.00 </view>
      <view class="house_info" @click="goToPage('/ME/advance_payment_house/index')">
        <view class="ok_house_number"> 已开通预缴房屋数：0户 </view>
        <view class="manage_house_btn">
          管理预缴房屋 <uni-icons type="right" color="#999" size="12"></uni-icons>
        </view>
      </view>

      <view class="footer">
        <view class="btn">
          <hs-button
            label="充值记录"
            type="display"
            @click="goToPage('/ME/recharge_record/index')"
            size="md"
          />
        </view>
        <view class="btn">
          <hs-button
            label="充值"
            type="primary"
            size="md"
            @click="goToPage('/ME/recharge/index')"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const capsuleRect = ref<any>({})

const handleBack = () => {
  uni.navigateBack({
    delta: 1
  })
}

const goToPage = (url: string) => {
  uni.navigateTo({ url: url })
}

onLoad(() => {
  capsuleRect.value = uni.getMenuButtonBoundingClientRect()
})
</script>

<style lang="scss">
@import './style.scss';
</style>
