<template>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="form.userKey"
        :label="type == 0 ? $t('form.PrivateKey') : $t('form.MemoryAidWord')"
        rows="3"
        autosize
        type="textarea"
        :placeholder="
          type == 0
            ? $t('form.PleaseEnterThePrivateKey')
            : $t('form.PleaseEnterTheMnemonicPhrase')
        "
        show-word-limit
      />
      <!-- <van-field
        v-model="form.username"
        name="username"
        :label="$t('form.WalletName')"
        :placeholder="$t('form.PleaseFillIn') + $t('form.WalletName')"
        :rules="[
          {
            required: true,
            message: $t('form.PleaseFillIn') + $t('form.WalletName'),
          },
        ]"
      /> -->
      <van-field
        v-model="form.password"
        type="password"
        name="password"
        :label="$t('form.WalletPassword')"
        :placeholder="$t('form.PleaseFillIn') + $t('form.WalletPassword')"
        :rules="[
          {
            required: true,
            message: $t('form.PleaseFillIn') + $t('form.WalletPassword'),
          },
        ]"
      />

      <van-field
        v-model="form.confirmPassword"
        type="password"
        name="confirmPassword"
        :label="$t('form.ConfirmPassword')"
        :placeholder="$t('form.PleaseFillIn') + $t('form.ConfirmPassword')"
        :rules="[
          {
            required: true,
            message: $t('form.PleaseFillIn') + $t('form.ConfirmPassword'),
          },
        ]"
      />

      <van-field
        v-model="form.promptMessage"
        name="promptMessage"
        :label="$t('form.PromptMessage')"
        :placeholder="$t('form.PleaseFillIn') + $t('form.PromptMessage')"
      />
    </van-cell-group>
    <div class="button-group">
      <van-button class="btn" round block type="primary" 
        :loading-text="$t('form.Loading')"
        :loading="loading" native-type="submit">
        {{ $t("router.ImportWallet") }}
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import _ from "lodash";
import { cryptoEncode } from "@/utils/crypto.js"
import { useRoute } from "vue-router";
import { useWalletStore } from "@/stores/modules/walletStore";
import { createAccent } from "@/api/path/login.api";
 

const router = useRouter();
const route = useRoute();
const walletStore = useWalletStore();
const type = route.query.type;
const loading = ref(false);

const form = ref({
  userKey: "",
});

const onSubmit = async () => {
  if (form.value.password !== form.value.confirmPassword) {
    $msg($t("form.InconsistentPasswords"));
    return;
  }
  loading.value = true;
  if(type == 0){
    walletStore.privateKey = form.value.userKey;
  }else{
    walletStore.words = form.value.userKey.trim().split(',');
  }
  let data = _.cloneDeep(form.value)
  data.password = cryptoEncode(data.password) 
  walletStore.accountPassword = data.password ;
  walletStore.accountHint = form.value.promptMessage;
  if(type == 1){
    const res = await createAccent({words: form.value.userKey.trim().split(',')});
    let walletData = JSON.parse(atob(res.data.content));
    walletStore.account = walletData.address;
    walletStore.privateKey = walletData.privateKey;
  }
  await walletStore.loginWithPrivateKey();
  loading.value = false;
  router.push({
    path: "/wallet",
  });
};
</script>

<style scoped lang="less">
.van-cell-group {
  margin-top: 16px;
  :deep(.van-cell){
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 16px !important;
    color: #000000;
  }
}
.button-group {
  width: calc(100% - 32px);
  position: absolute;
  left: 16px;
  bottom: 70px;
  .btn {
    background: @theme-color1;
    border-radius: 70px;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 600;
    font-size: 19px;
    color: #ffffff;
    height: 54px !important;
    border: none !important;
  }
}
</style>
