<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'>￥1</text>
      </view>
    </view>

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

const rechargeItems = ref([
  {
    title: '100元',
    price: 100
  },
  {
    title: '200元',
    price: 200
  },
  {
    title: '500元',
    price: 500
  }, {
    title: '1000元',
    price: 1000
  }]);
const currentIndex = ref<number>(0);

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>
