<template>
  <van-form @submit="onSubmit"  >
    <van-cell-group inset>
      <!-- <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" native-type="submit">
        {{ $t("form.ConfirmCreation") }}
      </van-button>
    </div>
  </van-form>
  <van-popup v-model:show="show" round position="bottom" style="height:387px">
    <div class="pop-content">
      <div class="pop-title">{{ $t("form.BackupWallet") }}</div>
      <svg-icon class="pop-icon" name="bf"/>
      <div class="pop-subtitle">{{ $t("form.PleaseDoNotTakeScreenshots") }}</div>
      <div class="pop-text">{{ $t("form.IfAnyoneObtainsYourMnemonicPhraseTheyWillDirectlyAccessYourAssetsPleaseCopyDownTheMnemonicPhraseAndStoreItInASafePlace") }}</div>
      <van-button class="pop-btn" round block @click="goTo">好的</van-button>
    </div>
  </van-popup>
</template>

<script setup>
import _ from "lodash";
import { cryptoEncode } from "@/utils/crypto.js"
import { useWalletStore } from "@/stores/modules/walletStore";

const router = useRouter();
const walletStore = useWalletStore();

const form = ref({});
const show = ref(false);

const onSubmit = ()=>{
  if(form.value.password !== form.value.confirmPassword){ 
    $msg($t("form.InconsistentPasswords"));
    return 
  }
  show.value = true;
}
const goTo = () => {
  let data = _.cloneDeep(form.value)
  data.password = cryptoEncode(data.password) 
  // 将钱包信息保存 
  walletStore.accountPassword = data.password
  walletStore.accountHint = data.promptMessage
  router.push({
    path: "/backupMnemonic",
  });
  show.value = false;
}

</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;
  }
}
.pop-content{
  padding: 36px 40px 50px;
  height: 387px;
  box-sizing: border-box;
  .pop-title{
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 21px;
    color: #000000;
    text-align: center;
  }
  .pop-icon{
    width: 84px;
    height: 70px;
    margin: 16px auto 12px;
    display: block;
  }
  .pop-subtitle{
    margin-bottom: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 17px;
    color: #000000;
    text-align: center;
  }
  .pop-text{
    margin-bottom: 36px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #4F4F4F;
    text-align: center;
  }
  .pop-btn{
    height: 54px;
    border-radius: 70px 70px 70px 70px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 19px;
    color: #FFFFFF;
    background: #4F4F4F;
    border:none !important;
    box-sizing: border-box;
    padding: 0 !important;
  }
}
</style>
