<template>
  <!-- 充值 -->
  <view>
    <u-navbar leftIconColor="#fff" :placeholder="true" title="会员中心" bgColor="#1D1E24" :autoBack="true"></u-navbar>
    <view class="blackBg">
      <view class="topBox">
        <image class="bg" src="/static/mineIc/vipBg.png" mode=""></image>
        <view class="tipBox">
          <view class="balanceBox">
            <view class="tip">余额(元)</view>
            <view class="balance flexA">
              <text>￥</text>
              <view class="balances">{{ balance }}</view>
            </view>
          </view>
          <view class="photo flexA">
            <!-- <image src="/static/logo.png" mode=""></image>
						<text>哈哈</text> -->
            <open-data type="userAvatarUrl" class="avatar"></open-data>

            <open-data type="userNickName" class="nickname"></open-data>
          </view>
        </view>
      </view>
    </view>
    <view class="packageBox">
      <view class="title flexA">
        金额
        <input type="number" v-model="money" placeholder-class="ples" placeholder="(自定义)" />
      </view>
      <view class="package">
        <view class="item flexV" @click="checkPackage(item, index)" :class="cur == index ? 'check' : ''" v-for="(item, index) in packageList" :key="item.id">
          <view class="recharge">冲{{ item.money }}</view>
          <view class="deliver">送{{ item.discount }}</view>
        </view>
      </view>
    </view>
    <view class="line"></view>
    <view class="desc">
      <view class="descTitle">使用说明</view>
    </view>
    <view class="btnBox iosAuto">
      <view class="btn flexC" @click="rechargeBtn">立即支付</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getPackage, getRecharge, getyue } from '@/api/'
onShow(() => {
  getPackages() //充值套餐
  getyues() //我的余额
})
let packageList = ref([]) //套餐数组
let money = ref('') //自定义金额
let cur = ref(0) //当前选择套餐
let balance = ref(0) //余额
const checkPackage = (item, index) => {
  cur.value = index
}
// 立即支付按钮
const rechargeBtn = () => {
  let packageMoney = packageList.value[cur.value].money
  getRecharges(money.value == '' ? packageMoney : money.value)
}
const { proxy } = getCurrentInstance()
// 充值
const getRecharges = async money => {
  try {
    const res = await getRecharge(money)
    proxy.$methods.pay(res)
    console.log('getRecharge', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getRecharge', err)
  }
}
// 充值套餐
const getPackages = async () => {
  try {
    const res = await getPackage()
    packageList.value = res
    console.log('getPackage', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getPackage', err)
  }
}
// 我的余额
const getyues = async () => {
  try {
    const res = await getyue()
    balance.value = res.money
    uni.setStorageSync('balance', res.money)
    console.log('getyue', res)
    // 保存数据
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
    console.log('getyue', err)
  }
}
</script>

<style lang="scss">
.u-navbar__content__title {
  color: #fff !important;
  font-size: 32rpx;
  font-weight: 700;
}

.blackBg {
  width: 100%;
  height: 278rpx;
  background: #1d1e24;
  padding: 32rpx 24rpx 0;
  box-sizing: border-box;

  .topBox {
    position: relative;
    width: 100%;

    .bg {
      width: 100%;
      height: 325rpx;
    }
  }

  .tipBox {
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 0;
    left: 32rpx;
    width: 640rpx;
    box-sizing: border-box;

    .balanceBox {
      .tip {
        margin-top: 96rpx;
        color: #000000ff;
        font-size: 24rpx;
      }

      .balance {
        margin-top: 12rpx;

        text {
          font-size: 32rpx;
          font-weight: 700;
          margin-top: 30rpx;
        }

        .balances {
          font-size: 80rpx;
          font-weight: 700;
        }
      }
    }

    .photo {
      height: 40rpx;
      color: #000000e6;
      font-size: 24rpx;
      margin-top: 28rpx;

      .avatar {
        border-radius: 50%;
        width: 40rpx;
        height: 40rpx;
        margin-right: 8rpx;
      }
    }
  }
}

.packageBox {
  position: relative;
  width: 100%;
  opacity: 1;
  background: #ffffffff;
  padding: 40rpx 20rpx 38rpx;
  box-sizing: border-box;

  .title {
    color: #000000e6;
    font-size: 30rpx;
    font-weight: 700;
    margin-bottom: 44rpx;

    input {
      margin-left: 16rpx;
      color: #000000e6;
      font-size: 30rpx;
      font-weight: 700;
    }
  }

  .package {
    margin: 0 auto;
    width: 638rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
      padding: 40rpx 0;
      width: 262rpx;
      margin-bottom: 24rpx;
      background: #f9f9f9ff;
      border-radius: 24rpx;
      border: 2rpx solid #f9f9f9ff;

      .recharge {
        color: #361e0dff;
        font-size: 40rpx;
        font-weight: 700;
        margin-bottom: 14rpx;
      }

      .deliver {
        color: #000000ff;
        font-size: 32rpx;
        font-weight: 700;
      }
    }

    .check {
      width: 262rpx;
      border-radius: 24rpx;
      border: 2rpx solid #ddb674ff;
      background: #fdf8eeff !important;
    }
  }
}

.line {
  width: 100%;
  height: 24rpx;
  background: #f5f7fb;
}

.desc {
  width: 100%;
  padding: 24rpx 20rpx;
  box-sizing: border-box;
  background: #fff;

  .descTitle {
    color: #000000e6;
    font-size: 30rpx;
    font-weight: 700;
    margin-bottom: 24rpx;
  }
}

.btnBox {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #fff;

  .btn {
    margin: 15rpx auto 0;
    width: 702rpx;
    height: 88rpx;
    border-radius: 16rpx;
    color: #ffffffff;
    font-size: 32rpx;
    font-weight: 700;
    background: linear-gradient(139deg, #fb753cff 0%, #fb3e3cff 100%);
  }
}
</style>