import { Component, Prop, Vue } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import bus, { SYNC } from '@/utils/bus-event'
import IAccount from '@/models/IAccount'
import IUser from '@/models/IUser'

@Component
export default class BaseAccount extends Vue {
  @Getter public user!: IUser | null
  @Prop({ type: String, required: true })
  public id!: string
  public account: IAccount | null = null
  public removing: boolean = false

  public async mounted(): Promise<void> {
    bus.$on(SYNC, this.getData)
    await this.getData()
    const anchor = this.$router.currentRoute.hash
    if (anchor && document.querySelector(anchor)) {
      this.$nextTick(() => {
        location.href = anchor
        // add scroll to manage fixed header
        window.scrollBy(0, -60)
      })
    }
  }

  public beforeDestroy(): void {
    bus.$off(SYNC, this.getData)
  }

  public async getData(docIds?: string[]): Promise<void> {
    throw new Error(
      `abstract method, need to be override ${docIds && docIds.join(', ')}`
    )
  }
}
