<template>
  <div class="container">  
    <div class="tag-container">
      <van-tag v-for="item in walletData.words" :key="item" plain type="primary"   text-color="#4765DD">{{ item }}</van-tag>
    </div>



     <div class="button-group"  >

      <a class="button-group-mnemonic  a-link" @click="copyText" > {{  $t('login.CopyMnemonic')  }}</a>
      <van-button round block type="primary" native-type="submit" @click="next">
        {{ $t("login.BackupComplete") }}
      </van-button>
    </div>

  </div>
</template>

<script setup>
import { Clipboard } from '@capacitor/clipboard';
import { createAccent } from "@/api/path/login.api";
import { useSystemStore } from "@/stores/modules/systemStore";
import { useWalletAuth } from "@/composables/useWalletAuth";


const systemStore = useSystemStore();
const { 
  authState, 
  loginWithPrivateKey, 
  loginWithStorage, 
  logout, 
  hasStoredWallet,
  getBalance
} = useWalletAuth()

const walletData = ref({})

const next = async () => {
 
  // 登录
  const data = await loginWithPrivateKey(systemStore.getWallet.privateKey.trim())
  console.log("data=", data)
  // 
  const res = await getBalance()
  console.log("res=", res)
}


const copyText = async () => {
  await Clipboard.write({
    string: walletData.value.words
  }); 
  $msg({type: 'success', message: $t("login.CopiedToClipboard")});
};



onMounted(async () => {
  const { data } = await createAccent({});
  walletData.value =  JSON.parse(atob(data.content) ) 
  systemStore.setStateValue({
    key: "wallet",
    value: {
      address: walletData.value.address1,
      privateKey: walletData.value.privateKey,
    },
    localStorage: true,
  });
})
</script>

<style scoped lang="less">
 
.tag-container{
  margin-top: 3px; 
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
  padding: 27px;
  .van-tag{
    width: 87px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  } 
  .van-tag--plain{
    background: #ECEFFC;
  }
}

.button-group{
  margin: 33px 17px 0 17px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  .button-group-mnemonic{
    font-size: 14px; 
    margin-bottom: 21px;
  }
}
</style>