<template>
  <mobile-sub-layout :title="$t('withdraw.title')" :lineHeight="4">
    <view class="withdraw-wait-page">
      <view
        class="withdraw-wait-page-top"
      >
        <view class="padding-image">
          <theme-image
            src="@/static/wallet/icon-pending.png"
            mode="scaleToFill"
            class="padding-image-size"
          />
        </view>
        <view
          class="tip-text"
          :style="{
            color: themeStore.theme.account.bankCard.text.tipsColor,
          }"
          >{{ t("withdraw.waitPage.tipTetx") }}</view
        >
      </view>
      <view class="withdraw-wait-page-center">
        <view
          class="withdraw-wait-page-center-item m-bottom"
          :style="{ background: themeStore.theme.lightBgColor }"
        >
          <text :style="{ color: themeStore.theme.text.subtitle }"
            >{{ $t("withdraw.configPopup.orderNumber") }}: </text
          >
					<view class="flex-acenter">
						<text :style="{ color: themeStore.theme.text.normal }">{{
							withdrawInfo.orderNumber
						}}</text>
						<theme-image
							@click.stop="handleCopyClick(withdrawInfo.orderNumber)"
							src="@/static/icon-copy.png"
							mode="aspectFit"
							style="width: 30rpx; height: 30rpx; margin-left: 8rpx;"
						/>
					</view>
        </view>
        <view
          class="withdraw-wait-page-center-bg m-bottom"
          :style="{ background: themeStore.theme.lightBgColor }"
        >
          <view
            class="withdraw-wait-page-center-item"
            :style="{ background: themeStore.theme.lightBgColor }"
          >
            <text :style="{ color: themeStore.theme.text.subtitle }"
              >{{ $t("withdraw.configPopup.withdrawAmount") }}：</text
            >
            <text :style="{ color: themeStore.theme.text.normal }">{{
              withdrawInfo.withdrawAmount
            }}</text>
          </view>
          <view
            class="withdraw-wait-page-center-item"
            :style="{ background: themeStore.theme.lightBgColor }"
          >
            <text :style="{ color: themeStore.theme.text.subtitle }"
              >{{ $t("withdraw.configPopup.total") }}：</text
            >
            <text :style="{ color: themeStore.theme.text.normal }">{{
              withdrawInfo.withdrawAmount
            }}</text>
          </view>
          <view
            class="withdraw-wait-page-center-item"
            :style="{ background: themeStore.theme.lightBgColor }"
          >
            <text :style="{ color: themeStore.theme.text.subtitle }"
              >{{ $t("withdraw.configPopup.serviceCharege") }}：</text
            >
            <text :style="{ color: themeStore.theme.text.normal }">{{
              withdrawInfo.serviceCharege
            }}</text> </view
          ><view
            class="withdraw-wait-page-center-item"
            :style="{ background: themeStore.theme.lightBgColor }"
          >
            <text :style="{ color: themeStore.theme.text.subtitle }"
              >{{ $t("withdraw.configPopup.arrivalAmount") }}：</text
            >
            <text :style="{ color: themeStore.theme.text.normal }">{{
              withdrawInfo.arrivalAmount
            }}</text>
          </view>
        </view>
        <view
          class="withdraw-wait-page-center-item m-bottom"
          :style="{ background: themeStore.theme.lightBgColor }"
        >
          <text :style="{ color: themeStore.theme.text.subtitle }"
            >{{ $t("withdraw.configPopup.yourBankAccount") }}：</text
          >
          <text :style="{ color: themeStore.theme.text.normal }">{{
            withdrawInfo.bankCard
          }}</text>
        </view>
      </view>

      <view
        class="btn-bg"
        :style="{
          background: themeStore.theme.account.bankCard.btnBlockBgColor,
        }"
      >
        <view
          class="btn"
          :style="{
            background: themeStore.theme.button.normal,
            color: themeStore.theme.button.textNormal,
          }"
          @click="goToAccountPage"
          >{{ t("withdraw.waitPage.btnTetx") }}</view
        >
      </view>
    </view>
  </mobile-sub-layout>
</template>

<script setup>
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { useThemeStore } from "@/store/useThemeStore";
import { useI18n } from "vue-i18n";
import { onShow } from "@dcloudio/uni-app";
import { onLoad } from "@dcloudio/uni-app";

const themeStore = useThemeStore();
const { t } = useI18n();
let withdrawInfo = reactive({
  bankCard: null,
  arrivalAmount: null,
  orderNumber: null,
  serviceCharege: null,
  withdrawAmount: null,
});

onLoad((option) => {
	if (option) {
		withdrawInfo.bankCard = option.bankCard;
		withdrawInfo.arrivalAmount = option.arrivalAmount;
		withdrawInfo.orderNumber = option.orderNumber;
		withdrawInfo.serviceCharege = option.serviceCharege;
		withdrawInfo.withdrawAmount = option.withdrawAmount;
	}
})
/**
 * 返回个人中心页面
 */
const goToAccountPage = () => {
	uni.navigateBack({
		delta: 2
	})
  uni.switchTab({ url: "/pages/account/Account" });
}

const handleCopyClick = (text) => {
  uni.setClipboardData({
    data: text,
    success() {
      uni.showToast({
        title: t("deposit.toast.text4"),
        icon: "success",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.withdraw-wait-page {
  width: 100%;
  height: calc(100vh - 88rpx);
  position: relative;

  .withdraw-wait-page-top {
    box-sizing: border-box;
    padding-bottom: 50rpx;
    .padding-image {
      box-sizing: border-box;
      padding: 60rpx 0;
      display: flex;
      justify-content: center;
      .padding-image-size {
        width: 180rpx;
        height: 170rpx;
      }
    }
    .tip-text {
      width: 100%;
      text-align: center;
      font-size: 34rpx;
    }
    .tip-please-text {
      width: 100%;
      text-align: center;
      font-size: 24rpx;
      margin-top: 20rpx;
    }
  }
  .withdraw-wait-page-center {
    width: 100%;
    box-sizing: border-box;
    padding: 30rpx;
		font-size: 26rpx;

    .withdraw-wait-page-center-bg {
      border-radius: 20rpx;
    }
    .withdraw-wait-page-center-item {
      width: 100%;
      height: 90rpx;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 0 30rpx;
      line-height: 90rpx;

      display: flex;
      justify-content: space-between;
    }
    .m-bottom {
      margin-bottom: 20rpx;
    }
  }
}
.btn-bg {
  width: 100%;
  height: 150rpx;
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0 30rpx;
  .btn {
    width: 100%;
    height: 90rpx;
    border-radius: 45rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 90rpx;
  }
}
</style>
