<template>
  <cwg-page-wrapper>
    <view class="page">
      <view class="success-icon-wrap">
        <img src="/static/images/vector.png" alt="" />
      </view>
      <view class="amount">{{ transactionInfo?.amount || 0 }}
        {{ transactionInfo?.receivedCurrency || "USD" }}</view>
      <view class="detail-card">
        <view class="detail-row one">
          <text class="label">{{ t("card.Form.f53") }}</text>
          <text v-if="transactionInfo?.approveStatus" class=""
            :class="[statusClass1(transactionInfo?.approveStatus)]">{{ statusMap1[transactionInfo?.approveStatus]
            }}</text>
        </view>
        <view class="detail-row one">
          <text class="label">{{ t("card.Form.f54") }}</text>
          <text v-if="transactionInfo?.status" class="" :class="[statusClass(transactionInfo?.status)]">{{
            statusMap[transactionInfo?.status] }}</text>
        </view>
        <view class="detail-row">
          <text class="label">{{ t("recharge-record-detail.p7") }}</text>
          <text class="value">{{
            transactionInfo?.merchantOrderNo || "--"
          }}</text>
        </view>
        <view class="detail-row">
          <text class="label">{{ t("recharge-record-detail.p8") }}</text>
          <text class="value">{{ transactionInfo?.cardNumber || "--" }}</text>
        </view>
        <view class="detail-row">
          <text class="label">{{ t("card.Form.f30") }}</text>
          <text class="value">{{ transactionInfo?.fee || 0 }} USD</text>
        </view>
        <view class="detail-row">
          <text class="label">{{ t("recharge-record-detail.p12") }}</text>
          <text class="value">
            {{ transactionInfo?.addTime }}
          </text>
        </view>
      </view>
      <view class="fixed-btn">
        <view class="cwg-button">
          <u-button type="primary" block @click="
            () => {
              router.back();
            }
          ">
            {{ t("recharge-record-detail.b1") }}
          </u-button>
        </view>
      </view>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import { showToast } from "@/utils/toast";
import { onLoad } from '@dcloudio/uni-app'
import useRouter from "@/hooks/useRouter";
import { useI18n } from "vue-i18n";
import { ucardApi } from "@/api/ucard";

const router = useRouter();
const merchantOrderNo = ref("");
const { t } = useI18n();
onLoad((options) => {
  merchantOrderNo.value = options.merchantOrderNo

})

const transactionInfo = ref<TransactionInfo | null>(null);
async function getTransactionInfo() {
  const res = await ucardApi.ucardRechargeOrder({
    merchantOrderNo: merchantOrderNo.value,
  });
  transactionInfo.value = res.data;
}

function statusClass(status: string) {
  switch (status) {
    case "success":
      return "status-default status-success";
    case "fail":
      return "status-default status-error";
    default:
      return "status-default";
  }
}
const statusMap = {
  success: t("card.Status.t1"),
  fail: t("card.Status.t2"),
  processing: t("card.Status.t3"),
  wait_process: t("card.Status.t3"),
};
function statusClass1(status: string) {
  switch (status) {
    case 2:
      return "status-default status-success";
    case 3:
      return "status-default status-error";
    default:
      return "status-default";
  }
}
const statusMap1 = {
  2: t("card.Status.t14"),
  3: t("card.Status.t15"),
  1: t("card.Status.t13"),
};
onMounted(() => {
  getTransactionInfo();
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.success-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-icon {
  display: block;
}

.detail-card {
  border-radius: px2rpx(12);
  background: #fff;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.07);
  display: flex;
  padding: px2rpx(44) px2rpx(31) px2rpx(28) px2rpx(31);
  flex-direction: column;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: px2rpx(31) 0;
  font-size: px2rpx(31);
}

.detail-row:last-child {
  border-bottom: none;
}

.label {
  color: #8e8a8a;
  font-family: Roboto;
  font-size: px2rpx(14);
  font-style: normal;
  font-weight: 600;
  line-height: px2rpx(20);
  letter-spacing: px2rpx(0.14);
}

.value {
  color: #000;

  text-align: right;
  /* Title2 */
  font-family: Roboto;
  font-size: px2rpx(14);
  font-style: normal;
  font-weight: 600;
  line-height: px2rpx(20);
  letter-spacing: px2rpx(0.14);
}

.value.success {
  padding: px2rpx(4) px2rpx(8);
  border-radius: px2rpx(30);
  background: rgba(76, 175, 80, 0.2);
  color: #4caf50;
  font-family: Roboto;
  font-size: px2rpx(12);
  font-style: normal;
  font-weight: 600;
  line-height: px2rpx(31);
  letter-spacing: px2rpx(0.06);
}

.value.processing {
  padding: px2rpx(4) px2rpx(8);
  border-radius: px2rpx(30);
  background: rgba(0, 157, 235, 0.2);
  color: #009deb;
  font-family: Roboto;
  font-size: px2rpx(12);
  font-style: normal;
  font-weight: 600;
  line-height: px2rpx(31);
  letter-spacing: px2rpx(0.06);
}

.amount {
  color: #1a1a1a;
  text-align: center;
  font-family: Roboto;
  font-size: px2rpx(22);
  font-style: normal;
  font-weight: 600;
  line-height: px2rpx(28);
  margin: px2rpx(12) 0 px2rpx(62) 0;
}

.one {
  border-bottom: 1px dashed #beb6b6;
}
</style>
