<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')"
        :rules="[
          {
            required: true,
            message: $t('form.PleaseFillIn') + $t('form.PromptMessage'),
          },
        ]"
      />
    </van-cell-group>
    <div class="button-group"  >
      <van-button round block type="primary" native-type="submit">
        {{ $t("form.ConfirmCreation") }}
      </van-button>
    </div>
  </van-form>
</template>

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

const router = useRouter();
const systemStore = useSystemStore();
const form = ref({});


const onSubmit = ()=>{
  if(form.value.password !== form.value.confirmPassword){
    $msg({ type: 'warning', message: $t("form.InconsistentPasswords") })
    return 
  }
  let data = _.cloneDeep(form.value)
  data.password = cryptoEncode(data.password)
  systemStore.setStateValue({
    key: "user_login_information",
    value: data,
    localStorage: true,
  });

  router.push({
    name: "backupMnemonic",
  });
}

</script>

<style scoped lang="less">
.van-cell-group{
  margin-top: 16px;
}
.button-group{
  width: calc(100% - 32px);
  position: absolute;
  left: 16px;
  bottom: 70px;
}
</style>
