<template>
  <uv-navbar title="专属优惠充值" bgColor="#C6171E" leftIconColor="#FFFFFF" :titleStyle="{ color: '#FFFFFF' }" :autoBack="true" :placeholder="true"></uv-navbar>
  <view class="container">
    <!-- 加载中 -->
    <view v-if="state.loading" class="loading-wrap">
      <uv-loading-icon text="加载中..."></uv-loading-icon>
    </view>

    <!-- 活动不存在或已过期 -->
    <view v-else-if="!state.promotion" class="empty-wrap">
      <uv-empty text="活动不存在或已过期" icon="error" mode="list"></uv-empty>
    </view>

    <!-- 活动详情 -->
    <view v-else class="promotion-card">
      <view class="promotion-title">{{ state.promotion.title }}</view>
      <view class="promotion-amounts">
        <view class="amount-block recharge">
          <text class="amount-label">充值金额</text>
          <text class="amount-value">¥{{ fmtAmount(state.promotion.rechargeAmount) }}</text>
        </view>
        <view class="amount-divider">
          <uv-icon name="plus" size="20" color="#999"></uv-icon>
        </view>
        <view class="amount-block grants">
          <text class="amount-label">赠送金额</text>
          <view class="gift-value">
            <uv-icon name="gift" size="18"></uv-icon>
            <text class="amount-value gift">+¥{{ fmtAmount(state.promotion.grantsAmount) }}</text>
          </view>
        </view>
      </view>

      <view class="promotion-meta">
        <view class="meta-item">
          <text class="meta-label">有效期</text>
          <text class="meta-text">{{ state.promotion.startTime }} ~ {{ state.promotion.endTime }}</text>
        </view>
        <view class="meta-item">
          <text class="meta-label">到账金额</text>
          <text class="meta-text highlight">¥{{ fmtAmount(state.promotion.rechargeAmount + state.promotion.grantsAmount) }}</text>
        </view>
      </view>
    </view>

    <view class="pay-area" v-if="state.promotion">
      <uv-button
        type="primary"
        shape="circle"
        iconColor="#FFFFFF"
        color="#C6171E"
        text="立即充值"
        :loading="paying"
        :disabled="paying"
        @click="debounceConfirm"
      ></uv-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { debounce } from "@/utils/common";
import { get } from "@/utils/https";

const initState = () => ({
  loading: true,
  promotion: null as any,
  promotionToken: "",
});

const state = reactive(initState());
const paying = ref(false);

onLoad((options: any) => {
  if (options.promotionToken) {
    state.promotionToken = options.promotionToken;
    loadPromotionInfo();
  } else {
    state.loading = false;
  }
});

const fmtAmount = (fen: number) => {
  if (!fen) return "0.00";
  return (fen / 100).toFixed(2);
};

const loadPromotionInfo = () => {
  state.loading = true;
  get("/common/promotionInfo", { token: state.promotionToken })
    .then((res: any) => {
      state.promotion = res;
      state.loading = false;
    })
    .catch(() => {
      state.loading = false;
    });
};

const debounceConfirm = debounce(() => {
  confirm();
}, 500);

const confirm = () => {
  if (!state.promotion) return;

  paying.value = true;
  uni.showLoading({ title: "支付中..." });

  const homeStationId = getApp<any>().globalData.user?.stationId;
  const params: any = { promotionToken: state.promotionToken };
  if (homeStationId) {
    params.stationId = homeStationId;
  }
  get("/payment/promotionPay", params)
    .then((res: any) => {
      // #ifdef MP-WEIXIN
      wx.requestPayment({
        timeStamp: `${res.timeStamp}`,
        nonceStr: res.nonceStr,
        package: res.packageVal,
        signType: res.signType,
        paySign: res.paySign,
        success: () => {
          uni.showToast({ title: "充值完成", icon: "success" });
          getApp<any>().globalData.refresh = true;
          setTimeout(() => {
            uni.switchTab({ url: "/pages/user/index" });
          }, 500);
        },
        fail: () => {
          uni.hideLoading();
          uni.showToast({ title: "支付取消", icon: "none" });
        },
      });
      // #endif
      // #ifndef MP-WEIXIN
      uni.hideLoading();
      uni.showToast({ title: "目前仅支持微信支付", icon: "none" });
      // #endif
    })
    .catch(() => {
      uni.hideLoading();
      uni.showToast({ title: "网络异常，请重试", icon: "none" });
    })
    .finally(() => {
      paying.value = false;
    });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx 30rpx;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: $uni-bg-color-page;
  box-sizing: border-box;
}

.loading-wrap {
  display: flex;
  justify-content: center;
  padding-top: 200rpx;
}

.empty-wrap {
  padding-top: 200rpx;
}

// 活动卡片
.promotion-card {
  background-color: $uni-bg-color-card;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 48rpx;
}

.promotion-title {
  font-size: 32rpx;
  font-weight: $uni-font-weight-bold;
  color: $uni-text-color;
  text-align: center;
  margin-bottom: 36rpx;
}

.promotion-amounts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24rpx;
  margin-bottom: 36rpx;
}

.amount-block {
  text-align: center;
  padding: 24rpx;
  border-radius: 12rpx;
  background-color: $uni-bg-color-page;
  min-width: 180rpx;

  .amount-label {
    font-size: 24rpx;
    color: $uni-text-color-secondary;
    margin-bottom: 8rpx;
    display: block;
  }

  .amount-value {
    font-size: 40rpx;
    font-weight: $uni-font-weight-bold;
    color: $uni-text-color;

    &.gift {
      color: $uni-color-primary;
    }
  }
}

.amount-divider {
  padding-top: 20rpx;
}

.gift-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rpx;
  color: $uni-color-primary;
}

.promotion-meta {
  border-top: 1rpx solid $uni-border-color-light;
  padding-top: 28rpx;

  .meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8rpx 0;

    .meta-label {
      font-size: 26rpx;
      color: $uni-text-color-secondary;
    }

    .meta-text {
      font-size: 26rpx;
      color: $uni-text-color;

      &.highlight {
        font-size: 32rpx;
        font-weight: $uni-font-weight-bold;
        color: $uni-color-primary;
      }
    }
  }
}

.pay-area {
  width: calc(100vw - 60rpx);
  position: fixed;
  bottom: 40rpx;
  bottom: calc(40rpx + constant(safe-area-inset-bottom));
  bottom: calc(40rpx + env(safe-area-inset-bottom));
  left: 30rpx;
}
</style>
