<template>
  <div class="content-mobile__profile">
    <header-mobile-component></header-mobile-component>

    <main class="profile-mobile" :class="{ 'header-off' : payments.paymentsWindow }">
      <div class="profile-mobile__content">
        <div class="macroinfo-profile text-default-mobile img-margin">
          <h2>Профиль</h2>
          <img :src="imageUrl">
        </div>
        <div class="info-profile">
          <h3 class="text-nickname-user">{{ username }}</h3>
          <h3 class="balance-border balance-display balance-text"><img src="@/assets/icons-profile/icon-diamond-ore.png">{{ balance }}</h3>
          <div class="profile-mobile__btns-payments">
            <a href="#" @click="paymetsCall('dep')" class="deposit-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
            <a href="#" @click="paymetsCall('with')" class="withdraw-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
          </div>
        </div>
      </div>
    </main>
    <menu-mobile-component></menu-mobile-component>
    <payments-mobile @closemodal="paymentsClose" :payments="payments" v-if="payments.paymentsWindow"></payments-mobile>
  </div>
</template>

<script>
import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
import PaymentsMobile from "@/components/adaptive-components/PaymentsMobile.vue";

import { GetCookie } from "@/assets/js/storage/CookieStorage";
import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";

import '@/assets/css/PagesStyles/adaptive-pages/profilemobile.css'
import {eventBus} from "@/main";

export default {
  components: { HeaderMobileComponent, MenuMobileComponent, PaymentsMobile },
  data () {
    return {
      payments: {
        paymentsWindow: false,
        paymentsView: false,
      },
      username: 'Artemka',
      imageUrl: '',
      balance: 0
    }
  },
  created() {
    if (GetCookie('AUTHTOKEN') && GetCookie('SearchToken')) {
      this.username = GetCookie('SpUserName')
      GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
          .then((response) => {
            this.balance = response.currentMoney
          })

      this.imageUrl = `https://avatar.spworlds.ru/front/256/${this.username}`
    }
  },
  mounted() {
    eventBus.on("Updatebalance", () => {
      this.updateBalanceMethod();
    });
  },
  methods: {
    paymetsCall(view) {
      this.payments.paymentsWindow = true
      this.payments.paymentsView = view === 'dep'
    },
    paymentsClose() {
      this.payments.paymentsWindow = false
    },
    updateBalanceMethod() {
      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
          (response) => {
            this.balance = response.currentMoney;
          }
      );
      eventBus.emit("Updatebalance-saper");
    },
  }
}
</script>

<style scoped>

</style>