<template>
  <view class="pl-30 pr-30">
    <view class="wallet">
      <image
        src="/static/images/wallet-logo.png"
        mode="widthFix"
        class="image"
      />
      <view class="tag flex-center" @click="detail">
        <view class="fs-26" style="color: #fff; line-height: 58rpx"
          >钱包明细</view
        >
        <view style="margin-top: -8rpx; margin-left: 6rpx">
          <uni-icons type="right" size="10" color="#FFFFFF"></uni-icons>
        </view>
      </view>
      <view class="label">钱包余额</view>
      <view class="value mt-16">
        <text class="fs-40 lh-48 fw-500 mr-12">¥</text>
        <text class="fw-500" style="font-size: 60rpx; line-height: 72rpx">{{
          balance
        }}</text>
      </view>
    </view>
    <view class="pay">
      <view class="title">充值金额</view>
      <view class="flex-wrap">
        <view
          :class="[
            'option',
            'flex-center',
            `option-${index === payOption && !payValue ? 'active' : ''}`,
          ]"
          v-for="(item, index) in payOptions"
          :key="index"
          @click="changeOption(index)"
        >
          {{ item }}
        </view>
      </view>
      <view class="title">自定义金额</view>
      <style-input
        :value="payValue > 0 ? payValue : ''"
        title="金额"
        type="digit"
        @input="input"
      />
    </view>
  </view>

  <style-bottom-view>
    <view class="pl-30 pr-30 pb-20">
      <style-button type="primary" @click="confirm">充值</style-button>
    </view>
  </style-bottom-view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { fetchProfile, insertMoney } from "../../api/user";
import { onLoad } from "@dcloudio/uni-app";
const balance = ref(0);
const payOption = ref(1);
const payOptions = ref([50, 100, 200, 500, 1000]);
const payValue = ref(0);
const input = (e: any) => {
  payValue.value = e.value;
};
const changeOption = (index: number) => {
  payValue.value = 0;
  payOption.value = index;
};
const detail = () => {
  uni.navigateTo({
    url: "/pages-user/wallet-detail/wallet-detail",
  });
};
const confirm = () => {
  if (payValue.value && !/^[0-9]*(\.\d{1,2})?$/.test(`${payValue.value}`)) {
    uni.showModal({
      title: "温馨提示",
      content: "请输入正确的金额",
      showCancel: false,
      confirmColor: "#347DFF",
    });
    return;
  }
  const params = payValue.value
    ? Number(payValue.value)
    : payOptions.value[payOption.value];
  if (params > 10000 || params <= 0) {
    uni.showModal({
      title: "温馨提示",
      content: "每次最大充值金额10000，请修改金额",
      showCancel: false,
      confirmColor: "#347DFF",
    });
    return;
  }
  insertMoney(params)
    .then(() => {
      uni.showToast({
        title: "已支付",
        icon: "success",
      });
      fetchProfile().then((res) => {
        payValue.value = 0;
        balance.value = Number((Number(res.balance) / 100).toFixed(2))
      });
    })
    .catch((err) => {
      if (/cancel/.test(err.errMsg)) {
        return;
      }
      uni.showModal({
        content: `${err.errMsg},请重试`,
      });
    });
};
onLoad(() => {
  const user = getApp<any>().globalData.user;
  if (user) {
    balance.value = user.balance;
  }
});
</script>

<style lang="scss">
.wallet {
  height: 220rpx;
  background: linear-gradient(180deg, #347dff 0%, #4faaff 100%);
  box-shadow: 0px 12rpx 22rpx rgba(13, 21, 62, 0.1);
  border-radius: 40rpx;
  position: relative;
  margin-top: 100rpx;
  padding: 44rpx 40rpx;

  .image {
    position: absolute;
    width: 148rpx;
    right: 40rpx;
    top: -60rpx;
  }

  .label {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
  }

  .value {
    color: #fff;
  }

  .tag {
    position: absolute;
    width: 170rpx;
    height: 58rpx;
    right: 0;
    bottom: 0;
    background: var(--color-primary);
    border-radius: 29rpx 0 29rpx 0;
  }
}

.pay {
  padding-top: 20rpx;
  .title {
    font-weight: 500;
    font-size: 32rpx;
    color: #000;
    padding-bottom: 30rpx;
    padding-top: 40rpx;
  }

  .option {
    width: 214rpx;
    height: 82rpx;
    background: var(--color-sec);
    border-radius: 10rpx;
    margin-left: 20rpx;
    margin-bottom: 20rpx;
    &:nth-child(3n + 1) {
      margin-left: 0;
    }
  }
  .option-active {
    background-color: var(--color-primary);
    color: #fff;
  }
}
</style>
