<template>
  <view class='content'>
    <view class='balance-view'>
      <image :src='assetsUrl("bg_member_recharge.png")' />
      <view class='balance-content'>
        <text>累计余额（元）</text>
        <text>￥1</text>
      </view>
      <view class='balance-content'>
        <text>当前余额（元）</text>
        <text class='accent-text-color'>￥{{ userInfo.balance }}</text>
      </view>
    </view>

    <view class='recharge-option-card'>
      <text>充值金额</text>
      <tabbar :titles='rechargeItems?.map(res=>res.rechargeamount)' @change='change' />
      <view class='divider' />
      <view class='option-item'>
        <image :src='assetsUrl("bg_member_recharge_item.png")' />
        <text>充值{{ rechargeItems[currentIndex].rechargeamount }}送{{ rechargeItems[currentIndex].rewardamount }}元</text>
        <text class='accent-text-color'>
          实得{{ rechargeItems[currentIndex].rechargeamount + (rechargeItems[currentIndex].rewardamount) }}元
        </text>
      </view>
    </view>

    <view class='bottom-button-view'>
      <button class='primary-button'>充值</button>
    </view>
  </view>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { useUserStore } from '@/store';
import { getRechargeList } from '@/api/user';

const store = useUserStore();
const { userInfo } = storeToRefs(store);

const rechargeItems = ref([]);
const currentIndex = ref<number>(0);

onLoad(async () => {
  const { rechargetype, ruleitems } = await getRechargeList();
  rechargeItems.value = ruleitems;
});

const change = (index: number) => {
  currentIndex.value = index;
};
</script>

<style lang='scss' scoped>
.balance-view {
  display: flex;
  flex-direction: row;
  height: 280rpx;
  position: relative;

  image {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .balance-content {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    align-items: center;
    justify-content: center;

    color: white;

    text:nth-of-type(1) {
      font-size: 30rpx;
    }

    text:nth-of-type(2) {
      font-size: 40rpx;
      margin-top: 10rpx;
    }
  }
}

.recharge-option-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 30rpx 30rpx 0 0;
  position: relative;
  margin-top: -25rpx;

  text:nth-of-type(1) {
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
    margin-top: 20rpx;
    margin-left: 30rpx;
    margin-bottom: 20rpx;
  }

  .option-item {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 36rpx 20rpx;

    image {
      width: 100%;
      height: 167rpx;
      border-radius: 20rpx;
    }

    text:nth-of-type(1) {
      font-size: 36rpx;
      color: #FFFFFF;
      margin-top: 27rpx;
      margin-left: 30rpx;
      position: absolute;
    }

    text:nth-of-type(2) {
      display: flex;
      font-size: 30rpx;
      margin-top: 85rpx;
      margin-left: 30rpx;
      align-items: center;
      justify-content: center;
      width: 185rpx;
      height: 50rpx;
      background: #FFFFFF;
      border-radius: 25rpx;
      position: absolute;
    }
  }
}
</style>
