<template>
  <pb-layout navbar="normal" class="withdraw-wrap" leftIcon="leftIcon" title="提现" :bgStyle="bgStyle">
    <view class="alert ss-m-x-40 ss-m-y-20">
      提现至
    </view>
    <view class="method ss-m-x-40 ss-flex ss-col-center ss-row-between">
      <view class="left ss-flex ss-gap-20 ss-col-center">
        <view class="cicon-weixin" style="color:#2f9326;font-size: 60rpx"></view>
        <view class="info">
          <view class="label">其选择提现方式</view>
          <view class="note ss-m-t-10">立即到账</view>
        </view>
      </view>
      <view class="cicon-angle m-t-40"></view>
    </view>
    <view class="detail ss-m-40 ss-p-30">
      <view class="label ss-m-b-50">提现金额</view>
      <view class="account ss-m-t-135 ss-m-b-20 ss-flex ss-row-between">
        <uni-easyinput :styles="{ backgroundColor: 'transparent' }" :clearable="false" :inputBorder="false"
          type="number" trim="all" placeholder="请输入提现金额" />
        <view class="all self-end">全部提现</view>
      </view>
      <view class="note ss-flex ss-row-between">
        <view class="last">
          剩余额度￥{{ state.last }}
        </view>
        <view class="can-use">
          可用额度￥{{ state.canUse }}
        </view>
      </view>
    </view>

    <view class="footer-box">
      <button class="ss-reset-button draw-btn ui-Shadow-Main" @tap="onSubmit">提现</button>
    </view>

  </pb-layout>
</template>

<script setup>
import { ref } from 'vue'

const bgStyle = {
  backgroundColor: '#fff',
  description: '',
}

const state = ref({
  last: 1000,
  canUse: 10000
})
</script>

<style lang="scss" scoped>
.withdraw-wrap {
  .alert {
    font-size: 26rpx;
  }

  .method {
    .left {
      .info {
        font-size: 26rpx;

        .note {
          color: #b5b5b5
        }
      }
    }
  }

  .detail {
    background-color: rgba(236, 236, 236, .3);
    border-radius: 20rpx;

    .label {
      color: #000;
      font-size: 26rpx;
    }

    .account {

      :deep(.uni-easyinput__content-input) {
        font-size: 28px;
      }

      .all {
        width: 150rpx;
        text-align: right;
        color: var(--ui-BG-Main);
        font-size: 26rpx;
      }
    }

    .account::before {
      content: '￥';
      font-size: 48rpx;
      color: #333
    }

    .note {
      color: #a3a3a3;
      font-size: 26rpx;
    }


  }

  .footer-box {
    position: absolute;
    padding: 0 40rpx;
    width: calc(100% - 80rpx);
    bottom: 60rpx;

    .draw-btn {
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      color: $white;
    }
  }
}
</style>