<template>
  <div class="container">
    <div class="content">
      <div class="card-box">
        <div class="card-title">{{ $t("wallet.Selectthecurrency") }}</div>
        <div class="card-input" @click="selectPop(1)">
          <van-image width="30px" height="30px" round :src="selecctList.logo" />
          <div class="card-text">{{ selecctList.name }}</div>
          <svg-icon style="width: 16px; height: 16px" name="down" />
        </div>
      </div>
      <div class="card-box">
        <div class="card-title">
          {{ $t("wallet.DeliveryAddress") }}
          <svg-icon
            style="width: 16px; height: 16px"
            name="address"
            @click="goToAddress"
          />
        </div>
        <div class="card-input" style="height: 100%">
          <van-field
            type="textarea"
            v-model="walletAddress"
            :placeholder="$t('wallet.PleaseEnterTheDeliveryAddress')"
            rows="1"
            :autosize="true"
          >
            <template #right-icon>
              <svg-icon
                style="width: 16px; height: 16px"
                name="sm"
                @click="changeSM"
              />
            </template>
          </van-field>
        </div>
      </div>
      <div class="card-box">
        <div class="card-title">
          <div>{{ $t("wallet.TransfeQuantity") }}</div>
          <div>可用：{{ selecctList.balance }} {{ selecctList.name }}</div>
        </div>
        <div class="card-input">
          <van-field v-model="unitNum" placeholder="0.00" />
          <div class="card-input-right">
            <div>{{ selecctList.name }}</div>
            <div class="line"></div>
            <div class="all" @click="unitNum = selecctList.balance">
              {{ $t("wallet.All") }}
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="card-box">
                <div class="card-title">网络费用</div>
                <div class="card-input" style="flex-direction: column;align-items: self-start;padding: 8px 17px;">
                    <div>18.34344398867676764566000ACC</div>
                    <div class="price">STT0.01</div>
                </div>
            </div> -->
    </div>
    <van-button
      class="footer-btn"
      type="primary"
      size="large"
      @click="selectPop(2)"
      :disabled="isDisabled"
      >{{ $t("wallet.Sure") }}</van-button
    >
    <van-popup
      v-model:show="showWallet"
      position="bottom"
      round
      style="height: 400px"
    >
      <div class="pop-content" style="height: 400px">
        <div class="pop-title">
          <svg-icon
            style="width: 24px; height: 24px"
            name="left-arrow"
            @click="showWallet = false"
          />
          <div class="title">
            {{
              selectType == 1
                ? $t("wallet.SelectTheCurrency")
                : $t("wallet.TransactionDetails")
            }}
          </div>
        </div>
        <div class="list-ul" v-if="selectType == 1">
          <div
            class="list-li"
            v-for="item in hotTokensList"
            @click="changeList(item)"
            :key="item.name"
          >
            <div class="list-li-lf">
              <van-image width="42px" height="42px" round :src="item.logo" />
              <div style="margin-left: 12px">{{ item.name }}</div>
            </div>
            <div class="list-li-ri">
              <div>{{ item.balance }}</div>
              <div class="list-li-ri-num">${{ item.money }}</div>
            </div>
          </div>
        </div>
        <div class="pop-detail" v-if="selectType == 2">
          <!-- <div class="pop-detail-title">-{{gasFee}} ACC</div> -->
          <div class="pop-detail-cell">
            <div class="cell-label">{{ $t("wallet.PaymentAddress") }}</div>
            <div class="cell-text">{{ walletStore.account }}</div>
          </div>
          <div class="pop-detail-cell">
            <div class="cell-label">{{ $t("wallet.ReceivingAddress") }}</div>
            <div class="cell-text">{{ walletAddress }}</div>
          </div>
          <div class="pop-detail-cell">
            <div class="cell-label">{{ $t("wallet.MinerIsFee") }}</div>
            <div class="cell-text">{{ gasFee }} ACC</div>
          </div>
          <div class="pop-btn">
            <van-button
              class="btn"
              type="primary"
              size="large"
              color="#4765DD"
              @click="confirm"
              :disabled="!gasFee || gasFee === '0.0000'"
              >确认</van-button
            >
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model:show="showPassWord" :style="{ borderRadius: '25px' }">
      <div class="pop-content-password">
        <div class="pop-title-password">
          {{ $t("wallet.PleaseEnterThePassword") }}
        </div>
        <van-field v-model="passWord" class="pop-input" type="password" />
        <div class="pop-btn-password">
          <van-button
            type="default"
            class="btn-password cancel"
            @click="cancel"
            >{{ $t("wallet.Cancel") }}</van-button
          >
          <van-button
            type="default"
            class="btn-password confirm"
            @click="popConfirm"
            :disabled="isDisabledConfirm"
            >{{ $t("wallet.Sure") }}</van-button
          >
        </div>
      </div>
    </van-popup>
    <van-overlay :show="percentageShow">
      <div class="progress-text">
        <span>{{ pivotText }}</span>
      </div>
      <van-progress
        class="progress"
        stroke-width="8"
        :percentage="percentage"
      />
    </van-overlay>
  </div>
</template>

<script setup>
import { verifyFingerprint } from "@/components/Biometrics/biometrics.js";
import { startScan } from "@/composables/barcodeScanner.js";
import { useRouter, useRoute } from "vue-router";
import { useWalletStore } from "@/stores/modules/walletStore";
import Web3 from "web3";
import pubData from "@/utils/pub.json";
import { cryptoDecode } from "@/utils/crypto.js";
import { showLoadingToast, showToast } from "vant";
import { showNotify } from "vant";

const router = useRouter();
const route = useRoute();
const walletStore = useWalletStore();
const web3 = new Web3(walletStore.rpcUrl);

const walletAddress = ref(route.query.address || "");
const unitNum = ref("");
const showWallet = ref(false);
const showPassWord = ref(false);
const selectType = ref("");
let hotTokensList = walletStore.tokenList;
let selecctList = walletStore.tokenList[0];
const passWord = ref("");
const gasFee = ref("");
const isDisabledConfirm = ref(false);
const percentage = ref(0);
const pivotText = ref("Logging in...");
const percentageShow = ref(false);

// setInterval(()=>{
//   percentage.value += 1
// }, 200)

const isDisabled = computed(() => {
  const num = parseFloat(unitNum.value);
  return (
    !walletAddress.value || // 钱包地址为空
    !unitNum.value || // 输入为空
    isNaN(num) ||
    num <= 0 ||
    num > selecctList.balance // 非法数值
  );
});

const goToAddress = () => {
  router.push("transferAddressManagement");
};
const selectPop = (type) => {
  showWallet.value = true;
  selectType.value = type;
};
watch(
  () => selectType.value,
  (val) => {
    if (val === 2) {
      estimateGasFee();
    }
  }
);

const estimateGasFee = async () => {
  try {
    const from = walletStore.account;
    const to = walletAddress.value;
    const amount = unitNum.value;

    if (!from || !to || !amount) return;

    const isACC = selecctList.name === "ACC";

    let tx;
    if (isACC) {
      // ① 直接转账
      tx = {
        from,
        to,
        value: web3.utils.toWei(amount.toString(), "ether"),
      };
    } else {
      // ② ERC20 代币转账
      const contract = new web3.eth.Contract(pubData, selecctList.address);
      const value = web3.utils.toWei(amount.toString(), "ether"); // 注意小数位
      tx = {
        from,
        to: selecctList.address,
        data: contract.methods.transfer(to, value).encodeABI(),
      };
    }

    const gasPrice = await web3.eth.getGasPrice(); // 单位 Wei
    const gasLimit = await web3.eth.estimateGas(tx); // 单位 Gas

    const feeWei = BigInt(gasPrice) * BigInt(gasLimit);
    gasFee.value = Number(
      web3.utils.fromWei(feeWei.toString(), "ether")
    ).toFixed(8);
  } catch (err) {
    console.error($t("wallet.FailedToEstimateMinerFees"), err);
    gasFee.value = "0.0000";
  }
};

const changeList = (item) => {
  selecctList = item;
  showWallet.value = false;
  unitNum.value = "";
};
// 扫码
const changeSM = async () => {
  const result = await startScan();
  walletAddress.value = result.ScanResult;
};
// 确认
const confirm = async () => {
  showWallet.value = false;
  const verified = await verifyFingerprint();
  console.log(verified);
  if (verified) {
    getData();
  } else {
    showPassWord.value = true;
  }
};
// 密码取消
const cancel = () => {
  passWord.value = "";
  showPassWord.value = false;
};
// 密码确认
const popConfirm = () => {
  if (passWord.value != cryptoDecode(walletStore.accountPassword)) {
    showNotify({
      type: "warning",
      message: $t("wallet.PleaseEnterTheCorrectPassword"),
    });
  } else {
    getData();
  }
};
// 请求链
const getData = async () => {
  cancel();
  isDisabledConfirm.value = true;
  // showLoadingToast({
  //   message: $t('wallet.TransferInProgress'),
  //   forbidClick: true,
  //   });
  percentageShow.value = true;
  percentage.value = 5;
  try {
    let receipt;
    percentage.value = 10;
    if (selecctList.name === "ACC") {
      // ETH 转账
      receipt = await sendETH(
        walletStore.privateKey,
        walletAddress.value,
        unitNum.value
      );
    } else {
      // ERC‑20 代币转账
      receipt = await sendToken(
        walletStore.privateKey,
        selecctList.address,
        walletAddress.value,
        unitNum.value
      );
    }

    showToast($t("wallet.TheTransferWasSuccessful"));
    router.push("/wallet");
  } catch (err) {
    showToast($t("wallet.TransferFailed"));
    percentageShow.value = false;
  } finally {
    percentage.value = 100;
    percentageShow.value = false;
    showWallet.value = false;
    isDisabledConfirm.value = false;
  }
};
// ========= ETH 转账 =========
const sendETH = async (privateKey, toAddress, amountInEther) => {
  const account = web3.eth.accounts.privateKeyToAccount(privateKey);
  const from = account.address;
  pivotText.value = $t("wallet.GetNonce");
  const nonce = await web3.eth.getTransactionCount(from, "latest");
  percentage.value = 30;
  pivotText.value = $t("wallet.GetGasPrice");
  const gasPrice = await web3.eth.getGasPrice();
  pivotText.value = $t("wallet.AcquiringTransactionData");
  percentage.value = 60;
  pivotText.value = $t("wallet.SigningTransaction");
  const tx = {
    from,
    to: toAddress,
    value: web3.utils.toWei(amountInEther.toString(), "ether"),
    gas: 21000,
    gasPrice,
    nonce,
    chainId: await web3.eth.getChainId(),
  };
  percentage.value = 80;
  pivotText.value = $t("wallet.TransactionIsBeingSent");
  const signedTx = await web3.eth.accounts.signTransaction(tx, privateKey);
  percentage.value = 96;
  pivotText.value = $t("wallet.WaitingForTransactionConfirmation");
  return await web3.eth.sendSignedTransaction(signedTx.rawTransaction);
};
// ========= ERC‑20 代币转账 =========
const sendToken = async (privateKey, tokenAddress, toAddress, amount) => {
  const account = web3.eth.accounts.privateKeyToAccount(privateKey);
  const from = account.address;
  pivotText.value = $t("wallet.GetNonce");
  const contract = new web3.eth.Contract(pubData, tokenAddress);
  const nonce = await web3.eth.getTransactionCount(from, "latest");
  percentage.value = 40;
  pivotText.value = $t("wallet.GetGasPrice");
  const gasPrice = await web3.eth.getGasPrice();
  percentage.value = 60;
  const value = web3.utils.toWei(amount.toString(), "ether");
  pivotText.value = $t("wallet.AcquiringTransactionData");
  const txData = contract.methods.transfer(toAddress, value).encodeABI();
  percentage.value = 70;
  pivotText.value = $t("wallet.SigningTransaction");
  const tx = {
    from,
    to: tokenAddress,
    data: txData,
    gas: 100000,
    gasPrice,
    nonce,
    chainId: await web3.eth.getChainId(),
  };

  percentage.value = 80;
  pivotText.value = $t("wallet.TransactionIsBeingSent");
  const signedTx = await web3.eth.accounts.signTransaction(tx, privateKey);
  percentage.value = 96;
  pivotText.value = $t("wallet.WaitingForTransactionConfirmation");
  return await web3.eth.sendSignedTransaction(signedTx.rawTransaction);
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 86vh;
  padding: 17px 17px 33px;
  box-sizing: border-box;
  .content {
    flex: 1;
    .card-box {
      margin-bottom: 25px;
      .card-title {
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #8d8d8d;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .card-input {
        background: #f2f2f2;
        border-radius: 8px;
        border: 1px solid #d8d8d8;
        display: flex;
        align-items: center;
        padding: 18px 17px;
        height: 56px;
        box-sizing: border-box;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #000000;
        .card-text {
          margin: 0 5px 0 8px;
        }
        .card-input-right {
          display: flex;
          align-items: center;
          flex-shrink: 0;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #000000;
          margin-left: 17px;
          .line {
            height: 25px;
            border: 1px solid #d8d8d8;
            width: 0;
            margin: 0 17px;
          }
          .all {
            font-weight: 500;
            color: @theme-color1;
          }
        }
        .price {
          font-size: 12px;
          color: #8d8d8d;
          margin-top: 1px;
        }
        :deep(.van-cell) {
          background: #f2f2f2 !important;
          padding: 0 !important;
        }
        :deep(.van-field__control) {
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #000000;
        }
      }
    }
  }
  .footer-btn {
    height: 40px !important;
    line-height: 40px !important;
    background: linear-gradient(
      90deg,
      @theme-color1 0%,
      #40a4fb 100%
    ) !important;
    border-radius: 28px;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 500;
    font-size: 15px;
    padding: 9px 0;
    box-sizing: border-box;
    color: #ffffff;
  }
  .pop-content {
    display: flex;
    flex-direction: column;
    .pop-title {
      padding: 17px;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      align-items: center;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 500;
      font-size: 17px;
      color: #000000;
      .title {
        flex: 1;
        display: flex;
        justify-content: center;
      }
    }
    .list-ul {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      margin: 16px;
      .list-li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 500;
        margin-bottom: 16px;
        .list-li-lf {
          display: flex;
          align-items: center;
          font-size: 15px;
          color: #000000;
        }
        .list-li-ri {
          font-size: 15px;
          color: @font-color2;
          text-align: right;
          .list-li-ri-num {
            margin-top: 3px;
            font-weight: 400;
            font-size: 12px;
            color: #8d8d8d;
          }
        }
      }
      .list-li:last-child {
        margin-bottom: 0;
      }
    }
    .list-ul::-webkit-scrollbar {
      width: 0;
    }
    .pop-detail {
      padding: 17px 17px 0;
      .pop-detail-title {
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 500;
        font-size: 17px;
        color: #000000;
        margin-bottom: 20px;
        text-align: center;
      }
      .pop-detail-cell {
        display: flex;
        font-family:
          PingFang SC,
          PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #4f4f4f;
        padding: 10px 0;
        border-bottom: 1px solid #f2f2f2;
        .cell-label {
          width: 76px;
          flex-shrink: 0;
        }
        .cell-text {
          word-break: break-word;
        }
      }
      .pop-detail-cell:last-child {
        border-bottom: 0;
      }
      .pop-btn {
        margin-top: 53px;
        .btn {
          height: 40px;
          line-height: 40px;
          border-radius: 50px;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 500;
          font-size: 15px;
          color: #ffffff;
        }
      }
    }
  }
}
.pop-content-password {
  padding: 27px 35px 25px 34px;
  .pop-title-password {
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 500;
    font-size: 17px;
    color: #000000;
    text-align: center;
  }
  .pop-input {
    background: #f2f2f2;
    border-radius: 8px;
    height: 40px;
    margin: 21px 0 31px;
  }
  .pop-btn-password {
    display: flex;
    justify-content: center;
    .btn-password {
      width: 83px;
      height: 29px;
      line-height: 29px;
      padding: 5px 0 !important;
      border-radius: 6px;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 15px;
      box-sizing: border-box;
    }
    .cancel {
      margin-right: 17px !important;
      border: 1px solid #d8d8d8;
      color: #000 !important;
    }
    .confirm {
      background: @theme-color1;
      color: #fff;
      font-weight: 500;
      border: none !important;
    }
  }
}
:deep(.van-popup--center) {
  margin: 0 40px !important;
  width: auto !important;
}
.progress {
  width: 80vw;
  margin: 0 auto;
}
.progress-text {
  width: 100vw;
  margin-top: 45vh;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  color: #fff;
}
</style>
